I am trying to get the text in the above Button to centre. The format is controlled by a style sheet Struct - StatusBarEndText. Any ideas?
ToolbarItem(placement: .topBarTrailing) {
Button("ABCDEF") {
start.toggle()
}
.statusBarEndTextStyle()
}
struct StatusBarEndText: ViewModifier {
func body(content: Content) -> some View {
content
.frame(width: 72, height: 28, alignment: .center)
.multilineTextAlignment(.center)
.font(.body)
.lineLimit(1)
.foregroundColor(.white)
.background(start ? .gray .opacity(0.5) : .green)
.cornerRadius(8)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(.black, lineWidth: 1)
)
}
}
}
Try applying the modifier to the label of the button, instead of to the surrounding button:
ToolbarItem(placement: .topBarTrailing) {
Button {
start.toggle()
} label: {
Text("ABCDEF")
.statusBarEndTextStyle()
}
}
You might also like to consider letting the text find its own size, instead of setting a fixed width and height. To do this, replace the .frame
modifier with .fixedSize()
and then add some padding, as required:
content
// .frame(width: 72, height: 28, alignment: .center)
.fixedSize()
.padding(4)
// ... + other modifers, as before