Question

我正在尝试使用SwiftUI进行以下布局。 screenshot

表单标签的trailing alignment与父视图的中心对齐。同样，TextFields的前导对齐也与父视图的中心对齐。

我有以下代码-

        HStack {
            Spacer()
            VStack {
                HStack {
                    Spacer()
                    Text("Name")
                    TextField("", text: .constant(""))
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 100)
                }

                HStack {
                    Spacer()
                    Text("Adress")
                    TextField("", text: .constant(""))
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 100)
                }

                HStack {
                    Spacer()
                    Text("Short Description")
                    TextField("", text: .constant(""))
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 100)
                }
            }
            .layoutPriority(1)
            Spacer()
        }

结果

iphone

Answer 1

目前我没有Xcode，但是为什么不能将所有文本都放在Vstack中，而又不能将TextField放在单独的Vstack中呢？像这样

   HStack {
        HStack {        
            VStack(alignment: .trailing) {
                Spacer()
                Text("Name")
                Text("Adress")
                Text("Short Description")

            }

            VStack{

                BorderedTextField(placeholder: "", text: .constant(""))
                    .frame(maxWidth: 100)
                BorderedTextField(placeholder: "", text: .constant(""))
                    .frame(maxWidth: 100)
                BorderedTextField(placeholder: "", text: .constant(""))
                .frame(maxWidth: 100)
            }
        }
        .layoutPriority(1)
        Spacer()
    }

另一种可能性是创建自定义对齐方式，对此here from WWDC

的讨论非常好

Answer 2

我想出了一个可能的解决方案，该解决方案可以使用build.properties。我仍然希望有一种更好的方法来做到这一点，但这行得通：

GeometryReader

使用父级的宽度将屏幕分为2个相等的列
将所有表单标签放置在第一列中，并将字段放置在第二列中
调整表单标签之间的间距以使其与相应的字段对齐

Answer 3

好吧，我想我已经按要求完成了。您的解决方案显然是所谓的过度设计。尝试使用较少的视图，并尝试其他配置，然后再使用GeometryReader进行深入研究。这是我的代码（我将字段包装在ForEach中）：

字段：

private var fields: some View {
    VStack(alignment: .trailing) {
        ForEach(["Name", "Adress", "Short Description"], id: \.self) { s in
            HStack {
                Text(s)
                TextField("", text: .constant(""))
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .frame(maxWidth: 100)
            }
        }
    }
}

查看：

var body: some View {
    ZStack {
        Spacer()
        fields
            .alignmentGuide(HorizontalAlignment.center) { d in d.width - 100 }
    }
}

这是工作的，假设文本字段的宽度保持固定。对于更复杂的界面，请避免使用自定义对齐方式，它们非常酷。我建议观看WWDC会议，尤其是this one

希望有帮助

如何将视图的尾部对齐与其父级的垂直轴对齐？

3 个答案: