如何移除SwiftUI按钮文本周围的默认白色框？（Xcode 15）

问题描述 #

我正在使用Xcode 15（无法升级到更高版本）。顶部7个按钮是我想要的样式，给它们添加了buttonStyle(PlainButtonStyle())修饰符。但如果给带有controlSize修饰符的按钮加上这个样式，按钮尺寸就会变回默认值。

示例代码 #

Button("Primary") {
    
}
.padding(10)
.buttonStyle(PlainButtonStyle())
.foregroundColor(.white)
.background(Color("Primary"))
.font(.title3)
.cornerRadius(10)



Button("Large") {
    
}
.padding(10)
.background(Color("Primary"))
.font(.title3)
.controlSize(.large)
.cornerRadius(10)

解决方案 #

原因分析 #

PlainButtonStyle会完全覆盖系统默认的控件尺寸相关样式逻辑，导致controlSize设置被忽略，按钮回到默认尺寸。要同时保留自定义样式和controlSize的效果，需要替换或调整按钮样式的实现方式。

方案1：使用.borderless样式替代PlainButtonStyle #

.borderless样式同样会去除默认按钮的边框和高亮效果，但不会覆盖controlSize的设置，调整修饰符顺序即可实现需求：

// Primary按钮（保持自定义样式）
Button("Primary") {
    
}
.padding(10)
.buttonStyle(.borderless)
.foregroundColor(.white)
.background(Color("Primary"))
.font(.title3)
.cornerRadius(10)

// Large按钮（保留controlSize效果）
Button("Large") {
    
}
.controlSize(.large)
.buttonStyle(.borderless)
.padding(10)
.background(Color("Primary"))
.font(.title3)
.foregroundColor(.white)
.cornerRadius(10)

方案2：自定义ButtonStyle兼容controlSize #

如果需要完全自定义按压反馈效果，同时支持controlSize，可以创建自定义ButtonStyle：

struct CustomPlainButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.8 : 1.0) // 自定义按压透明度变化
            .scaleEffect(configuration.isPressed ? 0.98 : 1.0) // 可选：添加缩放反馈
    }
}

// 使用方式
Button("Primary") {
    
}
.padding(10)
.buttonStyle(CustomPlainButtonStyle())
.foregroundColor(.white)
.background(Color("Primary"))
.font(.title3)
.cornerRadius(10)

Button("Large") {
    
}
.controlSize(.large)
.buttonStyle(CustomPlainButtonStyle())
.padding(10)
.background(Color("Primary"))
.font(.title3)
.foregroundColor(.white)
.cornerRadius(10)

关键注意点 #

• 修饰符顺序很重要：确保controlSize在buttonStyle之前添加，系统会优先应用控件尺寸设置。
• 避免直接使用PlainButtonStyle搭配controlSize，二者在Xcode 15中存在样式覆盖冲突。

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