OpenHarmony——ArkTS声明式开发与应用 课件 项目2-任务11-2 使用Grid显示数据.pptxVIP

任务11-2使用Grid显示数据项目2走近ArkTS声明式开发

完成任务达成的技能目标01任务描述02技能目标本任务使用Grid组件开发常见的网格数据展示。能使用Grid组件展示网格数据1能删除网格项数据2

任务实施步骤STEPS使用Grid显示网格数据2认识Grid组件1

认识Grid组件01任务实施

认识Grid组件Grid表示网格布局容器，它的子组件只能是GridItem，子组件可以设置行数和列数。

Grid的子组件Grid(){ForEach(数据存放的数组或集合,(item:数组或集合中成员的类型,index:number)={//ForEach语法GridItem(){//GridItem子组件的UI布局}})}语法Grid的子组件必须是GridItem，通常将Grid要展示的数据放到数组可集合中，配合ForEach循环从数组或集合中取出数据渲染GridItem子组件。子组件

Grid的属性Grid(){...}.columnsTemplate(1fr1fr1fr1fr)//Grid宽度均分成4份.rowsTemplate(1fr1fr1fr)//Grid高度均分成3份.rowsGap(10)//设置行间距.columnsGap(10)//设置列间距示例Grid使用属性row