使用自定义单元格视图时，SwiftUI 列表渲染的单元格数量过多

Question

我正在尝试 SwiftUI，并注意到在列表中使用自定义视图时出现意外行为。这是简化的代码：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0..<1000, id: \.self) { index in
                let _ = print(index)
                Text("\(index)")        // On initial load ~18 cells are created
//                Cell(index: index)    // On initial load 1000 cells are created
            }
        }
    }
}

struct Cell: View {
    let index: Int
    var body: some View {
        Text("\(index)")
    }
}

#Preview {
    ContentView()
}

观察到的行为：

直接使用

Text("\(index)")

时，初始加载时仅创建大约 18 个单元格（正如预期的那样，由于 SwiftUI 列表的延迟渲染）。
当切换到自定义视图

Cell(index: index)

时，所有 1000 个单元格都会立即创建，这会显着影响性能。

问题：

为什么在列表中使用自定义视图会导致所有单元格急切地渲染，以及如何在仍然使用自定义视图的同时解决此问题？

Answer 1

注意，

NavigationView

已弃用，请改用

NavigationStack

。

List

默认是懒惰的，但是你的副作用

let _ = print(item)

负责显示所有

index

。 将其删除至

...fix this while still using the custom view?

要查看实际效果，请从循环中删除

print(item)

，然后 相反，将

.onAppear { print(index) }

添加到您的

Cell

。