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

网格容器组件Grid

Grid概述Grid网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。如右图所示。接口描述：Grid(scroller?:Scroller)

Grid的属性Grid除支持通用属性外，还支持以下常用属性:名称参数类型描述columnsTemplatestring设置当前网格布局列的数量，不设置时默认1列。例如,1fr1fr2fr是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。rowsTemplatestring设置当前网格布局行的数量，不设置时默认1行。例如,1fr1fr2fr是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。columnsGapLength设置列与列的间距。默认值：0rowsGapLength设置行与行的间距。默认值：0

Grid的属性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)??????}.forceRebuil