[NOTE]
If you'd like to see QGrid in action, check out this demo of QDesigner (see video below).
Install QDesigner: https://apps.apple.com/us/app/qdesigner/id1500810470
Install a companion QDesigner Client on iPhone, to see your UI design on a target device, updated in real-time: https://apps.apple.com/us/app/qdesignerclient/id1500946484

Learn more at: https://Q-Mobile.IT/Q-Designer

QGrid is the missing SwiftUI collection view. It uses the same approach as SwiftUI's List view, by computing its cells from an underlying collection of identified data.

     ✅ macOS 10.15+
     ✅ Xcode 11.0
     ✅ Swift 5+
     ✅ iOS 13+
     ✅ tvOS 13+

QGrid is available via Swift Package Manager.

Using Xcode 11, go to File -> Swift Packages -> Add Package Dependency and enter https://github.com/Q-Mobile/QGrid

In its simplest form, QGrid can be used with just this 1 line of code within the body of your View, assuming you already have a custom cell view:

struct PeopleView: View { var body: some View { QGrid(Storage.people, columns: 3) { GridCell(person: $0) } } } struct GridCell: View { var person: Person var body: some View { VStack() { Image(person.imageName) .resizable() .scaledToFit() .clipShape(Circle()) .shadow(color: .primary, radius: 5) .padding([.horizontal, .top], 7) Text(person.firstName).lineLimit(1) Text(person.lastName).lineLimit(1) } } }

You can customize how QGrid will layout your cells by providing some additional initializer parameters, which have default values:

struct PeopleView: View { var body: some View { QGrid(Storage.people, columns: 3, columnsInLandscape: 4, vSpacing: 50, hSpacing: 20, vPadding: 100, hPadding: 20) { person in GridCell(person: person) } } } 

📱QGridTestApp directory in this repository contains a very simple application that uses QGrid. Open QGridTestApp/QGridTestApp.xcodeproj and either use the new Xcode Previews feature or just run the app.

📱QGridTestApp contains also the QGrid Designer area view, with sliders for dynamic run-time configuration of the QGrid view (with config option to hide it). Please refer to the following demo executed on the device:

Version 0.1.1 of QGrid contains a very limited set of features. It could be extended by implementing the following tasks:

     ☘️ Parameterize spacing&padding configuration depending on the device orientation
     ☘️ Add the option to specify scroll direction
     ☘️ Add content-only initializer to QGrid struct, without a collection of identified data as argument (As in SwiftUI’s List)
     ☘️ Add support for other platforms (watchOS)
     ☘️ Add Stack layout option (as in UICollectionView)
     ☘️ Add unit/UI tests
     ☘️ ... many other improvements

👨🏻‍🔧 Feel free to contribute to QGrid by creating a pull request, following these guidelines:

1. Fork QGrid
2. Create your feature branch
3. Commit your changes, along with unit tests
4. Push to the branch
5. Create pull request

     👨‍💻 Karol Kulesza (@karolkulesza)

     📄 QGrid is available under the MIT license. See the LICENSE file for more info.