SwiftUI 垂直未对齐的文本

我有一些垂直未对齐的文本，我不知道为什么......

代码：

struct IBANInputView: View {
    @State var securityDigits = ""
    @State var bankCode = ""
    @State var accountNumber = ""

    var body: some View {
        HStack {
            Button(action: onCountryButtonTapped, label: {
                Text("NL")
                    .foregroundColor(Color.purple)
            })
            TextField("00", text: $securityDigits)
                .fixedSize()
            TextField("BANK", text: $bankCode)
                .fixedSize()
            TextField("0000 0000 00", text: $accountNumber)
        }
    }

    func onCountryButtonTapped() {
        print("LOL")
    }
}

Preview:

Frame inspector:

为什么文本垂直不对齐？如何修复？

发生这种情况是因为默认情况下您的HStack的垂直对齐方式是.center。我能够通过设置来实现你想要的HStack的垂直对齐方式为.firstTextBaseline然后稍微调整按钮的垂直对齐方式。

    HStack(alignment: .firstTextBaseline) {
        Button(action: { print("haha") }, label: {
            Text("NL")
                .foregroundColor(Color.purple)
        })
            .alignmentGuide(.firstTextBaseline, computeValue: { return $0[.bottom] + 1.5 })

        TextField("00", text: $securityDigits)
            .fixedSize()
        TextField("BANK", text: $bankCode)
            .fixedSize()
        TextField("0000 0000 00", text: $accountNumber)
    }

这里我说按钮的第一个文本基线是按钮的.bottom然后将基线稍微向上移动。您可能必须尝试不同的值，但我发现这对于您的用例来说在视觉上是最正确的。

在我看来有一个错误Button尽管它没有正确地宣传按钮本身的第一个文本基线。通过制作一个可能会更干净.firstTextBaseline-aware Button“子类”，您可以在其他地方重用，而不是到处进行微调。