如何在SwiftUI中实现背景透明、文字为黑色的Button

问题根源 #

SwiftUI 系统默认的按钮自带预设样式，会覆盖你直接添加的背景、文字颜色配置，所以你之前的修改不会生效。

解决方法 #

方案1：使用系统自带的Plain样式（最简单）

直接清除系统默认的按钮装饰样式，再自定义文字和背景色即可：

// iOS 15 及以上版本写法
Button(action: {}) {
    Text("Click me")
        .foregroundColor(.black) // 设置文字为黑色
}
.buttonStyle(.plain) // 移除系统默认按钮的背景、圆角等预设样式
.background(.clear) // 设置背景完全透明

// 适配 iOS 15 以下版本的写法
Button(action: {}) {
    Text("Click me")
        .foregroundColor(.black)
}
.buttonStyle(PlainButtonStyle())
.background(Color.clear)

提示：不需要同时给Text和Button重复添加透明背景配置，清除默认按钮样式后，仅给Button加一次透明背景即可生效。

方案2：自定义可复用的透明按钮样式

如果需要多处使用同风格的透明按钮，可以自定义ButtonStyle统一管理：

// 自定义透明按钮样式
struct TransparentBlackTextButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.black)
            .background(.clear)
            // 可选：添加按下反馈效果，不需要可以删除
            .opacity(configuration.isPressed ? 0.7 : 1)
    }
}

// 使用示例
Button(action: {}) {
    Text("Click me")
}
.buttonStyle(TransparentBlackTextButtonStyle())

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