更多信息

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 $0[.bottom] + 1.5 })

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

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

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

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对齐多个元素，请查看我的解释here

SwiftUI垂直未对齐的文本

3 个答案:

垂直未对准

大小差异

更多信息

VStack