带圆角和边框的 SwiftUI 视图

Question

            ZStack {
                VStack {
                    Text("some text")
                    Button("Ok") {}
                     .foregroundColor(.cyan)
                     .padding()
                }
                .padding()
            }
            .background(.red)
            .border(.blue, width: 5)
            .cornerRadius(20)

我希望整个视图都具有带圆角的蓝色边框（而不是红色方块与蓝色圆角边框重叠。如何？我已经尝试了各种排序修饰符的方法。

Answer 1

无论您应用什么圆角半径，SwiftUI 边框都有直边（.cornerRadius 只是将视图剪裁成圆形遮罩，不会调整边框的外观）。

如果您想要圆角边框，则需要叠加 .stroke 一个圆角矩形：

VStack {
    Text("some text")
    Button("Ok") {}
        .foregroundColor(.cyan)
        .padding()
}
.padding()
.background(.red)
.cornerRadius(20) /// make the background rounded
.overlay( /// apply a rounded border
    RoundedRectangle(cornerRadius: 20)
        .stroke(.blue, lineWidth: 5)
)

结果：

带圆角和边框的 SwiftUI 视图

SwiftUI view with rounded corners AND border

swift

swiftui

viewmodifier