ios - 如何在按钮边缘上制作cornerRadius，以便在swiftUI中不剪裁边缘

Question

我正在尝试使用 SwiftUI。我不知道如何获得一个带有边框宽度的圆形按钮。下面是我尝试过的代码。

这是我的代码

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

这就是我的看法


我应该使用什么修饰符

增加边框宽度？

移除下图所示的剪裁效果？

Answer 1

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

结果: