ScrollView嵌套两个UICollectionView，如何随第二个列表条目增加自动扩展滚动？

嘿，这个需求我之前做项目时刚好碰到过，其实核心就是让外层的ScrollView能跟着第二个UICollectionView的内容高度变化自动调整，同时实现滚动到底部加载更多的逻辑。下面给你一步步拆解具体怎么实现：

要达成目标，关键要做到两点：

1. 让第二个UICollectionView的高度随内容动态变化
2. 让外层ScrollView能实时感知这个高度变化，自动适配自身的可滚动范围

1. 配置第二个UICollectionView的布局 #

首先得让CollectionView能正确计算自身的内容高度，同时把滚动控制权交给外层ScrollView：

• 用UICollectionViewFlowLayout作为布局，如果你的cell是动态高度，设置estimatedItemSize为自动计算；如果是固定高度，直接指定itemSize
• 关闭CollectionView自身的滚动，避免和外层ScrollView冲突

// 初始化布局
let flowLayout = UICollectionViewFlowLayout()
// 动态高度cell用这个
flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
// 固定高度cell用这个（示例高度100）
// flowLayout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 100)

secondCollectionView.collectionViewLayout = flowLayout
// 关闭自身滚动
secondCollectionView.isScrollEnabled = false

2. 用AutoLayout绑定ScrollView与内部视图 #

外层ScrollView的约束要设置成能自动跟随内部视图高度变化的模式，推荐用ScrollView嵌套contentView的标准做法（把两个CollectionView都放在contentView上）：

• 给ScrollView添加到父视图的top/leading/trailing/bottom约束
• 给contentView添加和ScrollView的top/leading/trailing/bottom约束，同时设置contentView的宽度和父视图一致（避免横向滚动）
• 第一个CollectionView：绑定top/leading/trailing到contentView，设置固定高度（如果是动态高度也可以用同样的动态高度逻辑）
• 第二个CollectionView：绑定top到第一个CollectionView的bottom，leading/trailing到contentView，不设置固定高度，而是单独保存一个高度约束，后续动态更新

// 保存第二个CollectionView的高度约束，方便后续修改
var secondCollectionViewHeightConstraint: NSLayoutConstraint!

// 配置第二个CollectionView的约束
secondCollectionView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    secondCollectionView.topAnchor.constraint(equalTo: firstCollectionView.bottomAnchor, constant: 16),
    secondCollectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
    secondCollectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
])

// 创建并激活高度约束
secondCollectionViewHeightConstraint = secondCollectionView.heightAnchor.constraint(equalToConstant: 0)
secondCollectionViewHeightConstraint.isActive = true

// 最后绑定contentView的底部到第二个CollectionView的底部，让ScrollView感知内容高度
contentView.bottomAnchor.constraint(equalTo: secondCollectionView.bottomAnchor, constant: 16).isActive = true

3. 动态更新CollectionView高度 #

当你给第二个CollectionView添加新数据后，需要手动触发高度计算并更新约束：

func updateSecondCollectionViewHeight() {
    // 先让CollectionView完成布局，确保获取到正确的contentSize
    secondCollectionView.layoutIfNeeded()
    // 获取内容总高度
    let contentHeight = secondCollectionView.contentSize.height
    // 更新高度约束
    secondCollectionViewHeightConstraint.constant = contentHeight
    // 让ScrollView重新布局，更新可滚动范围
    scrollView.layoutIfNeeded()
}

每次添加新数据后，调用这个方法：

// 给数据源添加新内容
secondDataSource.append(contentsOf: newItems)
// 刷新CollectionView
secondCollectionView.reloadData()
// 更新高度，让ScrollView适配
updateSecondCollectionViewHeight()

4. 实现无限滚动逻辑 #

通过监听ScrollView的滚动事件，当用户滚动到接近底部时触发加载更多：

// 先定义一个标志位，防止重复触发加载
private var isLoadingMore = false

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // 计算当前滚动位置，当距离底部小于200pt时触发加载（阈值可以自己调整）
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        let scrollViewHeight = scrollView.bounds.height
        
        if offsetY > contentHeight - scrollViewHeight - 200 {
            guard !isLoadingMore else { return }
            isLoadingMore = true
            
            // 这里替换成你的实际加载逻辑（比如网络请求）
            DispatchQueue.global().asyncAfter(deadline: .now() + 1) {
                DispatchQueue.main.async {
                    // 模拟获取到新数据
                    let newData = self.fetchMoreData()
                    self.secondDataSource.append(contentsOf: newData)
                    self.secondCollectionView.reloadData()
                    self.updateSecondCollectionViewHeight()
                    self.isLoadingMore = false
                }
            }
        }
    }
}

别忘了在viewDidLoad里设置ScrollView的代理：

scrollView.delegate = self

注意事项 #

• 如果是动态高度cell，一定要确保cell内部的约束是完整的（从top到bottom有连续的约束链），否则系统无法正确计算cell高度
• 每次更新数据后必须调用layoutIfNeeded()，否则可能获取到旧的contentSize
• 加载更多的标志位isLoadingMore一定要加，避免用户快速滚动时重复发起请求

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