如何在SwiftUI中创建白色背景的轮廓按钮？

嘿，我来帮你搞定这个SwiftUI按钮的需求！想要一个带白色背景的轮廓样式按钮（也就是带边框、背景为白色的按钮），其实有几种灵活的实现方式，你可以根据自己的使用场景来选：

方法1：自定义ButtonStyle（推荐用于需要重复使用的场景） #

这种方式能让你完全掌控按钮的外观和交互效果，而且可以在整个项目里复用。我们来定义一个可配置的样式：

struct WhiteOutlineButtonStyle: ButtonStyle {
    // 可自定义边框和文字颜色
    let borderColor: Color
    let textColor: Color
    // 可选：自定义圆角大小
    let cornerRadius: CGFloat = 8
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .foregroundColor(textColor)
            // 背景色：按压时稍微变暗，模拟交互反馈
            .background(configuration.isPressed ? Color.white.opacity(0.9) : Color.white)
            .cornerRadius(cornerRadius)
            // 添加轮廓边框
            .overlay(
                RoundedRectangle(cornerRadius: cornerRadius)
                    .stroke(borderColor, lineWidth: 1)
            )
            // 按压时的缩放动画，增强交互感
            .scaleEffect(configuration.isPressed ? 0.97 : 1.0)
            .animation(.easeInOut(duration: 0.15), value: configuration.isPressed)
    }
}

// 使用示例
Button("提交表单") {
    // 这里写按钮的点击逻辑
    print("按钮被点击啦！")
}
.buttonStyle(WhiteOutlineButtonStyle(borderColor: .gray, textColor: .black))

这个自定义样式的好处是：你可以随时调整边框颜色、文字颜色、圆角大小，而且所有用这个样式的按钮都会保持一致的外观，后期维护也方便。

方法2：直接叠加修饰符（适合一次性快速实现） #

如果只是需要一个临时的按钮，不想自定义样式，直接用SwiftUI的修饰符叠加也能快速实现：

Button("取消") {
    // 点击逻辑
}
.padding(.horizontal, 20)
.padding(.vertical, 10)
.foregroundColor(.blue)
.background(Color.white)
.cornerRadius(6)
// 添加轮廓边框
.overlay(
    RoundedRectangle(cornerRadius: 6)
        .stroke(Color.blue, lineWidth: 1)
)
// 移除系统默认的按钮样式，避免冲突
.buttonStyle(PlainButtonStyle())

这种方式不用额外定义样式，直接写在按钮上就行，适合快速原型或者只出现一次的按钮。

小提示：适配不同状态 #

如果需要处理按钮的禁用状态，可以在样式里加上判断，比如：

// 在自定义ButtonStyle的makeBody里添加
.opacity(configuration.isEnabled ? 1.0 : 0.6)

这样禁用时按钮会变半透明，用户能直观感知到状态变化。

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