SwiftUI中嵌套ScrollView后List数据不显示问题排查

你遇到的问题核心是List本身是自带滚动功能的容器组件，当它嵌套在ScrollView中时，两者的布局逻辑会产生冲突：ScrollView没有固定高度约束，而List默认会尝试自适应父容器高度，最终导致List的高度被压缩为0，因此内容完全不显示。

解决方案1：移除嵌套（推荐） #

List本身支持滚动，无论条目数量多少都能正常滚动，完全不需要额外嵌套ScrollView。修改后的代码如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(1..<10) { i in
                    Text("\(i) SomeItem")
                }
            }
            .navigationTitle("ScrollViewTest")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解决方案2：若必须嵌套（需添加高度约束） #

如果你的场景中List只是ScrollView内的一部分（比如上方还有其他静态内容），需要给List设置明确的高度约束，确保它能正常渲染内容：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView() {
                VStack(alignment: .leading) {
                    // 示例：ScrollView内的其他静态内容
                    Text("ScrollView中的其他内容")
                        .font(.title)
                        .padding()
                    
                    // 给List指定固定高度
                    List {
                        ForEach(1..<10) { i in
                            Text("\(i) SomeItem")
                        }
                    }
                    .frame(height: 300)
                }
            }
            .navigationTitle("ScrollViewTest")
        }
    }
}

如果想让List根据内容自适应高度（仅适合内容较少的场景），可以使用fixedSize：

List {
    ForEach(1..<10) { i in
        Text("\(i) SomeItem")
    }
}
.fixedSize(horizontal: false, vertical: true)

内容的提问来源于stack exchange，提问作者Rob The Ranger