Swift：如何修改CompositionalLayout中Group的背景色

要实现WhatsApp那种仅Group区域的背景效果，不能直接用Section的背景配置，得用NSCollectionLayoutDecorationItem给单个Group添加专属背景，具体步骤如下：

1. 自定义Group背景装饰View #

先创建一个继承自UICollectionReusableView的装饰类，用来设置Group的背景样式：

class GroupBackgroundDecorationView: UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.systemGray6
        layer.cornerRadius = 8
        // 可按需添加阴影、边框等样式
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 在CompositionalLayout中配置Group的装饰项 #

在构建NSCollectionLayoutGroup时，添加对应的装饰Item，指定装饰View的kind：

// 先定义装饰Item
let groupBackgroundDecoration = NSCollectionLayoutDecorationItem.background(
    elementKind: "GroupBackground"
)
// 可设置内边距，让背景和Group内容之间留空隙
groupBackgroundDecoration.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)

// 构建Group（这里以垂直Group为例）
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(60))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(200))
let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])
// 将装饰Item添加到Group
group.decorationItems = [groupBackgroundDecoration]

// 构建Section并关联Group
let section = NSCollectionLayoutSection(group: group)
// 注意：这里不要再设置Section的backgroundColor，避免覆盖效果

3. 注册装饰View到CollectionView #

在viewDidLoad或初始化CollectionView的地方，注册自定义的装饰View：

collectionView.register(
    GroupBackgroundDecorationView.self,
    forDecorationViewOfKind: "GroupBackground"
)

这样设置后，每个Group就会有独立的背景区域，不会像Section背景那样覆盖整个Section的间距，和WhatsApp的效果一致。

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