具有估计高度的 UICollectionViewCompositionalLayout 嵌套组

Posted 2023-02-23

【中文标题】具有估计高度的 UICollectionViewCompositionalLayout 嵌套组

【英文标题】：UICollectionViewCompositionalLayout nested groups with estimated height

【发布时间】：2021-02-11 16:01:38

【问题描述】：

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

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)

这给了我以下布局：

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

我不确定为什么布局最终使用高度 550 作为最终高度，这使得紫色单元格的内容变得很大。

所以最后我希望布局如下图所示：

【参考方案1】：

解决方案： 要进行的更改很微妙：

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

NSCollectionLayoutSection = "一个容器，它结合了一组 分组为不同的视觉分组。” UICollectionViewCompositionalLayout = "一个布局对象，让您 以高度自适应和灵活的视觉排列组合项目。”

2.将 NSCollectionLayoutSection 传递给 UICollectionViewCompositionalLayout

这些更改对我有用：

最终代码：

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

如果可行，请接受此作为答案。

【讨论】：

你没有做任何改变？我的compose 方法返回的部分正在由UICollectionViewCompositionalLayout 提供的sectionProvider 块中使用——因此我已经将UICollectionViewCompositionalLayout 返回到我的UICollectionView（集合视图甚至不接受一个部分作为布局） .您提到的事情不是问题的一部分；问题在于，所有三个单元格都应该与绿色单元格或右侧单元格组中的最大单元格一样高——紫色细胞。您提供的图像仍然存在相同的问题，并且无法修复

“所有三个单元格都应该与绿色单元格或右侧单元格组中最大的单元格一样高” - 分解您共享的代码的作用：水平 2 分割(2/3 & 1/3).... 1/3 部分垂直分成两半。我尝试了一个元组（204，“医院”，“Other2”），（205，“asdasd”，“eadsd”）......等等......我确保一个元组适合该部分。