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

Question

我试图模仿我们在邮件应用程序中找到的外观，其中邮箱的组标题是可折叠的，并且它的子列表使用.insetGroupedlayoutOption 设置样式。

我试图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)
    }
}

标签： iosuikituicollectionviewcellsidebaruicollectionviewcompositionallayout

Answer 1

在对文档进行了更多阅读之后，我通过在中设置headerModeto解决了它.firstItemInSection，UICollectionLayoutListConfiguration所以我的混合列表布局看起来像这样：

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)
}