SwiftUI中垂直ScrollView内嵌水平ScrollView重渲染问题求助

问题根源 #

1. 不稳定的视图标识：直接用循环索引作为ForEach的id，SwiftUI会在父视图重渲染时判定闭包内的水平ScrollView为新视图，触发无意义重建。
2. 未封装的子视图：水平ScrollView的内容直接嵌套在父视图闭包中，无法利用SwiftUI的视图缓存机制，每次父视图更新都会连带重建子视图。
3. 滚动状态未持久化：水平ScrollView每次重建都会重置滚动偏移，导致横向滚动位置丢失。
4. 动态颜色放大感知：Color.debug每次访问都会生成新颜色，让重渲染的视觉效果更明显。

解决方案 #

• 拆分独立子View：将水平ScrollView和单个条目封装成独立View，SwiftUI会自动缓存这些视图，仅当依赖数据变化时才重渲染。
• 使用稳定数据源标识：用遵循Identifiable的模型替代循环索引，给每个视图提供唯一且不变的标识。
• 子View自主管理状态：让水平ScrollView的滚动状态由自身内部维护，父视图重渲染不会干扰子视图状态。

修改后的代码示例 #

// 定义稳定的数据模型，提供唯一标识
struct Item: Identifiable {
    let id = UUID()
}

struct TestView: View {
    // 预生成静态数据，避免每次重渲染重新生成
    private let verticalItems = Array(repeating: Item(), count: 20)
    private let horizontalItems = Array(repeating: Item(), count: 20)
    
    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                ForEach(verticalItems) { _ in
                    HorizontalScrollView(items: horizontalItems)
                        .border(Color.blue)
                        .padding(.horizontal)
                }
            }
        }
    }
}

// 封装水平ScrollView为独立View
struct HorizontalScrollView: View {
    let items: [Item]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 0) {
                ForEach(items) { _ in
                    HorizontalItemView()
                }
            }
        }
    }
}

// 封装单个条目为独立View，预生成固定颜色避免重渲染时颜色变化（测试重渲染可替换为Color.debug）
struct HorizontalItemView: View {
    private let itemColor = Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1))
    
    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(itemColor)
    }
}

public extension ShapeStyle where Self == Color {
    static var debug: Color {
        Color(red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1))
    }
}

额外优化建议 #

• 若使用动态数据，确保模型的id稳定（如用UUID），避免用可能变化的属性作为标识。
• 如需精准控制滚动状态，可结合ScrollViewReader和@State变量手动保存/恢复滚动偏移，上述封装已能解决大部分场景的状态丢失问题。

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