SwiftUI 从中心向右水平对齐

Question

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

例如，中心视图是 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) 之类的东西也是一种即兴发挥，因为中心文本的字体大小会有所不同，所以我也不得不猜测并手动调整偏移量——我宁愿在两个视图之间有一个填充。

Answer 1

这是基于对齐指南的可能方法。使用 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: { [=11=].width / 2.0 })
                    Text("+3")
                    Text("+10")
                    Text("-1")
                }
            }
            .frame(maxWidth: gp.size.width, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
        }
    }
}

Answer 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）

SwiftUI 从中心向右水平对齐

SwiftUI horizontal alignment from center to the right

layout

swiftui

hstack