GridLayout 将元素放置在网格上。

GridLayout 用单元格覆盖其整个表面。单元格不对齐。 构成单元格的元素将在其分配的空间内拉伸，除非它们的大小约束（例如 min-height 或 max-width）与此相冲突。

// 此示例使用 `Row`元素export component Foo inherits Window { width:200px; height:200px; GridLayout { spacing:5px; Row { Rectangle { background: red; } Rectangle { background: blue; } } Row { Rectangle { background: yellow; } Rectangle { background: green; } } }}

// 此示例使用 `col` 和 `row` 属性export component Foo inherits Window { width:200px; height:150px; GridLayout { Rectangle { background: red; } Rectangle { background: blue; } Rectangle { background: yellow; row:1; } Rectangle { background: green; } Rectangle { background: black; col:2; row:0; } }}

##间距属性

spacing

长度 默认：0px

布局中元素之间的距离。此单个值应用于水平和垂直间距。

要使用不同的值定位特定轴，请使用以下属性：

spacing-horizontal

长度 默认：0px

spacing-vertical

长度 默认：0px

##内边距属性

padding

长度 默认：0px

整个网格结构周围的内边距。此单个值应用于所有边。

要使用不同的值定位特定边，请使用以下属性：

padding-left

长度 默认：0px

padding-right

长度 默认：0px

padding-top

长度 默认：0px

padding-bottom

长度 默认：0px

##单元格元素

GridLayout内的单元格元素获得以下新属性。对这些属性的任何绑定都必须是编译时常量：

row

整数 默认：auto

网格中元素行的索引。设置此属性会将元素的列重置为零，除非显式设置。

col

整数 默认：auto

网格中元素列的索引。设置此属性以覆盖顺序列分配（例如，跳过一列）。

rowspan

整数 默认：1

此元素应跨越的行数。

colspan

整数 默认：1

此元素应跨越的列数。

要隐式按顺序分配行索引 — 与 col一样 — 将单元格元素包装在 Row元素中。

以下示例使用 Row元素创建一个2乘2的网格，省略一个单元格：

import { Button } from "std-widgets.slint";export component Foo inherits Window { width:200px; height:100px; GridLayout { Row { // 子元素隐式位于第0行 Button { col:1; text: "Top Right"; } // 此后的隐式列为2 } Row { // 子元素隐式位于第1行 Button { text: "Bottom Left"; } //隐式位于第0列... Button { text: "Bottom Right"; } // ...和第1列 } }}

以下示例使用 row 属性创建相同的网格。行索引必须手动处理：

import { Button } from "std-widgets.slint";export component Foo inherits Window { width:200px; height:100px; GridLayout { Button { row:0; col:1; text: "Top Right"; } // `row:0;` 甚至可以在开头省略 Button { row:1; text: "Bottom Left"; } // 新行，隐式将列重置为0 Button { text: "Bottom Right"; } //同一行，顺序分配的列1 }}