Ios Swift UI中具有圆角半径的按钮边框

我试图为按钮设置圆形边框，但按钮边框不正确

代码：

输出：

正如你所看到的，拐角处的边界被切断了

---

有什么建议我做错了什么吗？

试着这样做：不要为按钮设置拐角半径，而是为内部视图使用覆盖：

    Button(action: {
        print("sign up bin tapped")
    }) {
        Text("SIGN UP")
            .frame(minWidth: 0, maxWidth: .infinity)
            .font(.system(size: 18))
            .padding()
            .foregroundColor(.white)
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.white, lineWidth: 2)
        )
    }

对我有用。如果有帮助，请告诉我

您可以尝试以下方法：

var body: some View {
        ZStack {
            Color.green
            .edgesIgnoringSafeArea(.all)

            HStack {
            Button(action: {
                    print("sign up bin tapped")
            }){
                HStack {
                    Text("SIGN UP")
                        .font(.system(size: 18))
                    }
                .frame(minWidth: 0, maxWidth: 300)
                .padding()
                .foregroundColor(.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(Color.white, lineWidth: 2)
                )

                }
            }
        }
    }

我也没有将maxWidth设置为.infinity，因为这意味着该按钮将填充容器视图的宽度

结果将是：

希望有帮助：）

Xcode 11.4.1

                            Button(action: self.action) {
                                Text("Button Name")
                                    .font(.system(size: 15))
                                    .fontWeight(.bold)
                                    .foregroundColor(.white)
                                    .padding(10)
                                    .background(Color.darkGray)
                                    .cornerRadius(10)
                            }
                            .buttonStyle(PlainButtonStyle())

不需要添加覆盖层。可以用框架修改器替换填充修改器。该操作是主体变量之外的非返回方法

特别针对@MinonWeerasinghe的权利：

Button(action: self.action) {
            Text("Button Name")
                .font(.system(size: 15))
                .fontWeight(.bold)
                .foregroundColor(.black)
                .padding(10)
                .background(RoundedRectangle(cornerRadius: 10).stroke().foregroundColor(Color.red))
                .cornerRadius(10)
        }
        .buttonStyle(PlainButtonStyle())

为Swift 5和iOS 13.4+更新了新闻状态！ 没有一个示例适用于具有深色和白色背景颜色的按钮，也没有一个按钮具有按键状态更新，因此我构建了这个

LargeButton

视图，您可以在下面看到。希望这有帮助，应该是相当简单的使用

示例照片

示例使用 代码

---

Swift 5和iOS 14–按下边框时也会做出反应

struct PrimaryButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(5)
            .foregroundColor(configuration.isPressed ? Color.red.opacity(0.5) : .red)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(configuration.isPressed ? Color.red.opacity(0.5) : .red, lineWidth: 1.5)
            )
     }
}

如何使用

Button("Hide") {
    print("tapped")
}.buttonStyle(PrimaryButtonStyle())

这对我有用

---

想知道如何添加带有颜色渐变和角半径的按钮边框 下面是如何

按钮（操作：{self.isCreateAccountTapped=true}，标签：{Text（“创建帐户”）
.foregroundColor（颜色（“TextThemeColor36”））}
)
.框架（高度：44）
.框架（宽度：166）
.背景（颜色.清晰）
.转弯半径（8）
.叠加（圆角半径：10）
.stroke（线性渐变（渐变：渐变（颜色：[颜色（“BtnGradientClr1”）、颜色（“BtnGradientClr2”）、颜色（“BtnGradientClr3”））、起点：。前导，终点：。尾随）

添加第三个参数：

.border(Color.white, width: 2, cornerRadius: 25)

---

使用此简单的扩展名：

extension View {
    func border(_ color: Color, width: CGFloat, cornerRadius: CGFloat) -> some View {
        overlay(RoundedRectangle(cornerRadius: cornerRadius).stroke(color, lineWidth: width))
    }
}

iOS 15更新

按钮

s现在使用

.bordered

修改器烘焙了边框样式支持。我建议使用苹果为这些按钮提供的圆角半径，以获得最佳的平台特定造型。我们可以更改颜色，使其与按钮的系统样式一致，并使用

.tint

修改器对背景和文本进行着色：

Button("Add") { ... }
.buttonStyle(.bordered)
.tint(.green)

您可以使用

使着色颜色更加突出（粗体），使用
控制突出度
并使用
控制大小
：

Button("food") { ... }
.tint(.red)
.buttonStyle(.bordered)
.controlSize(.small) // .large, .medium or .small
.controlProminence(.increased)


您还可以在
按钮
s的父级
视图
s上使用此修改器，并在子级
按钮
s中使用
.accentColor
切换较亮的配色方案：

ScrollView {
    LazyVStack {
        Button("Test Button 1") { ... }
        .controlProminence(.increased)
        .keyboardShortcut(.defaultAction) // Tapping `Return` key actions this button

        Button("Test Button 2") { ... }
        .tint(.accentColor)
    }
}
.buttonStyle(.bordered)
.controlSize(.large)


注
不过，不要在任何地方都使用增加的突出按钮！好的是，这提供了跨平台的标准平台样式。此外，
按钮
动态响应暗模式，其大小也随动态类型而变化。
您可以尝试以下作为参考：）当我使用您的代码时，按钮内的文本被隐藏。我不确定，但：是因为我将字体设置为绿色，而您的背景为绿色吗？@Mahendra我用正确的颜色编辑了我的答案。如果我们将背景颜色添加到此按钮，则将显示一个角不圆的矩形。如果添加背景颜色，则不起作用。同时应用
。cornerRadius（6）
和
.overlay（圆角半径：6））
效果很好！谢谢漂亮的纽扣！边界在哪里？这个问题与添加边界有关，但在这个解决方案中没有这样做的代码。@MinonWeerasinghe根据您的评论回答更新
extension View {
    func border(_ color: Color, width: CGFloat, cornerRadius: CGFloat) -> some View {
        overlay(RoundedRectangle(cornerRadius: cornerRadius).stroke(color, lineWidth: width))
    }
}

Button("Add") { ... }
.buttonStyle(.bordered)
.tint(.green)

Button("food") { ... }
.tint(.red)
.buttonStyle(.bordered)
.controlSize(.small) // .large, .medium or .small
.controlProminence(.increased)

ScrollView {
    LazyVStack {
        Button("Test Button 1") { ... }
        .controlProminence(.increased)
        .keyboardShortcut(.defaultAction) // Tapping `Return` key actions this button

        Button("Test Button 2") { ... }
        .tint(.accentColor)
    }
}
.buttonStyle(.bordered)
.controlSize(.large)