大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了丰富的系统组件，用于制作鸿蒙原生应用 APP 的 UI，本文通过简单案例演示如何使用 List 组件实现列表布局。
一、List 布局优化商品列表
上一小节里的商品列表，随着数据增多，当超出界面后，无法滚动查看。List 列表布局就可以解决这个问题。
List 列表是一种复杂容器，具备下列特点：
再 pages/layout 下新建 list 目录，新建 ProductList.ets 文件，将上一小节里的代码文件 ProductListPage.ets 文件里的内容拷贝过来进行修改。
将 ForEach 部分的内容放到 List 组件里即可
class Item1 { // 复制过来后，即使再不同的文件中，也会提示同名 name: string //小写 image: ResourceStr price: number discount: number
constructor(name: string, image: ResourceStr, price: number, discount: number = 0) { this.name = name this.image = image this.price = price this.discount = discount }}
@Entry@Componentstruct ProductList { // 商品数据 private items: Array<Item1> = [ new Item1('华为Mate60', $r('app.media.mate60'), 6999, 500), new Item1('MateBookProX', $r('app.media.mate60'), 13999), new Item1('WatchGT4', $r('app.media.mate60'), 1438), new Item1('FreeBuds Pro3', $r('app.media.mate60'), 1499), new Item1('FreeBuds Pro3', $r('app.media.mate60'), 199), new Item1('Mate X5', $r('app.media.mate60'), 12999) ]
build() { Column({ space: 8 }) { // 标题 Row() { Text('商品列表') .fontSize(30) .fontWeight(FontWeight.Bold) } .width('100%') // .height(30) //控制高度 .margin({ bottom: 20 })
// 商品列表 List({ space: 8 }) { ForEach( this.items, (item: Item1) => { ListItem() { //ListItem子元素必须用根元素包裹 Row({ space: 10 }) { Image(item.image) .width(100) Column({ space: 4 }) { if (item.discount) { Text(item.name) .fontSize(20) .fontWeight(FontWeight.Bold) Text('原价：￥' + item.price) .fontColor('#CCC') .fontSize(14) .decoration({ type: TextDecorationType.LineThrough }) Text('折扣价：￥' + (item.price - item.discount)) .fontColor('#F36') .fontSize(18) Text('补贴：￥' + item.discount) .fontColor('#F36') .fontSize(18) } else { Text(item.name) .fontSize(20) .fontWeight(FontWeight.Bold) Text('￥' + item.price) .fontColor('#F36') .fontSize(18) } } .height('100%') .alignItems(HorizontalAlign.Start) } .width('100%') .backgroundColor('#FFF') .borderRadius(20) .height(120) .padding(10) } } ) } .width('100%') // .layoutWeight(1) } .width('100%') .height('100%') .backgroundColor('#EFEFEF') .padding(20) }}
复制代码
这样，就可以通过拖动呈现超过屏幕区的内容。
二、列表布局详解
2.1 概述
List 是一个功能强大的容器组件，使用 List 可以轻松高效地显示结构化、可滚动的列表信息，例如通讯录、新闻列表等等。
List 容器的子组件为 ListItem 或者 ListItemGroup，其中，ListItem 表示单个列表项，ListItemGroup 用于列表数据的分组展示，其子组件也是 ListItem，具体用法如下
List() { // 列表项 ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......} ListItem() {......}}
复制代码
效果
List() { // 列表组 ListItemGroup(){ //列表项 ListItem(){......} ListItem(){......} }
ListItemGroup(){ ListItem(){......} ListItem(){......} } ListItemGroup(){ ListItem(){......} ListItem(){......} }}
复制代码
效果
2.2 参数
List 组件的参数定义如下，下面逐一介绍每个参数
List(value?:{space?: number | string, scroller?: Scroller})
复制代码
2.2.1 列表项间距
space参数用于设置列表项的间距，如下图所示
2.2.2 列表滚动控制器
scroller参数用于绑定列表滚动控制器（Scroller），Scroller 可以控制列表的滚动，例如令列表返回顶部
示例：
拷贝 icon-top.png 到 resources/base/media 目录
pages /layout/list 新建 ScrollerPage.ets
@Entry@Componentstruct ScrollerPage { data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] scroller: Scroller = new Scroller();
build() { Stack({ alignContent: Alignment.BottomEnd }) { List({ space: 20, scroller: this.scroller }) { ForEach(this.data, (item) => { ListItem() { Text(item.toString()) .itemTextStyle() } }) }.listStyle() .height('100%') .width('100%')
Button({ type: ButtonType.Circle }) { Image($r('app.media.icon_top')) .width(40) .height(40) } .width(60) .height(60) .backgroundColor(Color.Orange) .offset({ x: -20, y: -100 }) .onClick(() => { this.scroller.scrollToIndex(0) }) } }}
@Extend(Text) function itemTextStyle() { .height(80) .width('100%') .textAlign(TextAlign.Center) .fontColor(Color.White) .fontSize(40) .fontWeight(FontWeight.Bold) .backgroundColor('#008a00') .borderRadius(10)}
@Extend(List) function listStyle() { .backgroundColor(Color.White) .padding(20)}
复制代码
2.3 常用属性
2.3.1 主轴方向
使用listDirection()方法可以设置列表的主轴方向（即列表的排列和滚动方向），其参数类型为枚举类型 Axis，可选的枚举值如下
2.3.2 交叉轴对齐方式
使用alignListItem()方法可以设置子组件在交叉轴方向的对齐方式，其参数类型为枚举类型ListItemAlign，可选的枚举值有
示例代码
pages /layout/list 新建 AlignPage.ets
@Entry@Componentstruct AlignPage { data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
build() {
List({ space: 20 }) { ForEach(this.data, (item) => { ListItem() { Text(item.toString()) .height(80) .width(320) .itemTextStyle1() } }) }.listStyle1() .height('100%') .width('100%') .alignListItem(ListItemAlign.Center)
}}
@Extend(Text) function itemTextStyle1() { //同一个命名空间下不能重复，否则会报错 .textAlign(TextAlign.Center) .fontColor(Color.White) .fontSize(40) .fontWeight(FontWeight.Bold) .backgroundColor('#008a00') .borderRadius(10)}
@Extend(List) function listStyle1() { .backgroundColor(Color.White) .padding({ top: 20, bottom: 20 })}
复制代码
2.3.3 元素分割线
使用divider()属性可设置列表元素分割线样式，该方法的参数定义如下
divider(value: {strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length})
复制代码
各参数的含义如下
示例代码
pages /layout/list 新建 DividerPage.ets
@Entry@Componentstruct DividerPage { data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
build() {
List({ space: 20 }) { ForEach(this.data, (item) => { ListItem() { Text(item.toString()) .height(80) .width(320) .itemTextStyle2() } }) } .listStyle2() .height('100%') .width('100%') .alignListItem(ListItemAlign.Center) .divider({ strokeWidth: 1, color: Color.Orange, startMargin: 30, endMargin: 30 })
}}
@Extend(Text) function itemTextStyle2() { .textAlign(TextAlign.Center) .fontColor(Color.White) .fontSize(40) .fontWeight(FontWeight.Bold) .backgroundColor('#008a00') .borderRadius(10)}
@Extend(List) function listStyle2() { .backgroundColor(Color.White) .padding({ top: 20, bottom: 20 })}
复制代码
2.3.4 滚动条样式
使用scrollBar()方法可以设置滚动条状态，该方法的参数类型为枚举类型BarState，可选的枚举值如下
示例代码
pages /layout/list 新建 ScrollBarPage.ets
@Entry@Componentstruct ScrollBarPage { data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
build() {
List({ space: 20 }) { ForEach(this.data, (item) => { ListItem() { Text(item.toString()) .height(80) .width(320) .itemTextStyle3() } }) }.listStyle3() .height('100%') .width('100%') .alignListItem(ListItemAlign.Center) .scrollBar(BarState.Auto)
}}
@Extend(Text) function itemTextStyle3() { .textAlign(TextAlign.Center) .fontColor(Color.White) .fontSize(40) .fontWeight(FontWeight.Bold) .backgroundColor('#008a00') .borderRadius(10)}
@Extend(List) function listStyle3() { .backgroundColor(Color.White) .padding({ top: 20, bottom: 20 })}
复制代码
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论