《HarmonyOS应用开发基础》 课件知识点2-12-2 网格容器组件Grid

网格容器组件GridGrid概述Grid网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。如右图所示。接口描述：Grid(scroller?:Scroller)Grid的属性Grid除支持通用属性外，还支持以下常用属性:名称参数类型描述columnsTemplatestring设置当前网格布局列的数量，不设置时默认1列。例如,'1fr1fr2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。rowsTemplatestring设置当前网格布局行的数量，不设置时默认1行。例如,'1fr1fr2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。columnsGapLength设置列与列的间距。默认值：0rowsGapLength设置行与行的间距。默认值：0Grid的属性Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：1.rowsTemplate、columnsTemplate同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。例如rowsTemplate、columnsTemplate都设置为"1fr1fr"时，则仅展示两行两列，共4个元素，其他元素不展示。2.rowsTemplate、columnsTemplate仅设置其中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。例如Grid有十个元素，且设置columnsTemplate为"1fr1fr1fr"，则Grid有三列，元素先填满一行，再填充下一行。在Grid区域外的元素，可通过竖直方向的滚动，进行展示。3.rowsTemplate、columnsTemplate都不设置：元素在layoutDirection方向上排布，列数由Grid的宽度、首个元素的宽度、minCount、maxCount、columnsGap共同决定；行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。GridItem的属性GridItem常用属性:名称参数类型描述rowStartnumber指定当前元素起始行号。rowEndnumber指定当前元素终点行号。columnStartnumber指定当前元素起始列号。columnEndnumber指定当前元素终点列号。Grid使用示例1arr:

String[]

=

['0',

'1',

'2',

'3',

'4']...Grid()

{

ForEach(this.arr,

(item:

string)

=>

{

ForEach(this.arr,

(item:

string)

=>

{

GridItem()

{

Text(day)

.fontSize(16)

.width('100%')

.height('100%')

.backgroundColor(0xF9CF93)

.textAlign(TextAlign.Center)

}

},

item

=>

item)

},

item

=>

item)}.columnsTemplate('1fr

1fr

1fr

1fr

1fr').rowsTemplate('1fr

1fr

1fr

1fr

1fr').columnsGap(10).rowsGap(10).width('90%').backgroundColor(0xFAEEE0).height(300)Grid使用示例2arr:

String[]

=

['0',

'1',

'2',

'3',

'4']...Grid()

{

GridItem()

{

Text('4')

.fontSize(16).width('100%').height('100%')

.backgroundColor(0xFAEEE0).textAlign(TextAlign.Center)

}.rowStart(1).rowEnd(4)

ForEach(this.arr,

(item)

=>

{

ForEach(this.arr,

(item)

=>

{

GridItem()

{

Text(item)

.fontSize(16).backgroundColor(0xF9CF93)

.width('100%').height('100%').textAlign(TextAlign.Center)

}.forceRebuild(false)

},

item

=>

item)

},

item

=>

item)

GridItem()

{

Text('5')

.fontSize(16).backgroundColor(0xDBD0C0)

.width('100%').height('100%').textAlign(TextAlign.Center)

}.columnStart(1).columnEnd(