[NOTE]
If you'd like to see QGrid
in action, check out this demo of early alpha version of QDesigner
(see video below).
Install Beta of QDesigner
: https://testflight.apple.com/join/aSXW5tVp
Install a companion QDesigner Client
on iPhone, to see your UI design on a target device, updated in real-time:
https://testflight.apple.com/join/DQv0DBJU
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:
- Fork
QGrid
- Create your feature branch
- Commit your changes, along with unit tests
- Push to the branch
- Create pull request
👨💻 Karol Kulesza (@karolkulesza)
📄 QGrid is available under the MIT license. See the LICENSE file for more info.