UICollectionViewCompositionalLayout 中的嵌套组答案

【问题标题】：Nested group in UICollectionViewCompositionalLayoutUICollectionViewCompositionalLayout 中的嵌套组
【发布时间】：2021-03-11 23:21:07
【问题描述】：

我正在努力使用 UICollectionViewCompositionalLayout 获得我想要的布局。下图是我正在尝试做的（以及我的分数宽度/高度计算，我只能根据我得到的结果假设它是不正确的。

Nested group with Leading Item - design

我为尝试生成上述内容而编写的代码如下：

                let leadingItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/4), heightDimension: .fractionalHeight(1))
                let nestedGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(3/4), heightDimension: .fractionalHeight(1))
                let nestedItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1/2))
                let outerGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(3/5))
                
                let leadingItem = NSCollectionLayoutItem(layoutSize: leadingItemSize)
                let nestedItem = NSCollectionLayoutItem(layoutSize: nestedItemSize)
                let nestedGroup = NSCollectionLayoutGroup.horizontal(layoutSize: nestedGroupSize, subitem: nestedItem, count: 3)
                
                
                let outerGroup = NSCollectionLayoutGroup.horizontal(layoutSize: outerGroupSize, subitems: [leadingItem, nestedGroup])
                let section = NSCollectionLayoutSection(group: outerGroup)
                
                return section

这会产生如下图所示的不良结果：

Nested group with Leading Item - Preview

谁能解释我做错了什么并帮助我弄清楚如何实现我想要做的事情？

谢谢。 :)

【问题讨论】：

标签： swift ios14 uicollectionviewcompositionallayout

【解决方案1】：

所以我设法通过添加一个包含两个水平组的垂直组来修复它。我不知道这是否是正确的方法，如果有人能够验证并解释为什么这是正确的，或者解释这样做的最佳方法是什么，我将不胜感激。我的结果代码如下：

let leadingItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/4), heightDimension: .fractionalHeight(1))
let nestedHorizontalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1/2))
let nestedHorizontalItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1))
let outerGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalWidth(3/5))
let nestedVerticalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(3/4), heightDimension: .fractionalHeight(1))

let leadingItem = NSCollectionLayoutItem(layoutSize: leadingItemSize)
leadingItem.contentInsets.trailing = 1
let nestedHorizontalItem = NSCollectionLayoutItem(layoutSize: nestedHorizontalItemSize)
let nestedHorizontalGroup = NSCollectionLayoutGroup.horizontal(layoutSize: nestedHorizontalGroupSize, subitem: nestedHorizontalItem, count: 3)
nestedHorizontalGroup.interItemSpacing = .fixed(1)

let nestedVerticalGroup =  NSCollectionLayoutGroup.vertical(layoutSize: nestedVerticalGroupSize, subitem: nestedHorizontalGroup, count: 2)
nestedVerticalGroup.interItemSpacing = .fixed(1)

let outerGroup = NSCollectionLayoutGroup.horizontal(layoutSize: outerGroupSize, subitems: [leadingItem, nestedVerticalGroup])
outerGroup.contentInsets = .init(top: 2, leading: 0, bottom: 2, trailing: 0)

let section = NSCollectionLayoutSection(group: outerGroup)
section.contentInsets = .init(top: 2, leading: 50, bottom: 16, trailing: 50)

return section

最终效果如下图：

Nested horizontal group in vertical group with leading item

【讨论】：