具有估计高度的 UICollectionViewCompositionalLayout 嵌套组

问题描述

我目前定义了以下组合布局:

func compose() -> NSCollectionLayoutSection {

    let heroItemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(2/3),heightDimension: .estimated(550)
    )

    let heroItem = NSCollectionLayoutItem(layoutSize: heroItemSize)

    let sideKickItemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),heightDimension: .fractionalHeight(0.5)
    )

    let sideKickItem = NSCollectionLayoutItem(layoutSize: sideKickItemSize)

    let sideKickGroupSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1/3),heightDimension: .fractionalHeight(1.0)
    )

    let sideKickGroup = NSCollectionLayoutGroup.vertical(
        layoutSize: sideKickGroupSize,subitems: [sideKickItem,sideKickItem]
    )

    let topGroupSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1.0),heightDimension: .estimated(550)
    )

    let topGroup = NSCollectionLayoutGroup.horizontal(
        layoutSize: topGroupSize,subitems: [heroItem,sideKickGroup]
    )

    return NSCollectionLayoutSection(group: topGroup)
}

这给了我以下布局:

Current layout

理想情况是绿色单元格(heroItem)的估计高度应该是领先的。紫色单元格(sideKickItem)应该和绿色单元格一样高。

我不确定为什么布局最终使用高度 550 作为最终高度,这使得紫色单元格对于其内容来说太大了。

所以最后我希望布局像下图一样:

Requested layout

解决方法

解决办法: 要进行的更改很细微:

1.Function 必须返回 UICollectionViewLayout 而不是 NSCollectionLayoutSection

  • NSCollectionLayoutSection = "组合了一组 分成不同的视觉分组。”
  • UICollectionViewCompositionalLayout = "一个布局对象,让你 以高度适应性和灵活的视觉排列组合项目。”

2.将 NSCollectionLayoutSection 传递给 UICollectionViewCompositionalLayout

这些更改对我有用: Blog UICollectionView

最终代码:

//change 1
func compose() -> UICollectionViewLayout {
//change 2
let section = NSCollectionLayoutSection(group: topGroup)    
let layout = UICollectionViewCompositionalLayout(section: section)
return layout

如果可行,请接受此答案。