CollectionView : UIViewRepresentable + NavigationView

Question

我使用SwiftUI，这是UIViewRepresentable。我用这种方式做了CollectionView。当我尝试的时候。在控制器中添加NavigationView，它可以工作，但不正确。当我滚动的时候，collectionView和navigationView之间的空间被释放了。

@State var data:[Int] = [1,2,3,4,5,6,7,8,9,0,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]

var didSelectItem: ((_ indexPath: IndexPath)->()) = {_ in }
var didSelectObject: ((_ boject: Recipe)->()) = {_ in }

func makeUIView(context: Context) -> UICollectionView {
    let layout = UICollectionViewFlowLayout()
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.dataSource = context.coordinator
    collectionView.delegate = context.coordinator
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "myCell")
    collectionView.backgroundColor = .clear
    collectionView.alwaysBounceVertical = true
    return collectionView
}

func updateUIView(_ uiView: UICollectionView, context: Context) {
    uiView.reloadData()
}

func makeCoordinator() -> Coordinator {
    return Coordinator(data: data)
}

class Coordinator: NSObject, UICollectionViewDelegate, UICollectionViewDataSource {

    var data: [Int]

    init(data: [Int]) {
        self.data = data
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "myCell", for: indexPath)
        let textLable = UILabel()
        textLable.text = String(data[indexPath.row])
        cell.addSubview(textLable)
        cell.backgroundColor = .red
        return cell
    }

    //something more

    private func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
    {
        print("User tapped on item \(indexPath.row)")
    }

}

这是带有NavigationView的代码表示集合视图：

VStack {
        NavigationView {
        HStack {
            MenuController()
        }.navigationBarTitle("Menu")
        }
    }

基本上，它应该工作得很好，但我做错了什么？

Answer 1

您必须调用.edgesIgnoringSafeArea(.top)，它将通过从您的collectionView中删除额外的空间来完成此任务。

下面是更改后的代码。

struct CollectionContainer: View {

    var body: some View {

        VStack {
            NavigationView {
            HStack {
                MenuController()
            }.navigationBarTitle("Menu")
                .edgesIgnoringSafeArea(.top) // Trick
            }
        }

    }

}

希望能对你有所帮助。