SwiftUI卡片背景色超出边框问题求助（CS193P学习中）

预览界面中，第三张卡片顶部、第九张卡片底部的绿色背景超出了橙色边框，以下是我的代码：

import SwiftUI

struct CardView: View {
    
    let cardShape: CardViewShape
    let color: Color
    let elementsNum: Int
    let fillingMethod: FillingMethod
    
    
    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)
        }
        .aspectRatio(2/3, contentMode: .fit)
    }
    
    @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)
        case .diamond:
            Diamond()
                .fill(mode: fillingMethod, color: color)
        }
    }
}

问题出在修饰符顺序和多余的frame设置：

1. 交换.background与.border的顺序：SwiftUI修饰符按应用顺序生效，先设置背景再添加边框，边框会自动约束背景的范围，避免背景溢出；反之先加边框再设背景，背景会延伸到边框外侧。
2. 移除.frame(width: geometry.size.width)：VStack在GeometryReader内部会自动填充父视图宽度，手动指定宽度可能导致布局计算偏差，引发溢出问题。

修改后的代码：

import SwiftUI

struct CardView: View {
    
    let cardShape: CardViewShape
    let color: Color
    let elementsNum: Int
    let fillingMethod: FillingMethod
    
    
    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()
            }
            .background(Color.green)  // 先设置背景
            .border(Color.orange, width: 5)  // 再添加边框，约束背景范围
        }
        .aspectRatio(2/3, contentMode: .fit)
    }
    
    @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)
        case .diamond:
            Diamond()
                .fill(mode: fillingMethod, color: color)
        }
    }
}

修改后，绿色背景会被橙色边框完全包裹，不再出现溢出情况。

内容的提问来源于stack exchange，提问作者Linm QianQian