SwiftUI中为Button设置带圆角边框的正确方法

我用以下SwiftUI代码实现了谷歌登录按钮：

private var googleButton: some View {
    Button {
        // Empty
    } label: {
        HStack(alignment: .firstTextBaseline) {
            Image(systemName: "globe")
            Text("Continue with Google")
                .font(.headline)
                .frame(height: 35)
        }
        .foregroundColor(.black)
        .frame(maxWidth: .infinity)
    }
    .tint(.white)
    .buttonStyle(.borderedProminent)
    .controlSize(.regular)
}

当前生成的按钮为白色背景、黑色文字与图标，宽度占满父容器。我尝试用.border等方法为按钮添加带合适圆角的边框时出现报错，请问正确实现方式是什么？

解决方案 #

问题出在你使用了系统的.borderedProminent按钮样式，这个样式会完全接管按钮的外观渲染逻辑，直接叠加.border会导致样式冲突报错。你可以通过以下两种方式实现需求：

方式一：完全自定义按钮外观（推荐）

去掉系统的borderedProminent样式，手动实现背景、圆角和边框，避免样式冲突：

private var googleButton: some View {
    Button {
        // 点击逻辑
    } label: {
        HStack(alignment: .center, spacing: 8) {
            Image(systemName: "globe")
            Text("Continue with Google")
                .font(.headline)
        }
        .foregroundColor(.black)
        .frame(maxWidth: .infinity, minHeight: 35)
        .padding(.vertical, 8) // 调整内边距让按钮更饱满
    }
    .background(Color.white)
    .cornerRadius(8) // 设置圆角大小，可根据需求调整
    .overlay(
        RoundedRectangle(cornerRadius: 8)
            .stroke(Color.gray, lineWidth: 1) // 边框颜色和宽度
    )
}

方式二：保留系统按钮样式，自定义扩展

如果想保留borderedProminent自带的交互反馈效果，可以自定义ButtonStyle来扩展：

// 自定义带边框的突出按钮样式
struct BorderedProminentWithBorder: ButtonStyle {
    let borderColor: Color
    let cornerRadius: CGFloat
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.black)
            .frame(maxWidth: .infinity)
            .tint(.white)
            .buttonStyle(.borderedProminent)
            .controlSize(.regular)
            .overlay(
                RoundedRectangle(cornerRadius: cornerRadius)
                    .stroke(borderColor, lineWidth: 1)
            )
    }
}

// 使用自定义样式的按钮
private var googleButton: some View {
    Button {
        // 点击逻辑
    } label: {
        HStack(alignment: .firstTextBaseline) {
            Image(systemName: "globe")
            Text("Continue with Google")
                .font(.headline)
                .frame(height: 35)
        }
    }
    .buttonStyle(BorderedProminentWithBorder(borderColor: .gray, cornerRadius: 8))
}

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