SwiftUI List滚动时结果显示不一致、ForEach计数不匹配报错如何解决？

报错原因 #

你现在使用的ForEach(0..<model.wins)这类写法，属于无显式ID的范围遍历，SwiftUI默认认为这种遍历的范围是固定常量，不会发生变化。但你列表中每个条目对应的wins、loses、draws数值都是动态变化的，列表滚动触发cell复用的时候，SwiftUI无法正确识别视图的差异，就会出现显示错乱，同时抛出计数不匹配的报错。

修复方案 #

只需要给DisplayMatchResultsIcons中的三个ForEach都添加显式的id参数，用遍历元素本身（即Int类型的索引）作为唯一标识即可，修改后的代码如下：

import SwiftUI
struct DisplayMatchResultsIcons {
    let model: ResultsModel
}

extension DisplayMatchResultsIcons: View {
    var body: some View {
        HStack (spacing: -1.0){
            // 添加id: \.self参数
            ForEach(0..<model.wins, id: \.self) {_ in
                Image(systemName: "w.square.fill")
                    .imageScale(.medium)
                    .foregroundColor(.green)
            }
            // 添加id: \.self参数
            ForEach(0..<model.loses, id: \.self) {_ in
                Image(systemName: "l.square.fill")
                    .imageScale(.medium)
                    .foregroundColor(.red)
            }
            // 添加id: \.self参数
            ForEach(0..<model.draws, id: \.self) {_ in
                Image(systemName: "d.square.fill")
                    .imageScale(.medium)
                    .foregroundColor(.yellow)
            }
        }
    }
}

原理说明 #

添加id: \.self后，SwiftUI会以遍历的每一个Int索引作为对应图标的唯一标识，当列表复用cell、对应数值变化时，系统可以正确计算视图差异，按需刷新图标内容，不会再出现显示错乱的问题。

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