SwiftUI中ForEach用索引触发数组越界错误的求助

崩溃原因分析 #

1. 异步视图更新的竞态条件：切换过滤条件时，viewModel.topTransactions会被重新计算，但SwiftUI视图更新是异步的，视图可能仍持有旧的索引范围，而新数组长度已缩短，导致访问不存在的索引。
2. 索引遍历的固有缺陷：直接用indices遍历的方式完全依赖数组的当前状态，一旦数组在视图渲染前被修改，旧索引就会失效。
3. 元素标识的问题：你尝试的enumerated()方案中，id: \.element依赖元素的哈希值，当元素因过滤条件变化被替换时，SwiftUI可能复用旧视图，导致索引与当前数组不匹配。

解决方案 #

方案1：用Identifiable跟踪元素，同步索引 #

利用TopTransaction已实现Identifiable的特性，让ForEach基于元素的唯一ID跟踪生命周期，确保索引始终对应当前数组的位置：

@ViewBuilder
private func chartLegendView() -> some View {
    VStack {
        ForEach(Array(viewModel.topTransactions.prefix(analyticsTransactionsNumber).enumerated()), id: \.element.id) { index, transaction in
            // 用取模确保颜色索引不越界，适配颜色数组长度不足的情况
            let color = categoryColors[index % categoryColors.count]
            TopExpenseRow(topExpense: transaction, color: color)
        }
    }
}

这里id: \.element.id让SwiftUI能准确识别每个元素的变化，索引始终是当前数组的有效索引，不会出现旧索引残留的问题。

方案2：ViewModel层提前配对元素与颜色 #

把索引逻辑移到ViewModel，直接生成包含颜色的配对数据，视图层无需处理索引，彻底消除越界风险：

// 在ViewModel中新增模型与计算属性
struct ColoredTopTransaction: Identifiable {
    let id = UUID()
    let transaction: TopTransaction
    let color: Color
}

var coloredTopTransactions: [ColoredTopTransaction] {
    topTransactions.prefix(analyticsTransactionsNumber).enumerated().map { index, transaction in
        let color = categoryColors[index % categoryColors.count]
        return ColoredTopTransaction(transaction: transaction, color: color)
    }
}

// 视图中简化调用
@ViewBuilder
private func chartLegendView() -> some View {
    VStack {
        ForEach(viewModel.coloredTopTransactions) { coloredItem in
            TopExpenseRow(topExpense: coloredItem.transaction, color: coloredItem.color)
        }
    }
}

这种方式更符合MVVM架构，视图只需要处理现成的业务数据，无需关心索引逻辑。

额外注意事项 #

• 主线程更新数据：确保topTransactions的赋值操作在主线程执行，SwiftData的查询结果如果在后台线程返回，要切换到主线程再更新@Published变量，避免异步更新导致的视图数据不一致。
• 颜色数组容错：用index % categoryColors.count替代直接使用index，即使数据项数量超过预定义的10种颜色，也能循环复用颜色，避免颜色数组越界。

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