0

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

具有领先项目的嵌套组 - 设计

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

                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

这会产生不希望的结果，如下图所示：

具有领先项目的嵌套组 - 预览

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

谢谢你。:)

4

1 回答 1

0

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

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

最终结果如下图所示：

垂直组中的嵌套水平组与前导项

于 2021-03-12T08:19:26.907 回答