在 UIViewRepresentable CollectionView (Wrapped UICollectionView) 中为 UICollectionViewCell 使用 SwiftUI 视图答案

【问题标题】：Using SwiftUI Views for UICollectionViewCell inside a UIViewRepresentable CollectionView (Wrapped UICollectionView)在 UIViewRepresentable CollectionView (Wrapped UICollectionView) 中为 UICollectionViewCell 使用 SwiftUI 视图
【发布时间】：2020-09-06 05:05:13
【问题描述】：

我必须用 UICollectionView 替换现有的 SwiftUI List 视图（因为应用程序设计已更新，新设计对于 SwiftUI 来说非常复杂，因此必须将其实现为自定义 UICollectionViewFlowLayout）

所以视图（现在将是（或一部分）UICollectionViewCell）已经在 SwiftUI 中实现，我不想在 Swift 中重新编写它们。该视图在编写布局代码方面很复杂，使用 SwiftUI 显然很容易。

我可以找到一些帮助来包装像 this one 这样的集合视图，但很少了解如何在 UICollectionViewCell 中托管现有的 swift ui 视图

任何帮助/建议/链接将不胜感激。

谢谢

【问题讨论】：

标签： uicollectionview swiftui uicollectionviewcell uihostingcontroller

【解决方案1】：

我确实做到了。但不确定这是否是正确的解决方案。如果有人有更好的解决方案，请添加您的答案。所以我创建了一个UICollectionViewCell 子类。

final class HostingCollectionViewCell: UICollectionViewCell {
    func host<Content: View>(_ hostingController: UIHostingController<Content>) {
        backgroundColor = .clear
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        hostingController.view.backgroundColor = .clear
        addSubview(hostingController.view)

        let constraints = [
            hostingController.view.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0),
            hostingController.view.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 0),
            hostingController.view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0),
            hostingController.view.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: 0),
        ]
        NSLayoutConstraint.activate(constraints)
    }
}

并像使用它一样..

func makeUIView(context: Context) -> UICollectionView {
     let collectionView = UICollectionView(
         frame: .zero,
         collectionViewLayout: MyCustomCollectionViewLayout()
     )
     collectionView.register(HostingCollectionViewCell.self, forCellWithReuseIdentifier: "HostingCell")

     let dataSource = UICollectionViewDiffableDataSource<Section, Member>(collectionView: collectionView) { collectionView, indexPath, member in
         let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HostingCell", for: indexPath) as? HostingCollectionViewCell
         for subview in cell?.contentView.subviews ?? [] {
             subview.removeFromSuperview()
         }

        let swiftUIView = SomeSwiftUIView()
            .onTapGesture {
                // Equivalent of didTapItemAt...
            }

        cell?.host(UIHostingController(rootView: firefighterView))
        return cell
    }

    context.coordinator.dataSource = dataSource
    collectionView.clipsToBounds = false
    collectionView.backgroundColor = .clear
    collectionView.showsVerticalScrollIndicator = false

    // Populated Datasource 

    return collectionView
}

此makeUIView 是struct SwiftUICollectionView: UIViewRepresentable 视图的一部分。

【讨论】：

我试过这个，我的 SwiftUI 视图中有一个按钮，当我点击按钮时似乎没有执行操作。知道为什么吗？可能是因为我们正在从宿主控制器中提取视图？
没关系，我通过将 hostingController.view 约束到单元格本身而不是内容视图来使其工作。这使我可以与 SwiftUI 视图中的按钮进行交互