0

我正在尝试将动态视图集合（即不同数量的视图）与居中视图的右侧对齐，而不将中心视图从其原始中心位置移动。

例如，中心视图是Text("12")右侧视图，[Text("+3"), Text("+10"), Text("-1")]所以我希望右侧的视图12显示在其右侧，而12在屏幕上水平居中：

| 12 +3 +10 -1 |

如果我尝试使用HStack将12远离中心。有我可以使用的视图修饰符吗？前任。Text("12").alignToRight(...)

此解决方案将集合与屏幕右边缘的左侧对齐，但这不是一回事。

ZStack {
  Text("12")

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }
}

我宁愿不必HStack在左侧复制然后使其消失以平衡HStack右侧（这是创建布局的一种荒谬方式，而且我在此处提供的示例实际上很简单我必须使用ForEach动态集合），即

HStack {

  Spacer()

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }
  .opacity(0)

  Text("12")

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }

  Spacer()

}

使用类似的东西Text("12").overlay(myCollectionView.offset(x: 16)也很有趣，因为中心文本的字体大小会有所不同，所以我也必须手动猜测和调整偏移量——我宁愿在两个视图之间有一个填充。

4

2 回答 2

3

这是基于对齐指南的可能方法。使用 Xcode 11.3 / iOS 13.3 测试。

演示

定义自定义对齐

extension HorizontalAlignment {
   private enum HCenterAlignment: AlignmentID {
      static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
         return dimensions[HorizontalAlignment.center]
      }
   }
   static let hCenterred = HorizontalAlignment(HCenterAlignment.self)
}

使用自定义对齐指南将所需的内部元素HStack与外部对齐VStack

struct TestRightCenterred: View {
    var body: some View {
        GeometryReader { gp in
            VStack(alignment: .hCenterred) {
                HStack(spacing: 4) {
                    Text("12").border(Color.red) // << just for test
                        .alignmentGuide(.hCenterred, computeValue: { $0.width / 2.0 })
                    Text("+3")
                    Text("+10")
                    Text("-1")
                }
            }
            .frame(maxWidth: gp.size.width, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
        }
    }
}
于 2020-03-16T18:07:42.160 回答
2

我在同样的问题上苦苦挣扎，并提出了这个解决方案

struct ContentView: View {
    var body: some View {
        HStack(spacing: 4) {
            HStack {               //HStack1
                Spacer()
                Spacer()
            }
            
            Text("12")
            
            HStack(spacing: 4) {   //HStack2
                Text("+3")
                Text("+10")
                Text("-1")
                Spacer()
            }
        }
    }
}

此代码导致“HStack1”和“HStack2”具有相同的宽度，我从这个答案中得到了这个理解

需要 Hstack1 中的两个 Spacer，因为一个在没有其他内容的情况下被忽略（例如，可以在空 Text("") 上更改，但我更喜欢 Spacer）

于 2020-10-12T14:12:49.640 回答