《HarmonyOS应用开发基础》 课件 实操 项目2-任务12 展示列表与网格数据.pptx

任务12展示列表与网格数据项目2走进ArkTS声明式开发

任务12展示列表与网格数据本任务完成List列表数据和Grid网格数据的展示。任务描述

任务效果图预览

任务实施

010203整理工程资源实现列表数据的展示自定义GridItem项布局组件04实现网格数据的展示

01整理工程资源

本任务在任务7（渲染组件）的基础上完成，使用到任务7定义的实体数据类和数据源。将Project2_Task7工程复制一份，并重命名为Project2_Task12。在Project2_Task12中修改代码，完成任务要求。

02实现列表数据的展示修改Index.ets中的代码，整体布局的最外层一个Column，内部用Scroll滚动组件包裹住List组件，ListItem子组件对应的布局使用前面任务中已经实现的MyItem自定义组件，使用List组件实现列表数据的展示。

03自定义GridItem项布局组件Grid与List相似，GridItem是Grid的唯一子组件。Grid指定在行和列上的GridItem子组件的展示个数，并且可以调整每一个GridItem所占的行宽和列高。在etsview目录下创建MyGridItem.ets文件，用于定义GridItem的布局。GridItem的布局由一个Column组成，内嵌一个图片组件和文字显示组件。

04实现网格数据的展示在Index.ets文件中导入MyGridItem组件，添加用Scroll组件包裹住的Grid组件，实现网格数据的展示。

任务12展示列表与网格数据本任务使用List组件和Grid组件开发了App中常见的列表项和网格项的数据展示，从类的定义、类的导出、数据源、展示单个数据的自定义组件、用循环进行组件的渲染，到用滚动组件包裹住List和Grid，展示了列表和网格的完整开发过程。任务小结