鸿蒙~ArkUI 基础 Grid网格布局

一、设置摆放方法

• 设置队伍数量与占比
  经过设置队伍数量与尺度占比能够确认网格布局的整体摆放方法。Grid组件提供了rowsTemplate和columnsTemplate特点用于设置网格布局队伍数量与尺度占比。

rowsTemplate和columnsTemplate特点值是一个由多个空格和’数字+fr’距离拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于核算该行或列在网格布局宽度上的占比，终究决定该行或列的宽度

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Grid() {
      GridItem() {
        Text("1")
      }.backgroundColor(Color.Black)
      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)
      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)
      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)
      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)
      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)
      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)
      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)
      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}

• 设置子组件所占队伍数
  除了大小相同的等比例网格布局，由不同大小的网格组成不均匀散布的网格布局场景在实践运用中非常常见，如下图所示。在Grid组件中，经过设置GridItem的rowStart、rowEnd、columnStart和columnEnd能够完成如图所示的单个网格横跨多行或多列的场景。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Grid() {
      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Black)
      .columnStart(1)
      .columnEnd(3)
      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)
      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)
      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)
      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)
      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)
      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)
      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)
      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}

• 设置主轴方向
  运用Grid构建网格布局时，若没有设置队伍数量与占比，能够经过layoutDirection能够设置网格布局的主轴方向，决定子组件的摆放方法。此刻能够结合minCount和maxCount特点来约束主轴方向上的网格数量

1. layoutDirection特点仅在不设置rowsTemplate和columnsTemplate时收效，此刻元素在layoutDirection方向上摆放。

2. 仅设置rowsTemplate时，Grid主轴为水平方向，穿插轴为垂直方向。

3. 仅设置columnsTemplate时，Grid主轴为垂直方向，穿插轴为水平方向。

• 设置队伍距离
  经过Grid的rowsGap和columnsGap能够设置网格布局的队伍距离。在图5所示的核算器中，行距离为15vp，列距离为10vp。

重视大众号：Android老皮！！！欢迎大家来找我探讨沟通