🎛 QGrid: The missing SwiftUI collection view.

This library looks awesome, but probably not going to use it without cocoapods support. For me, it's probably not worth using two dependency managers in the same project (especially with SPM being such a new technology).

I totally understand if you don't want to support multiple dependency managers, but if you did, you'd probably get more traction, usage, and PRs.

I am trying to use QGrid on my iOS 10+ app with no luck.

Compiling for iOS 10.0, but module 'QGrid' has a minimum deployment target of iOS 13.0

I would like to import it and use it conditionally just like import SwiftUI does. Any ideas?

Thank you

I have a 1 x 8 grid in portrait mode and 2x4 grid in landscape mode. I have a button in each view in the grid that toggles using @State I set button 1 and 2 on (it change color to green). I rotate the simulator to landscape mode. columns are displayed correctly (2 x 4 grid). but now, buttons 1 and 3 show the green button.

Looks like there's some recycling going on? Each gridview has the state internally.

struct GridCell: View { var person: Person

var body: some View { NavigationLink( destination: Text("") ) { VStack() { Image(person.imageName) .resizable() .scaledToFit() .clipShape(Circle()) .shadow(color: .primary, radius: 5) .padding([.top, .leading, .trailing], 7) Text(person.firstName).lineLimit(1) Text(person.lastName).lineLimit(1) } .font(.headline).foregroundColor(.white) } } }

Upon adding the Swift Package, I get the compile time error Use of unresolved identifier 'UIDevice'even when not using the package yet.

The line throwing the error is

private var cols: Int {
    UIDevice.current.orientation.isLandscape ? columnsInLandscape : columns
}

in QGrid.swift.

Target is macOS Catalina.

I have a use case where I need to have a parent scroll view with some other content and then I have a QGrid view that scrolls by itself How do I handle this case as the scrolling is not intuitive I would like to know if I could do something to resolve this

VStack{
                    ScrollView(.vertical , showsIndicators: false){
//                        VStack(alignment: .leading, spacing: 10) {
                            BannerView()
                            CategoryRow().environmentObject(self.latestViewModel)
                            ColorRow().environmentObject(self.latestViewModel)
                    }
                            if(latestViewModel.error.isEmpty){
                               QGrid(latestViewModel.wallpapers,columns: self.columns, vSpacing : 20.0, hSpacing: 5.0,
                                       hPadding: 10.0, endReached: {
                                        //print("End Reached")
                                        self.latestViewModel.getMoreWallpapers()
                                       }){wallpaper in
                                    self.getLatestTabItem(wallpaper: wallpaper)
                                }

Just a code snippet to demonstrate what I exactly want to do

When NavigationLink is embedded like this:

CollectionView(self.Containers.containers, columns: 3) { container in
	NavigationLink(destination: ContainerDetailView(container: container)) {
		ContainerCell(container: container)
		.environmentObject(self.Containers)
		.accentColor(.primary)
	}
}

tapping on it sometimes doesn't open NavigationLink destination. onTapGesture works always though.

There is also another issue: when NavigationLink destination is open, NavigationLink destination from navigationBarItems opens and closes instantly after opening.

If you embed the ZStack in a List as in the following:

var body: some View {
    GeometryReader { geometry in
        List {
            ZStack {
                self.backgroundGradient
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    if (QConstants.showDesigner) { self.designerView(geometry) }
                    self.gridView(geometry)
                }
            }
        }
    }
}

Then you get this in the simulator:

I have tried various experiments and the best I can come up with is to add a frame modifier as in:

var body: some View {
    GeometryReader { geometry in
        List {
            ZStack {
                self.backgroundGradient
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    if (QConstants.showDesigner) { self.designerView(geometry) }
                    self.gridView(geometry)
                    .frame(width: geometry.size.width,
                           height: geometry.size.height)
                }
            }
        }
    }
}

But this is still wrong because the grid is in the wrong place (see screenshot) and I can't work out how to fix it. Any ideas?

