{"id":15131508,"url":"https://github.com/q-mobile/qgrid","last_synced_at":"2025-05-16T05:05:05.659Z","repository":{"id":36075726,"uuid":"197633310","full_name":"Q-Mobile/QGrid","owner":"Q-Mobile","description":"🎛 QGrid: The missing SwiftUI collection view.","archived":false,"fork":false,"pushed_at":"2020-08-05T19:44:45.000Z","size":62819,"stargazers_count":1653,"open_issues_count":18,"forks_count":107,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-16T05:05:00.106Z","etag":null,"topics":["declarative-ui","grid","ios","swift","swift5","swiftui","swiftui-example"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Q-Mobile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-18T17:54:37.000Z","updated_at":"2025-05-07T19:38:59.000Z","dependencies_parsed_at":"2022-07-14T06:00:39.174Z","dependency_job_id":null,"html_url":"https://github.com/Q-Mobile/QGrid","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q-Mobile%2FQGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q-Mobile%2FQGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q-Mobile%2FQGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Q-Mobile%2FQGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Q-Mobile","download_url":"https://codeload.github.com/Q-Mobile/QGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["declarative-ui","grid","ios","swift","swift5","swiftui","swiftui-example"],"created_at":"2024-09-26T03:42:35.341Z","updated_at":"2025-05-16T05:05:00.651Z","avatar_url":"https://github.com/Q-Mobile.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n**[NOTE]**  \nIf you'd like to see `QGrid` in action, check out this demo of `QDesigner` (see video below).  \nInstall `QDesigner`: [https://apps.apple.com/us/app/qdesigner/id1500810470](https://apps.apple.com/us/app/qdesigner/id1500810470)  \nInstall a companion `QDesigner Client` on iPhone, to see your UI design on a target device, updated in real-time:\n[https://apps.apple.com/us/app/qdesignerclient/id1500946484](https://apps.apple.com/us/app/qdesignerclient/id1500946484)  \n\nLearn more at: [https://Q-Mobile.IT/Q-Designer](https://Q-Mobile.IT/Q-Designer)\n\n[![QDesigner Preview](QDesignerPreview.png)](https://youtu.be/_nCM9O-v7mQ)\n\n![QGrid: The missing SwiftUI collection view.](QGridLogo.png)\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://app.bitrise.io/app/f0f6bc185b95894e\"\u003e\u003cimg src=\"https://img.shields.io/bitrise/f0f6bc185b95894e?token=oz0lqEXxqGjU-kKRf983_w\" alt=“Build Status\"/\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/platform-iOS | macOS-blue.svg?style=flat\" alt=\"Platforms\" /\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Swift-5-orange.svg\" /\u003e\n    \u003ca href=\"https://swift.org/package-manager\"\u003e\u003cimg src=\"https://img.shields.io/badge/SPM-Compatible-brightgreen.svg?style=flat\" alt=\"Swift Package Manager\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://raw.githubusercontent.com/q-mobile/QGrid/master/LICENSE\"\u003e\u003cimg src=\"http://img.shields.io/badge/license-MIT-blue.svg?style=flat\" alt=\"License: MIT\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://twitter.com/karolkulesza\"\u003e\u003cimg src=\"https://img.shields.io/badge/contact-@karolkulesza-blue.svg?style=flat\" alt=\"Twitter: @karolkulesza\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n`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.\n\n\u003ccenter\u003e\n\u003cimg src=\"QGridDemo.gif\"/\u003e\n\u003c/center\u003e\n\n## 🔷 Requirements\n\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;✅ macOS 10.15+  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;✅ Xcode 11.0  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;✅ Swift 5+  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;✅ iOS 13+  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;✅ tvOS 13+\n\n## 🔷 Installation\n\n`QGrid` is available via [Swift Package Manager](https://swift.org/package-manager).\n\nUsing Xcode 11, go to `File -\u003e Swift Packages -\u003e Add Package Dependency` and enter [https://github.com/Q-Mobile/QGrid](https://github.com/Q-Mobile/QGrid)  \n\n## 🔷 Usage\n\n#### ✴️ Basic scenario:  \n\nIn 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:\n\n```Swift\nstruct PeopleView: View {\n  var body: some View {\n    QGrid(Storage.people, columns: 3) { GridCell(person: $0) }\n  }\n}   \n\nstruct GridCell: View {\n  var person: Person\n\n  var body: some View {\n    VStack() {\n      Image(person.imageName)\n        .resizable()\n        .scaledToFit()\n        .clipShape(Circle())\n        .shadow(color: .primary, radius: 5)\n        .padding([.horizontal, .top], 7)\n      Text(person.firstName).lineLimit(1)\n      Text(person.lastName).lineLimit(1)\n    }\n  }\n}\n```\n\n#### ✴️ Customize the default layout configuration:\n\nYou can customize how `QGrid` will layout your cells by providing some additional initializer parameters, which have default values:\n\n```swift\nstruct PeopleView: View {\n  var body: some View {\n    QGrid(Storage.people,\n          columns: 3,\n          columnsInLandscape: 4,\n          vSpacing: 50,\n          hSpacing: 20,\n          vPadding: 100,\n          hPadding: 20) { person in\n            GridCell(person: person)\n    }\n  }\n}   \n```\n\n## 🔷 Example App\n\n📱`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.\n\n\n\u003ccenter\u003e\n\u003ctable bordercolor=white\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      \u003cimg src=\"QGridTestApp/Screenshots/People1.png\" width=\"400\"/\u003e\n    \u003c/th\u003e\n    \u003cth\u003e\n      \u003cimg src=\"QGridTestApp/Screenshots/People2.png\" width=\"400\"/\u003e\n    \u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable bordercolor=white\u003e\n  \u003ctr\u003e\n\t \u003cth\u003e\n    \t\u003cimg src=\"QGridTestApp/Screenshots/People3.png\" width=\"800\"/\u003e\n    \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n\t \u003cth\u003e\n    \t\u003cimg src=\"QGridTestApp/Screenshots/People4.png\" width=\"800\"/\u003e\n    \u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003c/center\u003e\n\n## 🔷 QGrid Designer\n\n📱`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:\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"QGridDesignerDemo.gif\"/\u003e\n\u003c/p\u003e\n\n## 🔷 Roadmap / TODOs\n\nVersion `0.1.1` of `QGrid ` contains a very limited set of features. It could be extended by implementing the following tasks:\n\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Parameterize spacing\u0026padding configuration depending on the device orientation  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Add the option to specify scroll direction  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Add content-only initializer to QGrid struct, without a collection of identified data as argument (As in SwiftUI’s `List`)  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Add support for other platforms (watchOS)  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Add `Stack` layout option (as in `UICollectionView`)  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ Add unit/UI tests  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☘️ ... many other improvements\n\n## 🔷 Contributing\n\n👨🏻‍🔧 Feel free to contribute to `QGrid ` by creating a pull request, following these guidelines:\n\n1. Fork `QGrid `\n2. Create your feature branch\n3. Commit your changes, along with unit tests\n4. Push to the branch\n5. Create pull request\n\n\n## 🔷 Author\n\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;👨‍💻 [Karol Kulesza](https://github.com/karolkulesza) ([@karolkulesza](https://twitter.com/karolkulesza))\n\n\n## 🔷 License\n\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;📄 QGrid is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq-mobile%2Fqgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fq-mobile%2Fqgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fq-mobile%2Fqgrid/lists"}