Repolode
提交项目
exyte

exyte/Grid

受 CSS Grid 启发的 SwiftUI 网格容器，支持弹性、固定和内容自适应列宽、跨行列及精确定位。

在 GitHub 查看
Star
2,124
Fork
101
未关闭 Issue
4
最近提交
昨天

这是什么？

Grid 是一个为 SwiftUI 提供的网格布局容器，设计思路参考了 CSS Grid。开发者可以用固定点数、弹性比例单位（fr）或内容自适应的方式定义列宽和行高，并按行或按列排列视图。SwiftUI 自带的堆栈和惰性网格并不直接支持这些轨道尺寸、跨格和位置控制的组合。

单个视图可以跨越多个行列，也可以指定明确的行或列起始位置，并支持稀疏和紧凑两种自动填充策略。容器支持按行或按列增长，内容可滚动或填满父视图，并可设置单项及整体对齐、间距，以及带动画的内容更新。此外，还可通过 GridGroup 对视图分组，并借助自定义的结果构建器使用条件语句。

该库可通过 Swift Package Manager 或 CocoaPods 安装，支持 iOS 14 及以上、macOS 10.15 及以上以及 tvOS。项目采用 MIT 许可证。

核心功能

  • 01列宽和行高可用固定点数、弹性 fr 单位或内容自适应方式定义
  • 02视图可通过 gridSpan 跨越多行或多列
  • 03可用 gridStart 指定明确的行列位置
  • 04支持按行或按列排列，并可选稀疏或紧凑填充
  • 05提供可滚动和填满父视图两种内容模式
  • 06支持单项与整体对齐，并可为内容更新添加动画

适用场景

  • 在 SwiftUI 中构建混合固定与弹性列宽的仪表盘或卡片布局
  • 制作计算器式按钮网格或带跨格项目的图片墙
  • 将 CSS Grid 的布局思路移植到原生 iOS 或 macOS 应用

快速上手

  1. 1

    在 Xcode 中通过 Swift Package Manager 添加仓库 URL https://github.com/exyte/Grid

  2. 2

    或在 Podfile 中添加 CocoaPods 依赖

    pod 'ExyteGrid'
  3. 3

    使用 Grid(tracks: 3) 并在闭包中放置视图来完成布局

使用前须知

  • 需要 iOS 14.0+ 或 macOS 10.15+ 以及 Xcode 12+，仅适用于苹果平台。
  • ViewBuilder 中的视图数量上限为 10 个，更大的网格需要使用 GridGroup。

收录于专题

开源 Mac 应用

标签

#swiftui#ios#layout#grid#swift-package#macos

常见问题

Grid 是什么？
受 CSS Grid 启发的 SwiftUI 网格容器，支持弹性、固定和内容自适应列宽、跨行列及精确定位。 Grid 是一个为 SwiftUI 提供的网格布局容器，设计思路参考了 CSS Grid。开发者可以用固定点数、弹性比例单位（fr）或内容自适应的方式定义列宽和行高，并按行或按列排列视图。SwiftUI 自带的堆栈和惰性网格并不直接支持这些轨道尺寸、跨格和位置控制的组合。
Grid 可以免费使用吗？用的什么许可证？
Grid 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
Grid 还在维护吗？
活跃维护中。Grid 最近一次提交是在 2026年11月6日。
Grid 适合用来做什么？
在 SwiftUI 中构建混合固定与弹性列宽的仪表盘或卡片布局 制作计算器式按钮网格或带跨格项目的图片墙 将 CSS Grid 的布局思路移植到原生 iOS 或 macOS 应用
Grid 怎么安装和运行？
在 Xcode 中通过 Swift Package Manager 添加仓库 URL https://github.com/exyte/Grid 或在 Podfile 中添加 CocoaPods 依赖: pod 'ExyteGrid' 使用 Grid(tracks: 3) 并在闭包中放置视图来完成布局
在哪里获取 Grid？
源代码和安装说明在 GitHub 上：https://github.com/exyte/Grid

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目