Swiftui创建表格texfield

Question

我想创建一个表单，其中每个文本字段都从与图像中相同的对齐方式开始，而不是从相同的对齐方式开始。名，姓和电话号码都是从不同的位置开始的。不是直线。

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)

Answer 1

您可以使用public static void processservicebus( [ServiceBusTrigger("myqueue", Connection = "ServiceBusConnection")]Message message, ILogger log) { log.LogInformation(message.ContentType); XDocument orderOut = XDocument.Parse(Encoding.UTF8.GetString(message.Body)); } 访问设备大小，并使用GeometryReader设置frame的固定宽度。例如：

Text

Answer 2

这将对齐您的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) 

Answer 3

        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)
    }
}