SwiftUI 如何使文本在表单中居中？

Question

当 Text 在 Form 里面时，

.multilineTextAlignment(.center) 似乎没有效果，我如何让这个项目居中？

Form {
    Text("I am left aligned")
    Text("Why won't I center?").multilineTextAlignment(.center)
}

Answer 1

这有效。

Form {
    Text("I am left aligned")
    Text("I am centered!")
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
}

Answer 2

您可以将您的文字包装成 HStack:

Form {
    Text("I am left aligned")
    HStack {
        Spacer()
        Text("I am centered!")
        Spacer()
    }
}

Answer 3

如果您需要将多个项目居中放置在表单的中心，这里有一个接受符合视图的对象供您显示的结构：

struct CenterInForm<V: View>: View {

    var content: V

    init(_ content: V) { self.content = content }

    var body: some View {
        HStack {
            Spacer()
            content
            Spacer()
        }
    }
}

用法：

CenterInForm(Text("TOTAL: 0"))
CenterInForm(Button("Confirm order") { print("placing order") })

Answer 4

如果您在 HStack 中有两个元素（即 2 个文本）并且需要将第二个文本放在中间，一个小技巧是像第一个一样插入第三个隐藏元素。

HStack(alignment: .center) {
            Button(action: {
                print("later...")
            }) {
                Text("Later")
            }
            .font(font)
            Text("Centered Text")
                .foregroundColor(SwiftUI.Color(.white))
                .frame(minWidth: 0,
                       maxWidth: .infinity,
                       minHeight: 0,
                       maxHeight: .infinity,
                       alignment: .center)
            Button(action: {
                print("later...")
            }) {
                Text("Later")
            }
            .hidden()
        }

Answer 5

使用 frame 将文本的框架扩展到全宽，并使用 multilineTextAlignment 使文本（包括环绕的文本）居中。

Form {
    Text("Centered text, even if wraps")
        .frame(maxWidth: .infinity)
        .multilineTextAlignment(.center)
}

SwiftUI 如何使文本在表单中居中？

SwiftUI How to center Text in a Form?

swiftui

SwiftUI 如何使文本在表​​单中居中？

SwiftUI How to center Text in a Form?

swiftui

SwiftUI 如何使文本在表单中居中？