使用 Swiftui 我们如何创建用户表单 [英] With Swiftui how we can create user form

问题描述

我想创建一个表单，其中所有文本字段都需要从相同的对齐方式开始，如下图所示，它不是从相同的对齐方式开始.名字、姓氏和电话号码所有文本字段都没有正确对齐在一条垂直线上.

I want to create a form in which all textfield need to start from the same alignment, like in below image it does not start from the same alignment. First name, last name and Phone number all textFields are not aligned properly in a single vertical line.

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 的固定宽度 s.例如:

You can use GeometryReader to access device size and frame to set fixed width for Texts. For example:

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

这篇关于使用 Swiftui 我们如何创建用户表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！