SwiftUI技术问题：如何让Button组件内的文本居中显示？

你尝试让Toolbar中的Button文本居中，但当前自定义ViewModifier未生效，核心原因是固定frame的设置没有让Button的文本填充可用空间，导致文本保持默认对齐方式。以下是两种可行的解决思路：

思路一：调整ViewModifier内的布局顺序 #

在StatusBarEndText中，先让Button内容填充整个可用空间并设置居中对齐，再指定固定尺寸，确保文本在设定的区域内居中：

struct StatusBarEndText: ViewModifier {
    // 补充缺失的start绑定，确保背景切换逻辑正常
    @Binding var start: Bool
    
    func body(content: Content) -> some View {
        content
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .frame(width: 72, height: 28)
            .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)
            )
    }
}

// 使用时传递start的绑定
ToolbarItem(placement: .topBarTrailing) {
    Button("ABCDEF") {
        start.toggle()
    }
    .modifier(StatusBarEndText(start: $start))
}

思路二：直接控制Button标签的对齐 #

如果需要更精准的文本控制，可在Button内部直接对文本设置居中，再应用样式Modifier：

ToolbarItem(placement: .topBarTrailing) {
    Button {
        start.toggle()
    } label: {
        Text("ABCDEF")
            .multilineTextAlignment(.center)
            .frame(maxWidth: .infinity)
    }
    .statusBarEndTextStyle()
}

注：原代码中StatusBarEndText未定义start变量，需补充@Binding或@State属性才能让背景颜色切换逻辑正常运行。

内容的提问来源于stack exchange，提问作者Edward Hasted