SwiftUI How to center Text in a Form? - swiftui

Question

.multilineTextAlignment(.center) seems to have no effect when the Text is inside Form, how can I center this item?
Form {
Text("I am left aligned")
Text("Why won't I center?").multilineTextAlignment(.center)
}

Answer 1

This works.
Form {
Text("I am left aligned")
Text("I am centered!")
.frame(maxWidth: .infinity, alignment: .center)
}

Answer 2

You can wrap your text into HStack:
Form {
Text("I am left aligned")
HStack {
Spacer()
Text("I am centered!")
Spacer()
}
}

Answer 3

Use frame to expand the text's frame to the full width and multilineTextAlignment to cause text (including wrapped text) to be centered.
Form {
Text("Centered text, even if wraps")
.frame(maxWidth: .infinity)
.multilineTextAlignment(.center)
}

Answer 4

In case you need to center several items in the center of forms, here's a struct that accepts an object conforming to view for you to display:
struct CenterInForm<V: View>: View {
var content: V
init(_ content: V) { self.content = content }
var body: some View {
HStack {
Spacer()
content
Spacer()
}
}
}
Usage:
CenterInForm(Text("TOTAL: $100"))
CenterInForm(Button("Confirm order") { print("placing order") })

Answer 5

If you have two elements (i.e. 2 Texts) inside a HStack and need to put the second Text in the center, a little trick is to insert a third hidden element like the first one.
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()
}