SwiftUI中ScrollView内多个列表如何实现动态高度自适应

SwiftUI 原生List是内置了独立滚动能力的容器视图，当嵌套在外层ScrollView中时，由于自身没有设置明确的滚动边界，会被默认压缩至零尺寸，直接从视图层级中不可见。要实现和UITableView.automaticDimension一致的内容高度自适应效果，可根据实际需求选择以下两种方案：

方案一：无依赖快速实现（推荐用于绝大多数场景） #

如果不需要用到原生List自带的侧滑删除、编辑模式、分隔线样式等专属能力，直接用VStack+ForEach替代嵌套的List即可。这种组合本身不携带独立滚动行为，会天然根据内部所有子内容的总高度自动撑高，完全不需要手动计算尺寸。
示例代码：

ScrollView(.vertical) {
    VStack(spacing: 16) {
        // 第一组动态内容
        VStack(alignment: .leading, spacing: 8) {
            Text("第一组数据").font(.headline)
            ForEach(firstDynamicItems) { item in
                DynamicItemRow(item: item)
                    .padding(.vertical, 4)
            }
        }
        
        // 第二组动态内容
        VStack(alignment: .leading, spacing: 8) {
            Text("第二组数据").font(.headline)
            ForEach(secondDynamicItems) { item in
                DynamicItemRow(item: item)
                    .padding(.vertical, 4)
            }
        }
    }
    .padding()
}

这种方案的滚动完全由外层ScrollView统一处理，没有嵌套滚动冲突，高度完全由内容自适应——不管内部子视图是固定高度、多行文本加载还是异步渲染的图片，系统都会自动匹配布局高度，和UIKit里开启UITableView.automaticDimension的视觉、交互效果完全一致，是开发中最常用的实现方式。

方案二：保留原生List能力的动态高度实现 #

如果需要用到List的内置功能（如cell复用、侧滑操作、编辑排序），就需要手动关闭List自身的滚动能力，再通过尺寸监听动态同步内容高度，实现和自动约束一致的效果。
第一步，先定义用来跨视图传递高度的偏好键：

struct ContentHeightPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

第二步，在视图中绑定动态高度，关闭List自带滚动：

@State private var firstListHeight: CGFloat = 0
@State private var secondListHeight: CGFloat = 0

ScrollView(.vertical) {
    VStack(spacing: 16) {
        // 第一组List
        List(firstDynamicItems) { item in
            DynamicItemRow(item: item)
                .listRowSeparator(.visible)
        }
        .listStyle(.plain)
        .scrollDisabled(true) // 关闭List自身的滚动
        .frame(height: firstListHeight)
        .background {
            GeometryReader { geo in
                // 监听当前内容实际高度
                Color.clear.preference(
                    key: ContentHeightPreferenceKey.self,
                    value: geo.size.height
                )
            }
        }
        .onPreferenceChange(ContentHeightPreferenceKey.self) { newHeight in
            firstListHeight = newHeight
        }

        // 第二组List逻辑完全一致
        List(secondDynamicItems) { item in
            DynamicItemRow(item: item)
                .listRowSeparator(.visible)
        }
        .listStyle(.plain)
        .scrollDisabled(true)
        .frame(height: secondListHeight)
        .background {
            GeometryReader { geo in
                Color.clear.preference(
                    key: ContentHeightPreferenceKey.self,
                    value: geo.size.height
                )
            }
        }
        .onPreferenceChange(ContentHeightPreferenceKey.self) { newHeight in
            secondListHeight = newHeight
        }
    }
    .padding()
}

这种实现下，不管动态数据怎么变化，List的frame高度都会自动匹配当前内容的总高度，完全不需要手动计算，可适配任意高度的自定义UI内容。

注意事项 #

• 只要是嵌套在外层滚动容器中的List，必须关闭自身的滚动能力，否则会出现手势冲突、高度计算失效的问题；iOS 16以下版本如果没有scrollDisabled API，可通过封装UIViewRepresentable拿到List背后的UIScrollView实例，手动关闭其滚动属性
• 如果单组列表的数据量超过千级规模，优先使用方案二，List的cell复用机制能避免一次性渲染所有内容带来的内存和性能损耗；小数据量场景优先选方案一，实现成本更低
• 不要对上述嵌套容器设置任何固定高度约束，否则会打断自适应高度的计算逻辑

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