SwiftUI从中心向右水平对齐

Posted 2023-03-15

【中文标题】SwiftUI从中心向右水平对齐

【英文标题】：SwiftUI horizontal alignment from center to the right

【发布时间】：2020-03-16 17:51:22

【问题描述】：

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

例如，中心视图是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) 之类的东西也很有趣，因为中心文本的字体大小会有所不同，所以我也必须手动猜测和调整偏移量——我宁愿在两个视图。

【参考方案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:  $0.width / 2.0 )
                    Text("+3")
                    Text("+10")
                    Text("-1")
                
            
            .frame(maxWidth: gp.size.width, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
        
    

【讨论】：

这是一个非常复杂的解决方案，它应该是一个容易解决的问题——不是你的错，是 SwiftUI 的错。我希望有一个视图修饰符——我认为 SwiftUI 仍然需要一些改进。

【参考方案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”的宽度相同，我从answer得到了这个理解

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