主要观点:上次构建了自定义 SwiftUI 中的六边形形状,此次要制作填充屏幕的六边形网格。介绍了规则六边形形状及其尺寸计算,通过viewport 高度和宽度可计算填充屏幕所需的列数和行数,定位每个形状需知道其列和行,六边形行与平铺正方形不同,行间距及 x、y 偏移计算方式不同,给出了计算 yOffset 和 xOffset 的函数,通过 ForEach 遍历列数和行数来渲染六边形,HexGridCell 用于渲染带有修饰的六边形,最终得到美观的六边形蜂窝图案,此内容约两年前开始撰写(2022 年夏天)。
关键信息:
- 规则六边形顶平,高度小于宽度,尺寸为顶点半径即边长,高度为 2×size,宽度为√3×size。
- 屏幕填充计算:列数 Int(ceil((width - offset.x) / (size 2.5))),行数 Int(ceil((height - offset.y) / size sqrt(3) * 2))。
- 六边形行开始位置及间距:y 偏移为 row×√3×size,x 偏移偶数行为 size×column,奇数行为 size×2.5。
- 渲染函数:HexGridCell 中通过 offset 定位六边形,Hexagon 进行绘制和修饰。
重要细节:
- 给出了具体的代码示例,如计算列数和行数的代码、计算 yOffset 和 xOffset 的函数、ForEach 遍历渲染六边形的代码等。
- 展示了 iPhone 15 Pro 竖屏显示六边形网格的 XCode 模拟器截图。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。