網(wǎng)格布局是由“行”和“列”分割的單元格所組成。

布局

Grid的子組件必須是GridItem組件，Grid組件支持自定義行列數(shù)和每行每列尺寸占比、設(shè)置子組件橫跨幾行或者幾列，同時也提供了垂直和水平布局的能力。
Grid組件提供了rowsTemplate和columnsTemplate屬性用于設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。
rowsTemplate和columnsTemplate屬性值是由空格和‘?dāng)?shù)字 + fr’ 間隔拼接的字符串，fr的個數(shù)即網(wǎng)格布局的行或列數(shù)。

image.png

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

設(shè)置主軸方向

可以通過layoutDirection設(shè)置網(wǎng)格布局的主軸方向，決定子組件的排列方式。還可以結(jié)合minCount和maxCount屬性來約束主軸方向上的網(wǎng)格數(shù)量。

      Grid() {
        GridItem() {
          Text("Grid布局1")
        }
        GridItem() {
          Text("Grid布局2")
        }
        GridItem() {
          Text("Grid布局3")
        }
      }.layoutDirection(GridDirection.Row) // 按行來排列
      .maxCount(3)//表示主軸方向上最大的網(wǎng)格單元數(shù)為3

設(shè)置行列間距

通過Grid的rowsGap和columnsGap可以設(shè)置網(wǎng)格布局的行列間距。

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