鸿蒙移动应用开发项目式教程课件 项目3-熊猫家园展示页-任务3-4 设计List布局

设计List布局List布局1．设置主轴方向List组件主轴方向默认为垂直方向，即默认情况下不需要手动设置主轴方向就可以构建一个垂直滚动列表。

若要构建水平滚动列表，将List的listDirection属性的值设置为Axis.Horizontal即可实现。listDirection默认值为Axis.Vertical，即垂直方向。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局List布局2．设置交叉轴布局List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，lanes属性用于确定交叉轴方向排列的列表项数量，alignListItem属性用于设置子组件在交叉轴方向的对齐方式。List组件的lanes属性通常用于在不同尺寸的设备上自适应构建不同行数或列数的列表，即一次开发、多端部署的场景，如歌单列表。lanes属性的取值类型有number、LengthConstrain，即数字或者LengthConstrain类型。以垂直列表为例，如果将lanes属性的值设为2，则表示构建的是一个两列的垂直列表。

当lanes其取值为LengthConstrain类型时，表示会根据LengthConstrain与List组件的尺寸自适应决定行数或列数。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局

渲染控制

列表视图垂直或水平显示项目集合，在行或列超出屏幕时提供滚动功能，使其适合显示大型数据集合。如图所示，在简单的列表形式中，List静态地创建其列表项ListItem的内容。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局城市列表

渲染控制

由于在ListItem中只能有一个根节点组件，不支持以平铺形式使用多个组件，因此，若列表项是由多个组件元素组成的，则需要将这多个元素组合到一个容器组件内或组成一个自定义组件。

如图所示，在联系人列表的列表项中，每个联系人都有头像和名称。此时需要将Image和Text封装到一个Row容器内。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局联系人列表

迭代列表内容

通常，应用通过数据集合动态创建列表。使用循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件，降低代码复杂度。ArkTS通过ForEach提供组件的循环渲染功能。如图所示，以简单形式的学生列表为例，将学生名称和头像数据以Student类结构存储到contacts数组，使用ForEach中嵌套ListItem的形式来代替多个平铺的、内容相似的ListItem，从而减少重复代码。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局迭代学生列表

自定义列表样式List布局以列表的形式显示数据，开发者可以自定义布局中列表的样式。1．设置内容间距

在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加10vp的间距。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局

自定义列表样式2．添加分隔线

分隔线用来将界面元素隔开，使单个元素更加容易识别。如图所示，列表项左边有图标（如蓝牙图标），由于图标本身就能很好地区分元素，所以分隔线从图标之后开始显示即可。List提供了divider属性用于在列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色。startMargin和endMargin属性分别用于设置分隔线到列表侧边起始端的距离和到列表侧边结束端的距离。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局设置列表分隔线样式

自定义列表样式3．添加滚动条

当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平）方向滚动。如图所示，当页面内容很多，用户需快速定位时，可拖动滚动条。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局列表的滚动条

自定义列表样式

在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为BarState，当取值为BarState.Auto时表示按需显示滚动条。在这种情况下，当触摸到滚动条区域时显示控件，可上下拖动滚动条快速浏览内容，拖动时滚动条会变粗。若不进行任何操作，2s后滚动条自动消失。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局

分组列表

列表支持数据的分组展示，可以使列表结构清晰、查找方便，从而提高使用效率。分组列表在实际应用中十分常见，如图所示为联系人分组列表。任务导入知识解析学以致用课堂小结课后拓展1.1设计List布局联系人分组列表

分组列表

在List组件中使用ListItemGroup对数据进行分组，可以构建二维列表。

在List组件中可以直接使用一个或者多个ListItemGroup组件，ListItemGroup默认充满List组件。在初始化ListItemGroup时，可通过header参数设置列表分组的头部组件。

如果多个ListItemGroup结构类似，可以将多个分组的数据组成数组，然后使用ForEach对多个分组进行循环渲染。例如，在前面所讲到的学