HarmonyOS 网格布局Grid

网格布局是由“行”和“列”分割的单元格所组成。

布局

Grid的子组件必须是GridItem组件，Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时也提供了垂直和水平布局的能力。
Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。
rowsTemplate和columnsTemplate属性值是由空格和‘数字 + fr’ 间隔拼接的字符串，fr的个数即网格布局的行或列数。

image.png

Grid() {
  ...
}
.rowTemplate('1fr 1fr 1fr') //每行占1份
.columnsTemplate('1fr 2fr 1fr') //一共4份，占1:2:1的比例 

设置主轴方向

可以通过layoutDirection设置网格布局的主轴方向，决定子组件的排列方式。还可以结合minCount和maxCount属性来约束主轴方向上的网格数量。

      Grid() {
        GridItem() {
          Text("Grid布局1")
        }
        GridItem() {
          Text("Grid布局2")
        }
        GridItem() {
          Text("Grid布局3")
        }
      }.layoutDirection(GridDirection.Row) // 按行来排列
      .maxCount(3)//表示主轴方向上最大的网格单元数为3

设置行列间距

通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。

Grid() {
      ....
}.columnsGap(10)
.rowsGap(15)//行间距15vp，列间距为10vp