[注意]
如果您想了解 QGrid 的实际应用，请查看 QDesigner 的演示（请参见下方视频）。
安装 QDesigner：https://apps.apple.com/us/app/qdesigner/id1500810470
在 iPhone 上安装配套的 QDesigner Client，可以在目标设备上实时查看您的 UI 设计：https://apps.apple.com/us/app/qdesignerclient/id1500946484

了解更多：https://Q-Mobile.IT/Q-Designer

QGrid 是 SwiftUI 缺失的集合视图。它使用与 SwiftUI 的 List 视图相同的方法，通过从底层已识别的数据集合中计算其单元格。

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

QGrid 可通过 Swift Package Manager 获取。

使用 Xcode 11，转到 File -> Swift Packages -> Add Package Dependency 并输入 https://github.com/Q-Mobile/QGrid

在最简单的形式中，假设您已经有一个自定义单元格视图，只需在 View 的 body 中使用这一行代码即可使用 QGrid

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)
    }
  }
}

您可以通过提供一些额外的初始化参数（具有默认值）来自定义 QGrid 将如何布局您的单元格

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 目录包含一个使用 QGrid 的非常简单的应用程序。打开 QGridTestApp/QGridTestApp.xcodeproj 并使用新的 Xcode Previews 功能或直接运行该应用程序。

📱QGridTestApp 还包含 QGrid 设计器区域视图，带有滑块用于动态运行时配置 QGrid 视图（带有隐藏它的配置选项）。请参考在设备上执行的以下演示

QGrid 的 0.1.1 版本包含非常有限的功能集。可以通过实现以下任务来扩展它

     ☘️ 根据设备方向参数化间距和填充配置
     ☘️ 添加指定滚动方向的选项
     ☘️ 添加仅包含内容的初始化器到 QGrid 结构，而没有已识别的数据集合作为参数（如 SwiftUI 的 List 中一样）
     ☘️ 添加对其他平台（watchOS）的支持
     ☘️ 添加 Stack 布局选项（如 UICollectionView 中一样）
     ☘️ 添加单元/UI 测试
     ☘️ ... 许多其他改进

👨🏻‍🔧 欢迎通过创建拉取请求来为 QGrid 做出贡献，请遵循以下指南

1. Fork QGrid
2. 创建您的功能分支
3. 提交您的更改，以及单元测试
4. 推送到分支
5. 创建拉取请求

     👨‍💻 Karol Kulesza (@karolkulesza)

     📄 QGrid 在 MIT 许可下可用。 有关更多信息，请参见 LICENSE 文件。