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

Question

我正在尝试为按钮设置圆角边框，但按钮的边框不正确。

代码：

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

输出：

如您所见，拐角处的边框被切断。

任何建议我做错了什么？

Answer 1

像这样尝试：而不是将 cornerRadius 设置为 Button 使用内部视图的覆盖：

    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)
        )
    }

为我工作。如果有帮助，请告诉我！

Answer 2

.borderediOS 15+ 中的官方修改器支持

Button现在已经使用修饰符加入了边框样式支持.buttonStyle(.bordered)。我建议使用苹果为这些按钮提供的圆角半径，以获得最佳的特定于平台的样式。我们可以更改颜色以与按钮的系统样式一致，并使用.tint修改器对背景和文本进行着色：

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

您可以使用以下命令使色调颜色更加突出（更大胆）.borderedProminent并控制大小.controlSize：

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

您还可以在sView的父级上使用此修饰符，并在子级中Button使用切换较浅的配色方案：.accentColorButton

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

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

建议

由于某种原因，Apple 不喜欢单行边框按钮，这就是.border()Xcode 12 中不推荐使用该修饰符的原因。通过此更改，我建议开发人员避免创建单行边框按钮，因为它们现在在 Apple 的人机界面指南中不是首选。在任何地方使用突出的按钮也违反了 HIG。

_{额外注意：Apple 的.bordered风格提供了跨设备类型的标准平台风格。此外，Button动态响应黑暗模式并使用动态类型（本机辅助功能支持）缩放其大小。}

Answer 3

为 Swift 5 和 iOS 13.4+ 更新了新闻状态！

没有一个示例适用于具有深色和白色背景颜色的按钮，并且它们都没有按下状态更新，因此我构建了这个LargeButton视图，您可以在下面看到。希望这会有所帮助，使用起来应该非常简单！

示例照片

示例使用

// White button with green border.
LargeButton(title: "Invite a Friend", 
            backgroundColor: Color.white, 
            foregroundColor: Color.green) {
                        print("Hello World")
                    }

// Yellow button without a border
LargeButton(title: "Invite a Friend", 
            backgroundColor: Color.yellow) {
                        print("Hello World")
                    }

代码

struct LargeButtonStyle: ButtonStyle {
    
    let backgroundColor: Color
    let foregroundColor: Color
    let isDisabled: Bool
    
    func makeBody(configuration: Self.Configuration) -> some View {
        let currentForegroundColor = isDisabled || configuration.isPressed ? foregroundColor.opacity(0.3) : foregroundColor
        return configuration.label
            .padding()
            .foregroundColor(currentForegroundColor)
            .background(isDisabled || configuration.isPressed ? backgroundColor.opacity(0.3) : backgroundColor)
            // This is the key part, we are using both an overlay as well as cornerRadius
            .cornerRadius(6)
            .overlay(
                RoundedRectangle(cornerRadius: 6)
                    .stroke(currentForegroundColor, lineWidth: 1)
        )
            .padding([.top, .bottom], 10)
            .font(Font.system(size: 19, weight: .semibold))
    }
}

struct LargeButton: View {
    
    private static let buttonHorizontalMargins: CGFloat = 20
    
    var backgroundColor: Color
    var foregroundColor: Color
    
    private let title: String
    private let action: () -> Void
    
    // It would be nice to make this into a binding.
    private let disabled: Bool
    
    init(title: String,
         disabled: Bool = false,
         backgroundColor: Color = Color.green,
         foregroundColor: Color = Color.white,
         action: @escaping () -> Void) {
        self.backgroundColor = backgroundColor
        self.foregroundColor = foregroundColor
        self.title = title
        self.action = action
        self.disabled = disabled
    }
    
    var body: some View {
        HStack {
            Spacer(minLength: LargeButton.buttonHorizontalMargins)
            Button(action:self.action) {
                Text(self.title)
                    .frame(maxWidth:.infinity)
            }
            .buttonStyle(LargeButtonStyle(backgroundColor: backgroundColor,
                                          foregroundColor: foregroundColor,
                                          isDisabled: disabled))
                .disabled(self.disabled)
            Spacer(minLength: LargeButton.buttonHorizontalMargins)
        }
        .frame(maxWidth:.infinity)
    }
}

Answer 4

只需添加cornerRadius参数：

.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))
    }
}

Answer 5

iOS 15 或更高版本 您可以使用 Button 属性例如

       Button(action: {
            //define action
        }) {
            Image(systemName: "arrow.triangle.2.circlepath.circle.fill")
                .imageScale(.large)
            Text("Restart")
                .font(.system(.title2))
        }
        .buttonStyle(.borderedProminent)
        .buttonBorderShape(.capsule)
        .controlSize(.large)

        .buttonBorderShape(.roundedRectangle) //change bordershape see below

        .buttonBorderShape(.roundedRectangle(radius: 4)) // see below

类似地，您可以更改buttonSytle和controlSize

Answer 6

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())

Answer 7

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())

按下时边框也会反应