如何用NSCollectionLayoutSection实现UICollectionView首个Item宽50px其余100px？

你之前的代码因所有Item使用统一布局尺寸、Group宽度固定，无法区分首Item与其他Item的宽度。要实现首Item宽度50px，其余Item宽度100px的需求，核心是通过动态生成不同尺寸的Collection View Item，结合NSCollectionLayoutGroup的自定义子项配置来实现。以下是完整可行代码：

步骤说明 #

• 创建两种布局尺寸的NSCollectionLayoutItem：一种对应首Item的50px宽度，另一种对应其余Item的100px宽度
• 使用NSCollectionLayoutGroup.horizontal(layoutSize:subitemsProvider:)方法，根据Item的位置索引动态返回对应尺寸的Item
• 配置Section的滚动行为和内边距，保持原有需求

完整代码实现 #

// 1. 定义两种Item布局尺寸
// 首Item布局：宽度50px，高度100px
let firstItemSize = NSCollectionLayoutSize(
    widthDimension: .absolute(50),
    heightDimension: .absolute(100)
)
let firstItem = NSCollectionLayoutItem(layoutSize: firstItemSize)
firstItem.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8)

// 普通Item布局：宽度100px，高度100px
let normalItemSize = NSCollectionLayoutSize(
    widthDimension: .absolute(100),
    heightDimension: .absolute(100)
)
let normalItem = NSCollectionLayoutItem(layoutSize: normalItemSize)
normalItem.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8)

// 2. 创建动态子项的水平Group
let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: NSCollectionLayoutSize(
        widthDimension: .estimated(100), // 用estimated适配动态宽度，让系统自动计算总宽度
        heightDimension: .absolute(100)
    ),
    subitemsProvider: { indexPath in
        // 根据当前Item的索引，返回对应布局的Item
        return indexPath.item == 0 ? [firstItem] : [normalItem]
    }
)

// 3. 配置Section
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
section.orthogonalScrollingBehavior = .continuous

关键细节说明 #

• subitemsProvider闭包是核心：它能根据每个Item的indexPath动态返回布局配置，精准区分首Item和其他Item的尺寸
• Group宽度设为.estimated(100)：因为我们的Item宽度是固定值，estimated模式会让系统自动计算Group的总宽度，完美适配横向滚动的需求
• 保留了你原有的内边距和横向滚动行为，无需额外调整其他配置

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