UICollectionViewListCell中UIStepper与disclosure indicator重叠及正确添加方式

问题根源是两个附属视图均使用默认的.trailing()布局，且未为自定义视图预留固有宽度，导致布局空间冲突。以下是两种正确的实现方式：

方式一：为自定义视图预留固有宽度 #

通过为UIStepper的附属视图设置reservedLayoutWidth: .intrinsic，让系统自动预留其固有宽度，避免与右侧的disclosure indicator重叠。同时调整数组顺序，让disclosure indicator位于最右侧：

cell.accessories = [
    .customView(configuration: .init(
        customView: UIStepper(),
        placement: .trailing(reservedLayoutWidth: .intrinsic)
    )),
    .disclosureIndicator()
]

方式二：保留原有顺序并设置预留宽度 #

如果希望disclosure indicator在UIStepper左侧，只需在自定义视图的placement中添加宽度预留即可：

cell.accessories = [
    .disclosureIndicator(),
    .customView(configuration: .init(
        customView: UIStepper(),
        placement: .trailing(reservedLayoutWidth: .intrinsic)
    ))
]

优化建议：添加单元格内容配置 #

为单元格设置内容配置，让整体布局更规范，避免因无内容导致的布局挤压：

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Int> { (cell, indexPath, identifier) in
    // 添加内容配置
    var content = UIListContentConfiguration.valueCell()
    content.text = "选项 \(identifier)"
    cell.contentConfiguration = content
    
    // 设置不重叠的附属视图
    cell.accessories = [
        .customView(configuration: .init(
            customView: UIStepper(),
            placement: .trailing(reservedLayoutWidth: .intrinsic)
        )),
        .disclosureIndicator()
    ]
}

修改后的完整可运行代码 #

class GridViewController: UIViewController {

    enum Section {
        case main
    }

    var dataSource: UICollectionViewDiffableDataSource<Section, Int>! = nil
    var collectionView: UICollectionView! = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = "VC"
        configureHierarchy()
        configureDataSource()
    }
}

extension GridViewController {
    private func createLayout() -> UICollectionViewLayout {
        let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        return UICollectionViewCompositionalLayout.list(using: config)
    }
}

extension GridViewController {
    private func configureHierarchy() {
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout())
        collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        collectionView.backgroundColor = .black
        view.addSubview(collectionView)
    }
    private func configureDataSource() {
        
        let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Int> { (cell, indexPath, identifier) in
            // 添加内容配置
            var content = UIListContentConfiguration.valueCell()
            content.text = "选项 \(identifier)"
            content.textColor = .white // 适配黑色背景
            cell.contentConfiguration = content
            
            // 设置不重叠的附属视图
            cell.accessories = [
                .customView(configuration: .init(
                    customView: UIStepper(),
                    placement: .trailing(reservedLayoutWidth: .intrinsic)
                )),
                .disclosureIndicator()
            ]
        }
        
        dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) {
            (collectionView: UICollectionView, indexPath: IndexPath, identifier: Int) -> UICollectionViewCell? in
            return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)
        }

        var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()
        snapshot.appendSections([.main])
        snapshot.appendItems([1])
        dataSource.apply(snapshot, animatingDifferences: false)
    }
}

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