List列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。
使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用循环渲染迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。
知识点：
- 设置内容间距：在初始化列表时，如需在列表项之间添加间距，可以使用space参数。
- 在使用List组件时，可通过scrollBar属性控制列表滚动条的显示。scrollBar的取值类型为BarState，当取值为BarState.Auto表示按需显示滚动条。此时，当触摸到滚动条区域时显示控件，可上下拖拽滚动条快速浏览内容，拖拽时会变粗。若不进行任何操作，2秒后滚动条自动消失。
练习：通过List布局显示图片和文案
前提：需要申请权限ohos.permission.INTERNET。
具体代码：
权限module.json5
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
页面ListPage
@Entry
@Component
struct ListPage {
list: ImageObj[] = [
{
src: 'https://pic4.zhimg.com/v2-570aad7dbef96e49ab01780ab7ebc98b_1440w.jpg',
title: '闲时赏美景，忙里寻诗意，走四方，也走心间'
},
{
src: 'https://pic4.zhimg.com/v2-7f5e7ec5909bc70c37badc889ed52089_1440w.jpg',
title: '若无琐事烦心头，世间何处不风景'
},
{
src: 'https://pic1.zhimg.com/v2-1ef95ba71ce4e5a1f14401047efc5d36_1440w.jpg',
title: '放慢脚步，感受生活，因为风景常伴左右'
},
{
src: 'https://pic3.zhimg.com/v2-829c2851efbe7a789da27fc05ec67f46_1440w.jpg',
title: '人生是一场旅行，探索未知的路，享受每一刻'
},
{
src: 'https://pic4.zhimg.com/v2-09892b017cb86cd9b4f3c424523b518b_1440w.jpg',
title: '世间万物皆可盼，唯有美景留心间'
},
{
src: 'https://pica.zhimg.com/v2-764199c9470ff436082f35610f1f81f4_1440w.jpg',
title: '拍自己喜欢的风景，记录简单美好的瞬间'
},
]
build() {
Column({ space: 10 }) {
Text('List练习')
List({ space: 10 }) {
ForEach(this.list, (item: ImageObj) => {
this.buildListItem(item)
})
ListItem().height(20)
}
.layoutWeight(1)
.scrollBar(BarState.Off)
}
.height('100%')
.width('100%')
}
@Builder
buildListItem(imageObj: ImageObj) {
ListItem() {
Row() {
Image(imageObj.src)
.width(200)
.height(150)
.aspectRatio(4 / 3)
Text(imageObj.title)
.layoutWeight(1)
.margin({left: 6, right: 6})
}
.width('100%')
}
.margin({ left: 20, right: 20 })
.backgroundColor(Color.White)
.borderRadius(6)
.clip(true)
.backgroundColor('#EEEEEE')
}
}
interface ImageObj {
src: string
title: string
}