Grid

About 4 min

Grid

网格容器,二维布局,将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以任意组合不同的网格,做出各种各样的布局。

权限类别

子组件

包含GridItem子组件。

接口说明

Grid()

属性

名称

参数类型

默认值

描述

columnsTemplate

string

'1fr'

用于设置当前网格布局列的数量,不设置时默认1列 示例, '1fr 1fr 2fr' 分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份。

rowsTemplate

string

'1fr'

用于设置当前网格布局行的数量,不设置时默认1行 示例, '1fr 1fr 2fr'分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。

columnsGap

Length

0

用于设置列与列的间距。

rowsGap

Length

0

用于设置行与行的间距。

事件

名称

功能描述

onScrollIndex(first: number) => void

当前列表显示的起始位置item发生变化时触发。

示例

@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4']

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)

      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid() {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
    }.width('100%').margin({ top: 5 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56