Question

假设我建立这样的视图：

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的中心应保持相同），并且其他文本元素应放在中间。

我该如何实现？我尝试查看对齐指南，但似乎似乎并不了解如何正确使用它们。

Answer 1

花了一些时间详细了解对齐方式后，我设法找到了一个仅使用堆栈和自定义对齐方式的解决方案，使用的对齐方式指南最少，并且无需保存任何中间状态。它纯粹是声明性的，因此我认为这就是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)

SwiftUI：使布局相对于中央视图

1 个答案: