在private func cardView中为每个形状使用.clipped().

@ViewBuilder
private func cardView(for cardShape: CardViewShape, in geometry: GeometryProxy) -> some View {
    switch (cardShape) {
    case .circle:
        let width = min(geometry.size.width, geometry.size.height/CGFloat(elementsNum)) - 10
        Circle()
            .fill(mode: fillingMethod, color: color)
            .frame(maxWidth: width)
    case .rectangle:
        let width = geometry.size.width * 0.65
        let height = geometry.size.height / 5
        Rectangle()
            .fill(mode: fillingMethod, color: color)
            .frame(width: width, height: height)
            .clipped()                                 <--- add here
    case .diamond:
        Diamond()
            .fill(mode: fillingMethod, color: color)
    }
}

字符串

在.background(Color.green)之后添加.clipped()，例如：

var body: some View {
    GeometryReader { geometry in
        VStack(alignment: .center, spacing: 5) {
            Spacer()
            ForEach(1..<elementsNum+1, id:\.self) {index in
                cardView(for: cardShape, in: geometry)
            }
            Spacer()
        }
        .frame(width: geometry.size.width)
        .border(Color.orange, width: 5)
        .background(Color.green)
        .clipped()  // <--- here
    }
    .aspectRatio(2/3, contentMode: .fit)
}

字符串

这是因为牌的顶部和底部与显示器顶部和底部的安全区域接触。当您使用圆括号应用背景色时，如下所示：

.background(Color.green)

字符串
.然后它默认忽略安全区域-参见background(_:ignoresSafeAreaEdges:)。这就是颜色渗入安全区域的原因。

修复：

• 或者，你可以提供一个空集作为参数ignoresSafeAreaEdges：

.background(Color.green, ignoresSafeAreaEdges: [])

型

• 或者，你可以简单地使用背景修饰符，它接受一个ViewBuilder作为参数，通常作为一个尾随闭包（带花括号）提供：

.background { Color.green }

型