alignment - SwiftUI 中的布局与水平和垂直对齐

Question

我正在尝试完成此布局

如果我尝试包装在 VStack 中的 HStack，我会得到：

如果我尝试包装在 HStack 中的 VStack，我会得到：

有没有办法将文本与文本字段进行基线对齐，并从最长的标签到对齐的文本字段的开头获得标准间距？

标签： alignmentswiftui

Answer 1

在这里不是专家，但我设法通过以下方式实现所需的布局：（1）选择 2 VStacks-in-a-HStack替代方案，（2）框架外部标签，（3）通过分配将它们从默认的垂直扩展约束中释放出来他们maxHeight = .infinity和（4）固定的高度HStack

struct ContentView: View {
    @State var text = ""
    let labels = ["Username", "Email", "Password"]

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                ForEach(labels, id: \.self) { label in
                    Text(label)
                        .frame(maxHeight: .infinity)
                        .padding(.bottom, 4)
                }
            }

            VStack {
                ForEach(labels, id: \.self) { label in
                    TextField(label, text: self.$text)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            .padding(.leading)
        }
        .padding(.horizontal)
        .fixedSize(horizontal: false, vertical: true)
    }
}

这是生成的预览：

为了解决外部和内部标签的未对齐基线（与此特定布局无关的附带问题 - 例如参见此讨论），我手动添加了填充

感谢这个网站在理解 SwiftUI 布局技巧的道路上启发了我