网格 Grid

按指定列数排列子组件,自动换行。适合展示等格大小的元素。

用法

从编辑器右上角 ➕ 添加 grid,然后往里加子组件。在属性里设置列数 (columns)。

columns = 3
子组件 7 个:

┌─┬─┬─┐
│1│2│3│
├─┼─┼─┤
│4│5│6│
├─┼─┼─┤
│7│ │ │
└─┴─┴─┘

常用属性

属性	说明
列数 (columns)	一行几个
间距 (spacing)	子组件之间的间距
内边距 / 背景 / 圆角	同其他容器
对齐	子组件未撑满一行时的对齐方式

配合循环

grid 通常和 循环 Loop 一起用 — 一次定义一个子组件模板,数组多少项就画多少格。

this.icons = [
  { sym: "sun.max",   label: "晴" },
  { sym: "cloud",     label: "阴" },
  { sym: "cloud.rain",label: "雨" },
  { sym: "snow",      label: "雪" }
]

grid 配置:

• 列数:2
• 循环数据源:{icons[ico]}
• 内部子组件(vstack):
  • icon 内容 {ico.sym}
  • text 内容 {ico.label}

效果:2 列 2 行的天气图标网格。