QGrid - SwiftUI collection view with many layout use

SwiftUI CollectionView

QGrid – SwiftUI collection view with many layout use

July 17, 2025

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.

🔷 Requirements

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

🔷 Installation

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

🔷 Usage

✴️ Basic scenario:

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)

}

}

}

✴️ Customize the default layout configuration:

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)

}

}

}

🔷 Example App

📱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.

🔷 QGrid Designer

📱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:

GitHub

View Github

#collectionview #gridlayout #swiftui

YOU MIGHT ALSO LIKE...

August 7, 2025
SwiftUI

Snap

A customizable Snapping Drawer à la Apple Maps, Apple Music, Stocks, Overcast, etc.. 100% in SwiftUI This is heavily inspired ...

August 7, 2025
SwiftUI

SwiftUI Drawer

A SwiftUI bottom-up controller, like in the Maps app. Drag to expand or minimize. Contents Add the Package Basic Usage ...

August 7, 2025
SwiftUI

SwiftUI BottomSheet

August 7, 2025
SwiftUI

Shapes

August 7, 2025
SwiftUI

Morphi – Μορφ

Morphi provides some additional shapes for SwiftUI. Triangle Parallelogram(topLeftAngle) Polygon(sides) RoundedPolygon(sides, cornerRadius) Heart Moon(angle) PlusSign(width) Star(points) Wave(isUp, width, offset) SuperEllipse(n) Drop Ring(radius) (to ...