SwiftUI 垂直未对齐的文本

Question

我有一些垂直错位的文本，我不知道为什么......

编码：

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

预览：

框架检查员：

为什么文本垂直未对齐，我该如何解决？

Answer 1

发生这种情况是因为默认情况下您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感知Button“子类”，而不是在任何地方进行微调整，这可能会更清洁。