在 UIViewRepresentable CollectionView (Wrapped UICollectionView) 中使用 UICollectionViewCell 的 SwiftUI 视图 [英] Using SwiftUI Views for UICollectionViewCell inside a UIViewRepresentable CollectionView (Wrapped UICollectionView)

问题描述

我必须用 UICollectionView 替换现有的 SwiftUI List 视图(因为应用程序设计已更新，并且 SwiftUI 的新设计非常复杂，因此它具有实现为自定义 UICollectionViewFlowLayout)

I have to replace an existing SwiftUI List of views with a UICollectionView(because the app designs were updated and the new designs are pretty complex for SwiftUI so it that had to be implemented as a custom UICollectionViewFlowLayout)

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

So the views(which now will be (or a part of)UICollectionViewCell) are already implemented in SwiftUI, and i didn't want to re-write them in Swift. The view are complex in terms of writing down the Layout Code, which apparently was pretty easy using SwiftUI.

我可以找到一些帮助来完成集合视图，例如 这个 但很少介绍如何在 UICollectionViewCell 中托管现有的 swift ui 视图

I could find some help wrapping up a collection view like this one but little on how to host an existing swift ui view inside a UICollectionViewCell

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

Any help/suggestions/links would be appreciated.

谢谢

推荐答案

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

I did get that working. But not sure if that's the correct solution. If anyone has a better solution please add your answer. So i created a UICollectionViewCell sub-class.

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 视图的一部分.

This makeUIView is part of the struct SwiftUICollectionView: UIViewRepresentable view.

这篇关于在 UIViewRepresentable CollectionView (Wrapped UICollectionView) 中使用 UICollectionViewCell 的 SwiftUI 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！