创建一个跟随屏幕边缘的边框

Question

我正在尝试创建一个看起来像二十一点表的背景视图。 我想要一个带有棕色边框的绿色背景，它像卡片桌的边缘一样跟随屏幕边缘。 我试图实现这样的视图：

var body: some View {
        // Green background with a brown wood border
        ZStack {
            Color.green
                .ignoresSafeArea()
        }
        .overlay(
            RoundedRectangle(cornerRadius: 16)
                .strokeBorder(.brown, lineWidth: 10)
                .ignoresSafeArea()
        )
    }

代码生成此预览：

但是，这会在手机的轮廓上产生一个边框，并且边角的内部没有圆角，因此表格看起来像是溢出了视图。

我如何将视图重构为绿色背景，并在屏幕边缘周围有棕色边框？

Answer 1

您可以通过像这样在ZStack中的RoundedRectangle顶部添加带有cornerRadius的Color.brown来获得所需的结果。

ZStack {
    Color.brown
        .ignoresSafeArea()
    RoundedRectangle(cornerRadius: 40)
        .fill(Color.green)
        .padding()
        .ignoresSafeArea()
}

预习