SwiftUI如何管理动态行列视图？解决窗口调整时卡片排序错乱问题

• CardView的faceCode用@State修饰，作为父视图传入的参数不应该用@State，该属性会在首次赋值后不再跟随外部更新，导致卡片展示旧内容
• 动态范围的ForEach没有指定唯一标识，SwiftUI将范围识别为静态常量，行列数变化时视图复用逻辑混乱
• ContentView中承载所有行的VStack高度写死为100，未使用父容器实际高度，导致布局溢出或显示异常

1. 修改CardView的faceCode属性定义，去掉@State修饰：

// 修改前
@State var faceCode: String
// 修改后
let faceCode: String

2. 调整所有动态ForEach的写法，明确指定id并直接循环实际需要的范围，不需要循环全量再做判断过滤：
   首先是ContentView中的行循环：

// 修改前
ForEach(0 ..< cards.count) { row in
    if row < rows {
        RowView(cards: cards, width: w, height: cardHeight, start: row * cols, columns: cols)
            .frame(width: w, height: rowSpacing, alignment: .topLeading)
    }
}
// 修改后
ForEach(0 ..< rows, id: \.self) { row in
    RowView(cards: cards, width: w, height: cardHeight, start: row * cols, columns: cols)
        .frame(width: w, height: rowSpacing, alignment: .topLeading)
}

然后是RowView中的列循环：

// 修改前
ForEach(0 ..< cards.count) { index in
    if index < columns && start + index < cards.count {
        HStack(spacing: 0) {
            CardView(faceCode: cards[start + index])
                .frame(width: cardWidth, height: height)
        }
        .frame(width: cardSpacing, alignment: .leading)
    }
}
// 修改后
ForEach(0 ..< columns, id: \.self) { index in
    if start + index < cards.count {
        HStack(spacing: 0) {
            CardView(faceCode: cards[start + index])
                .frame(width: cardWidth, height: height)
        }
        .frame(width: cardSpacing, alignment: .leading)
    }
}

3. 修复ContentView中VStack的高度错误：

// 修改前
.frame(width: w, height: 100, alignment: .topLeading)
// 修改后
.frame(width: w, height: h, alignment: .topLeading)

如果后续需要支持卡片顺序、数量运行时变更，可以把卡片数据封装为遵守Identifiable协议的结构体，用卡片的唯一ID作为ForEach的标识，而非索引，避免增删卡片时的动画异常或者显示错乱。

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