SwiftUI列表项内ScrollView滚动时内容消失的问题及解决

问题场景 #

在SwiftUI开发中，如果你在List的列表项内部嵌入了横向ScrollView，滚动列表时会遇到一个棘手的问题：ScrollView里的内容会突然消失。但如果把ScrollView替换成普通的HStack，这个异常就完全不会出现。

问题根源 #

这个问题本质是List的可复用单元格机制与ScrollView的状态管理冲突导致的。List为了优化性能会复用单元格，而ScrollView的滚动状态没有和单元格的生命周期正确绑定，当单元格被复用时，ScrollView的内容无法正确重新渲染，最终就出现了内容消失的情况。

解决方案 #

参考@Asperi提供的修复方案，我们只需要给横向ScrollView添加一个动态的唯一ID，强制SwiftUI将每个列表项里的ScrollView视为独立的视图实例，避免复用带来的状态混乱。具体就是给ScrollView加上.id(UUID().uuidString)修饰符。

完整代码示例 #

struct ContentView: View { 
    var body: some View { 
        List { 
            ForEach(0...100, id: \.self) { _ in 
                ItemView().padding() 
            } 
        } 
    } 
}

struct ItemView: View { 
    var body: some View { 
        VStack(alignment: .leading) { 
            Text("Tag list:")
            ScrollView(.horizontal, showsIndicators: false) { 
                HStack { 
                    ForEach(0...8, id: \.self) { _ in 
                        TagView1() 
                    } 
                } 
            }.id(UUID().uuidString) /// <- 关键修复代码
        } 
    } 
}

struct TagView1: View { 
    var body: some View { 
        Text("Tag\(String(UUID().uuidString.prefix(5)))") 
            .foregroundColor(.secondary) 
            .padding(.horizontal, 2) 
            .background(RoundedRectangle(cornerRadius: 4).stroke(Color.secondary.opacity(0.5))) 
            .padding(1) 
    } 
}

原理说明 #

通过给每个ScrollView分配一个随机生成的UUID作为唯一标识，SwiftUI会将每个列表项内的ScrollView判定为完全独立的视图，不会在单元格复用时复用ScrollView的状态，从而确保ScrollView内的内容始终能正确渲染显示。

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