When using the GeometryReader inside of a cell, the grid is not rendered as expected. The cells are overlapping as shown in the image below.

struct DataPoint: Identifiable{
    var id = UUID()
    var name:String
}


struct ContentView: View {
    var data:Array<DataPoint> = [DataPoint(name: "A"), DataPoint(name: "B"), DataPoint(name: "C"), DataPoint(name: "D"), DataPoint(name: "E"), DataPoint(name: "F"), DataPoint(name: "G"), DataPoint(name: "H"), DataPoint(name: "J"), DataPoint(name: "K"), DataPoint(name: "L"), DataPoint(name: "M")]
    
    var body: some View {
        QGrid(data,
              columns: 3,
              columnsInLandscape: 4,
              vSpacing: 0,
              hSpacing: 0,
              vPadding: 0,
              hPadding: 0,
              content: {data in
                GeometryReader{g in
                    VStack{
                        Text(data.name)
                    }.frame(width:g.size.width, height: g.size.width).background(Color.yellow)
                }
        })
    }
}

Any suggestions how to make sure that every cell is squared, independent from the screen size?

I noticed that the QGrid only works well when not contained in a NavigationView.

It seems to not correctly respect the safe area and cuts off part of the UI that seem to have the hight of the navigation bar.

Here are some examples of what I mean:

As you can see part of the UI underneath the navigation bar is cut out. Also the lower part of the grid is cut out due to the home indicator.

NavigationView {
    QGrid(profiles, columns: 2) { profile in
        ProfileCardView(profile: profile)
    }
}

If I add the .edgesIgnoringSafeArea([.all]) to the grid, this is what happens:

NavigationView {
    QGrid(profiles, columns: 2) { profile in
        ProfileCardView(profile: profile)
    }
    .edgesIgnoringSafeArea(.all)
}

QGrid was failing to build on macOS because UIDevice is not available. This change makes macOS behave the same as tvOS, in that it does not support rotation.

On macOS 11.1, when a View is loaded for the first time, the size obtained by GeometryReader is incorrect, resulting in a negative frame value, causing this warning. The real size can only be obtained the second time, as shown in the screenshot.

I like QGrid, it is a very elegant solution like collection view.

I am looking for a SwiftUI component like LazyGrid (https://stackoverflow.com/questions/62606907/swiftui-using-ondrag-and-ondrop-to-reorder-items-within-one-single-lazygrid), but needs to be forward compatible with iOS 13.x or macOS 10.15.x.

Does QGrid have this feature please?

I have the QGrid setup to render a list of objects that are converted to views inside the QGrid’s block. When my API fetches updated data the view is rebuilt. I confirmed that the QGrid is called again, yet, it keeps rendering the initial list of views and not the newly created views. If I switch to List it works properly. Only with QGrid it doesn’t refresh. Here is the code in question:

    var body: some View { self.makeView()
        .onReceive(timer) { _ in
            self.refreshView()
        }
    }
    
    private func makeView() -> some View {
        VStack {
                Text("Dashboard").font(.largeTitle)
            if self.circuits.count > 0 {
                // need to use an if, b/c showing scrollable view without content will not refresh later on
                    QGrid<[CircuitInfo], CircuitCell>(self.circuits, columns: 2, columnsInLandscape: 4, vSpacing: 10, vPadding: 10, isScrollable: true) { circuit in
                        CircuitCell(circuit: circuit)
                }
            }
            Spacer()
            HStack {
                Text("\(self.circuitsCount())").font(.footnote).padding(5)
                Spacer()
                Text("Updated: \(lastUpdated)").font(.footnote).padding(5)
            }
        }
    }

Any ideas as to what I might be doing wrong?

Can this Data.Element : Identifiable remove from

public struct QGrid<Data, Content> : View where Data : RandomAccessCollection, Content : View, Data.Element : Identifiable 

to support Core Data NSManagedObjects