Layout SwiftUI：相对于中心视图进行布局

假设我构建了如下视图：

struct MyView: View {
   @State private var a: String
   @State private var b: String
   @State private var c: String

   var body: some View {
      VStack {
        HStack {
          Text(a)

          // this is the central view
          Text(b).font(.headline)
        }

        Text(c)
      }
   }
}

我希望中央文本视图（显示

b

）成为布局的锚定。也就是说，无论其他文本值如何变化，我希望中心文本始终保持在

MyView

的中心（文本元素的中心和

MyView

的中心应保持相同），其他文本元素应围绕中心元素布置

---

我如何做到这一点？我试图查看对齐指南，但我似乎不明白如何正确使用它们。

在花了一些时间详细了解对齐工作原理后，我终于找到了一个只使用堆栈和自定义对齐的解决方案，对齐指南最少，不需要保存任何中间状态。它是纯声明性的，所以我想这就是SwiftUI设计者的意图。我仍然认为可能会有更好的设计，但我们可以使用它

struct ContentView: View {
    @State var a: String = "AAAAA"
    @State var b: String = "BBBB"
    @State var c: String = "CCCCCC"

    var body: some View {
         VStack {
            ZStack(alignment: .mid) {
                // create vertical and horizontal 
                // space to align to
                HStack { Spacer() }
                VStack { Spacer() }

                VStack(alignment: .midX) {
                    Text(self.a)

                    HStack(alignment: .center) {
                        Text(self.c)


                        Text(self.b)
                            .font(.title)
                            .border(Color.blue)
                            .alignmentGuide(.midX) { d in
                                (d[.leading] + d[.trailing])/2
                            }
                            .alignmentGuide(.midY) { d in
                                (d[.top] + d[.bottom])/2
                            }
                    }
                }
            }
            .layoutPriority(1.0)
            .overlay(CrossHair().stroke(Color.pink, lineWidth: 2))

            TextField("", text: self.$b).textFieldStyle(RoundedBorderTextFieldStyle())
        }
    }
}

fileprivate extension HorizontalAlignment {
    enum MidX : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return (d[.leading] + d[.trailing])/2
        }
    }

    static let midX = HorizontalAlignment(MidX.self)
}

fileprivate extension VerticalAlignment {
    enum MidY : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return (d[.top] + d[.bottom])/2
        }
    }

    static let midY = VerticalAlignment(MidY.self)
}

fileprivate extension Alignment {
    static let mid = Alignment(horizontal: .midX, vertical: .midY)

---

@kontiki感谢您富有洞察力的评论和提示。我想我通过消除了对

hs

state的需要，成功地改进了您的解决方案，但大部分功劳肯定归您所有：）