如何使用Swiftui创建用户表单

Posted 2021-05-03

我想创建一个表单，其中所有文本字段都需要从相同的对齐方式开始，就像下面的图片中那样，它不是从相同的对齐方式开始。名，姓和电话号码的所有textField均未正确对齐。

VStack(){
        HStack(){
            Text("First Name")
            TextField("First name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack(){
            Text("Last Name")
            TextField("Last Name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack(){
            Text("Phone number")
            TextField("Phone number", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        Spacer()
    }.padding(10)

答案

您可以使用GeometryReader访问设备尺寸，并使用frame设置Text的固定宽度。例如：

GeometryReader { geometry in
    VStack(spacing: 10) {
        HStack {
            Text("First Name").frame(width: geometry.size.width / 3)
            TextField("First name", text: self.$name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack {
            Text("Last Name").frame(width: geometry.size.width / 3)
            TextField("Last Name", text: self.$name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack{
            Text("Phone number").frame(width: geometry.size.width / 3)
            TextField("Phone number", text: self.$name).textFieldStyle(RoundedBorderTextFieldStyle())
        }
        Spacer()
    }.padding(10)
}     

另一答案

这将对齐您的TextField：

VStack {
    HStack {
        HStack {
            Text("First Name")
            Spacer()
        }
        TextField("First name", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
    HStack {
        HStack {
            Text("Last Name")
            Spacer()
        }
        TextField("Last Name", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
    HStack {
        HStack {
            Text("Phone number")
            Spacer()
        }
        TextField("Phone number", text: $name)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
    Spacer()
}   .padding(10) 

另一答案

        VStack{
            HStack(){
                Text("First Name").frame(width: 120, alignment: .leading)
                TextField("First name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            HStack(){
                Text("Last Name").frame(width: 120, alignment: .leading)
                TextField("Last Name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            HStack{
                Text("Phone number").frame(width: 120, alignment: .leading)
                TextField("Phone number", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            Spacer()
        }.padding(10)

或更灵活的解决方案

struct TestView: View {
    @State var name = ""
    @State var width: CGFloat = 0

    struct Label: ViewModifier {
        @Binding var width: CGFloat

        func getWidth(content: Content, proxy: GeometryProxy) -> some View {
            if proxy.size.width > width {
                RunLoop.main.perform {
                    self.width = proxy.size.width
                }
            }
            return content
        }

        func body(content: Content) -> some View {
            content.overlay(GeometryReader { proxy in
                self.getWidth(content: content, proxy: proxy)
            }).frame(minWidth: self.width, alignment: .leading)
        }
    }

    var body: some View {
        VStack(alignment: .center){
            HStack(){
                Text("First Name").modifier(Label(width: $width))
                TextField("First name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            HStack(){
                Text("Last Name").modifier(Label(width: $width))
                TextField("Last Name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            HStack{
                Text("Phone numbe").modifier(Label(width: $width))
                TextField("Phone number", text: $name).textFieldStyle(RoundedBorderTextFieldStyle())
            }

            Spacer()
        }.padding(10)
    }
}