iPad Pro第二代SwiftUI ScrollView滚动卡顿问题求助

针对你在iPad Pro 12.9英寸第二代上遇到的LazyVGrid滚动卡顿问题，结合SwiftUI在老设备上的渲染特性，给出以下实用优化方案：

1. 简化GridItem布局计算 #

原代码使用.flexible()的GridItem会让LazyVGrid每次布局都重新计算列宽，老设备上这种计算开销会被放大。改为固定尺寸的GridItem，配合提前计算的单元格尺寸，能大幅减少布局计算量：

struct ContentView: View {
    @State private var columnGridItems = [GridItem]()
    @State private var cellSize: CGFloat = 0
    @State var items = [Int]()
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columnGridItems, alignment: .center, spacing: 2) {
                ForEach(items, id: \.self) { i in
                    CellView(i: i)
                        .frame(width: cellSize, height: cellSize)
                }
            }
        }
        .background(.red)
        .onAppear {
            // 一次性生成数据
            items = Array(0..<100)
            // 获取屏幕宽度并计算单元格尺寸（减去3个列间距的宽度）
            let screenWidth = UIScreen.main.bounds.width
            cellSize = (screenWidth - 3*2) / 4
            // 生成固定尺寸的GridItem
            columnGridItems = Array(repeating: GridItem(.fixed(cellSize)), count: 4)
        }
    }
}

2. 优化CellView视图层级 #

原CellView使用ZStack嵌套布局，可改为用overlay替代，减少视图层级，降低渲染开销：

struct CellView: View {
    let i: Int
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .fill(.black)
            .padding(5)
            .overlay(
                Text("SOME TEXT")
                    .foregroundColor(.white)
            )
    }
}

3. 启用图层合并渲染 #

给CellView添加.drawingGroup()，将视图内容合并为单个CALayer渲染，减少老设备上的逐视图绘制操作：

CellView(i: i)
    .frame(width: cellSize, height: cellSize)
    .drawingGroup()

4. 避免不必要的布局刷新 #

原代码中GeometryReader会在父视图尺寸变化时触发body刷新，改用UIScreen.main.bounds直接获取屏幕尺寸（适合固定布局场景），或者用.preference机制获取父视图尺寸，减少不必要的布局计算。

额外提示 #

• 所有尺寸计算、数据生成逻辑尽量放在onAppear或其他生命周期方法中完成，避免在body闭包中执行计算操作。
• 老设备上SwiftUI的懒加载容器对动态布局的处理效率低于UIKit，固定尺寸的布局能最大化性能表现。

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