如何在Button边缘上制作cornerRadius，以便在swiftUI中不修剪边缘

Question

我正在尝试SwiftUI。我不知道如何获取带有borderWidth的圆形按钮。下面是我尝试过的代码。

这是我的代码

struct ArrowButton : View {
    var body: some View {
        return Button(action: {}) {
            HStack {
                Text("SEE ALL")
                    .font(.headline)
                    .color(Color.init(red: 0.627, green: 0.776, blue: 0.965))
                Image(systemName: "arrow.right")
                    .font(Font.title.weight(.bold))
            }
        }
            .padding(.all, 9.0)
            .border(Color.init(red: 0.627, green: 0.776, blue: 0.965))
            .cornerRadius(5.0)
    }
}

这就是我的看法

我应该使用哪些修饰符

1. 增加边框宽度吗？
2. 要消除以下所示的剪裁效果吗？

Answer 1

指定边框的宽度和角半径：

.border(Color.init(red: 0.627, green: 0.776, blue: 0.965),
        width: 6.0,
        cornerRadius: 12.0))

例如此代码：

struct ContentView : View {
    var body: some View {
        return Button(action: {}) {
            HStack {
                Text("SEE ALL")
                    .font(.headline)
                    .color(Color.init(red: 0.627, green: 0.776, blue: 0.965))
                Image(systemName: "arrow.right")
                    .font(Font.title.weight(.bold))
            }
            }
            .padding(.all, 20.0)
            .border(Color.init(red: 0.627, green: 0.776, blue: 0.965),
                    width: 6.0,
                    cornerRadius: 40.0)
    }
}

此视图的结果：

Answer 2

View.border(:width:cornerRadius)方法在最终的Xcode 11版本中不可用，但是您可以通过应用cornerRadius和overlay修饰符来达到相同的结果：

Button(action: {}) {
    VStack {
        Image(systemName: "star.fill")
        Text("Hello world!")
    }
    .padding()
    .accentColor(Color(.systemRed))
    .background(Color(UIColor.systemRed.withAlphaComponent(0.4)))
    .cornerRadius(4.0)
    .overlay(
        RoundedRectangle(cornerRadius: 4).stroke(Color(.systemRed), lineWidth: 2)
    )
}

结果：

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