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

垂直偏差

按钮内的 Text 可以做到这一点。尝试使用常量文本字段。

Button(action: onCountryButtonTapped, label: {
    TextField("NL", text: .constant("NL"))
    .fixedSize()
    .disabled(true)
    .foregroundColor(Color.purple)
})

尺寸差异

TextField 的占位符值大小不同。输入文本后，它看起来应该是一样的。

Answer 2

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

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

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

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

在我看来 Button 中有一个错误，尽管它没有正确地在按钮本身中宣传第一个文本基线。通过使 .firstTextBaseline-感知 Button "subclass" 可以在其他地方重复使用而不是在任何地方进行微调，这可能会更干净。

Answer 3

我将 alignment: .top 添加到 HStack。现在垂直对齐没问题了。

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

    var body: some View {
        HStack(alignment: .top) {
            Button(action: { print("haha") }, label: {
                Text("NL")
                    .foregroundColor(Color.purple)
            })

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

要了解发生这种情况的原因，您可以将 .border(Color.black) 添加到所有元素。你可以注意到 Text 有不同的高度。

或使用 TextField 而不是 Text 如下所示

        HStack {
            Button(action: { print("haha") }, label: {
                TextField("", text: .constant("NL"))
                    .fixedSize()
                    .foregroundColor(Color.purple)
            })

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

此问题是 Text 没有多个尺寸，因此 SwiftUI 无法对齐。您还可以将 .padding(.bottom, 1) 添加到 Text

        VStack {
            HStack {
                Button(action: { print("haha") }, label: {
                    Text("NL")
                        .foregroundColor(Color.purple)
                        .padding(.bottom, 1)
                })

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

VStack

如果你使用VStack对齐多个元素看我的解释

SwiftUI 垂直错位文本

SwiftUI vertically misaligned text

swift

vertical-alignment

swiftui

beta

垂直偏差

尺寸差异

更多信息

VStack