如何设置 UICollectionViewCompositionalLayout 标头的样式以与其子列表 .insetGrouped 布局分开？

Question

我试图模仿我们在邮件应用程序中发现的外观，其中邮箱的组标题是可折叠的，并且其子列表的样式使用 .insetGrouped layoutOption。

我尝试使用 UICollectionLayoutListConfiguration(appearance: .sidebarPlain) 作为配置，但我没有找到一种方法来设置部分的 .insetGrouped 外观样式

邮件应用：

我最接近这个布局的是：

我正在使用下面的方法来配置我的 ViewController 中的 collectionView。

let mixedListLayout = 
    UICollectionViewCompositionalLayout { section, env -> NSCollectionLayoutSection? in
    
    let listConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)

    return NSCollectionLayoutSection.list(using: listConfig, layoutEnvironment: env)
}

collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: mixedListLayout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]       
collectionView.delegate = self

view.addSubview(collectionView)

对于单元格注册，我的方法是这样的：

let headerRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, SidebarItem> { (cell, _, item) in

    var contentConfiguration = UIListContentConfiguration.sidebarHeader()
    contentConfiguration.text = item.title
    cell.contentConfiguration = contentConfiguration
    let outlineDisclosureConfig = UICellAccessory.OutlineDisclosureOptions(style: .header)
    cell.accessories = [.outlineDisclosure(displayed: .always, options: outlineDisclosureConfig)]
}

let primaryRowRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, SidebarItem> { (cell, _, item) in

    var contentConfiguration = UIListContentConfiguration.sidebarCell()
    contentConfiguration.text = item.title
    contentConfiguration.image = item.image

    cell.contentConfiguration = contentConfiguration
    cell.indentationLevel = 0
    if let acessoryLabel = item.subtitle {
        cell.accessories = [.label(text: acessoryLabel)]
    }
    cell.accessories.append(.disclosureIndicator())
}

dataSource = UICollectionViewDiffableDataSource<SidebarSection, SidebarItem>(collectionView: collectionView) {
    (collectionView, indexPath, item) -> UICollectionViewCell in

    switch item.type {
    case .header:
        return collectionView.dequeueConfiguredReusableCell(using: headerRegistration, for: indexPath, item: item)
    case .primaryRow:
        return collectionView.dequeueConfiguredReusableCell(using: primaryRowRegistration, for: indexPath, item: item)
    }
}

Answer 1

在阅读了更多文档后，我通过在UICollectionLayoutListConfiguration 中将headerMode 设置为.firstItemInSection 解决了这个问题，所以我的mixedListLayout 如下所示：

let mixedListLayout = 
    UICollectionViewCompositionalLayout { section, env -> NSCollectionLayoutSection? in
    
    var listConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    
    listConfig.headerMode = section == 0 ? .none : .firstItemInSection // Using "first

    return NSCollectionLayoutSection.list(using: listConfig, layoutEnvironment: env)
}

Answer 2

我认为您应该将outline group 与disclosure group 结合使用