Question

另一个简单的SwiftUI任务给我带来了比应有的麻烦。

我找不到正确对齐Text和TextField的方法。

HSTack比对似乎都无法产生可接受的结果。


import SwiftUI

struct SignIn: View {
    @State var email: String = ""

    var body: some View {
        VStack {
            Text("Sign In")
                .font(.largeTitle)
            Form {
                Section {
                    HStack {
                        Text("ID")
                        TextField("Email", text: $email)
                    }
                }
            }
        }
    }
}

struct SignIn_Previews: PreviewProvider {
    static var previews: some View {
        SignIn()
    }
}

Answer 1

您提到尝试使用不同的HStack对齐方式，是否尝试过.firstTextBaseline或.lastTextBaseline？这两个都为我正确地对齐了Text和TextField。这样那行变成

HStack(alignment: .lastTextBaseline) {

Screenshot of Result

完整代码：

import SwiftUI

struct SignIn: View {
    @State var email: String = ""

    var body: some View {
        VStack {
            Text("Sign In")
                .font(.largeTitle)
            Form {
                Section {
                    HStack(alignment: .lastTextBaseline) {
                        Text("ID")
                        TextField("Email", text: $email)
                    }
                }
            }
        }
    }
}

struct SignIn_Previews: PreviewProvider {
    static var previews: some View {
        SignIn()
    }
}

Answer 2

一种解决方案是使用另一个TextField代替Text：

HStack {
    TextField("", text: .constant("ID"))
        .fixedSize()
        .disabled(true)
    TextField("Email", text: $email)
    Spacer()

}

虽然有点丑陋。

Answer 3

我遇到了同样的问题，答案比我想的要简单。我最终添加了修饰符.aspectRatio（.fit）并为我修复了它。

希望这会有所帮助！

在窗体的部分内对齐文本和文本字段

3 个答案: