鸿蒙(HarmonyOS)应用开发——容器组件（Grid组件）_harmonyos应用开发:网格布局grid

前言

前面一篇文章中，已经说了List组件。那么接下来就是容器组件中的Grid组件

使用Grid组件构建网络布局

Grid组件时网格容器，它是由“行”和“列”构成，通过指定不同的项目所在的单元格作出各种各样的布局，包括子组件 GridItem

语法

Grid(scroller?:Scroller)
1

参数 ：scroller控制Grid的滚动

属性

• columnsTemplate
  columnsTemplate表示设置当前网络布局列的数量，默认是1列，使用的单位是fr

fr是指划分网格时的比例值
columnsTemplate（1fr,2fr,1fr）表示将Grid分为3列，并将Grid组件的宽4等分

Grid() {

}
.columnsTemplate('1fr 1fr 1fr 1fr')

1
2
3
4
5

• rowTemplate
  用于设置网格布局行的数量，默认是1列，使用的单位是fr

Grid() {

}
.rowTemplate('1fr 1fr 1fr 1fr')

1
2
3
4
5

• columnsGap
  设置列与列的间距，单位默认时vp

      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, item => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
    }
   
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• rowGap
  设置行与行之间的间距

      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, item => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18