CollectionView : UIViewRepresentable + NavigationView

Question

I use SwiftUI and this is UIViewRepresentable. I did CollectionView by this way. When I try to. add NavigationView in the controller, it works, but incorrect. When I scroll, the space between the collectionView and the navigationView is freed up.

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

}

this is code represent collection view with NavigationView:

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

Basically, it should work good, but what did I do wrong?

Answer 1

You have to call .edgesIgnoringSafeArea(.top) and it will do the trick by removing extra space from your collectionView.

Below is your code looks like after the change.

struct CollectionContainer: View {

    var body: some View {

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

    }

}

Hope it will help you.