layout - SwiftUI 从中心向右水平对齐

Question

我正在尝试将 View 的动态集合(即不同数量的)对齐到居中 View 的右侧，而不将中心 View 从其原始中心位置移动。

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

| 12 +3 +10 -1 |

如果我尝试使用 HStack，12 将远离中心。有我可以使用的 View 修改器吗？前任。 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) 之类的东西也很实用，因为中心文本的字体大小会有所不同，所以我'我还必须手动猜测和调整偏移量——我宁愿在两个 View 之间有一个填充。

Answer 1

这是基于对齐指南的可能方法。

更新:Xcode 14/iOS 16 - 仍然有效

使用 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 {
        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: .infinity, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
    }
}