鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-3 List组件概述

List组件概述List组件概述List（列表）是一种复杂的容器，当列表项达到一定数量、内容超过屏幕尺寸时，可以自动提供滚动功能。它适用于显示同类数据或数据集，如图片和文本。在列表中显示数据集是许多应用程序的常见要求（如通讯录、音乐列表、购物清单等）。

使用列表可以轻松、高效地显示结构化、可滚动的信息。在List组件中可按垂直或水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用循环渲染迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。任务导入知识解析学以致用课堂小结课后拓展1.1List组件List布局与约束List作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。

如图所示，在垂直列表中，List组件按垂直方向自动排列ListItemGroup或ListItem。ListItemGroup用于列表数据的分组展示，其子组件也是ListItem。ListItem表示单个列表项，可以包含单个子组件。任务导入知识解析学以致用课堂小结课后拓展1.1List组件垂直列表List布局List组件除了提供垂直和水平布局功能、超出屏幕时滚动的自适应延伸功能，还提供了自适应交叉轴方向上排列的布局功能。

利用垂直布局功能可以构建单列或多列垂直滚动列表，如图所示。任务导入知识解析学以致用课堂小结课后拓展1.1List组件垂直滚动列表（左为单列，右为多列）List布局

利用水平布局功能可以构建单行或多行水平滚动列表，如图所示。任务导入知识解析学以致用课堂小结课后拓展1.1List组件水平滚动列表（左为单行，右为多行）List约束

列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。垂直于主轴的轴称为交叉轴，其方向与主轴方向垂直。

如图所示，垂直列表的主轴是垂直方向，交叉轴是水平方向；水平列表的主轴是水平方向，交叉轴是垂直方向。任务导入知识解析学以致用课堂小结课后拓展1.1List组件列表的主轴与交叉轴（左为垂直列表，右为水平列表）List约束

如果List组件主轴或交叉轴方向设置了尺寸，则其对应方向上的尺寸为设置值。

如果List组件主轴方向没有设置尺寸，当List子组件主轴方向总尺寸小于List父组件尺寸时，List主轴方向尺寸自动适应子组件主轴方向总尺寸。

如图所示，一个垂直列表B没有设置高度时，其父组件A的高度为200vp，若其所有子组件C的高度总和为150vp，则此时列表B的高度为150vp。任务导入知识解析学以致用课堂小结课后拓展1.1List组件列表主轴高度约束示例（1）（A—List的父组件，B—List组件，C—List的所有子组件）List约束

如果子组件主轴方向总尺寸超过List父组件尺寸，List主轴方向尺寸适应List父组件尺寸。

如图所示，同样是没有设置高度的垂直列表B，其父组件A的高度为200vp，若其所有子组件C的高度总和为300vp，则此时列表B的高度为200vp。任务导入知识解析学以致用课