鸿蒙应用开发从入门到实战（十七）：ArkUI组件List&列表布局

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文通过简单案例演示如何使用List组件实现列表布局。
一、List布局优化商品列表

上一小节里的商品列表，随着数据增多，当超出界面后，无法滚动查看。List列表布局就可以解决这个问题。
List列表是一种复杂容器，具备下列特点：

• 列表项ListItem数量过多超出屏幕后，会自动提供滚动功能
  
• 列表项ListItem既可以纵向排列，也可以横向排列
  

再pages/layout下新建list目录，新建ProductList.ets文件，将上一小节里的代码文件ProductListPage.ets文件里的内容拷贝过来进行修改。
将ForEach部分的内容放到List组件里即可

1. class Item1 { // 复制过来后，即使再不同的文件中，也会提示同名
2.   name: string //小写
3.   image: ResourceStr
4.   price: number
5.   discount: number
7.   constructor(name: string, image: ResourceStr, price: number, discount: number = 0) {
8.     this.name = name
9.     this.image = image
10.     this.price = price
11.     this.discount = discount
12.   }
13. }
15. @Entry
16. @Component
17. struct ProductList {
18.   // 商品数据
19.   private items: Array<Item1> = [
20.     new Item1('华为Mate60', $r('app.media.mate60'), 6999, 500),
21.     new Item1('MateBookProX', $r('app.media.mate60'), 13999),
22.     new Item1('WatchGT4', $r('app.media.mate60'), 1438),
23.     new Item1('FreeBuds Pro3', $r('app.media.mate60'), 1499),
24.     new Item1('FreeBuds Pro3', $r('app.media.mate60'), 199),
25.     new Item1('Mate X5', $r('app.media.mate60'), 12999)
26.   ]
28.   build() {
29.     Column({ space: 8 }) {
30.       // 标题
31.       Row() {
32.         Text('商品列表')
33.           .fontSize(30)
34.           .fontWeight(FontWeight.Bold)
35.       }
36.       .width('100%')
37.       // .height(30) //控制高度
38.       .margin({ bottom: 20 })
40.       // 商品列表
41.       List({ space: 8 }) {
42.         ForEach(
43.           this.items,
44.           (item: Item1) => {
45.             ListItem() {  //ListItem子元素必须用根元素包裹
46.               Row({ space: 10 }) {
47.                 Image(item.image)
48.                   .width(100)
49.                 Column({ space: 4 }) {
50.                   if (item.discount) {
51.                     Text(item.name)
52.                       .fontSize(20)
53.                       .fontWeight(FontWeight.Bold)
54.                     Text('原价：￥' + item.price)
55.                       .fontColor('#CCC')
56.                       .fontSize(14)
57.                       .decoration({ type: TextDecorationType.LineThrough })
58.                     Text('折扣价：￥' + (item.price - item.discount))
59.                       .fontColor('#F36')
60.                       .fontSize(18)
61.                     Text('补贴：￥' + item.discount)
62.                       .fontColor('#F36')
63.                       .fontSize(18)
64.                   } else {
65.                     Text(item.name)
66.                       .fontSize(20)
67.                       .fontWeight(FontWeight.Bold)
68.                     Text('￥' + item.price)
69.                       .fontColor('#F36')
70.                       .fontSize(18)
71.                   }
72.                 }
73.                 .height('100%')
74.                 .alignItems(HorizontalAlign.Start)
75.               }
76.               .width('100%')
77.               .backgroundColor('#FFF')
78.               .borderRadius(20)
79.               .height(120)
80.               .padding(10)
81.             }
82.           }
83.         )
84.       }
85.       .width('100%')
86.       // .layoutWeight(1)
87.     }
88.     .width('100%')
89.     .height('100%')
90.     .backgroundColor('#EFEFEF')
91.     .padding(20)
92.   }
93. }

复制代码

这样，就可以通过拖动呈现超过屏幕区的内容。
二、列表布局详解

2.1 概述

List是一个功能强大的容器组件，使用List可以轻松高效地显示结构化、可滚动的列表信息，例如通讯录、新闻列表等等。

List容器的子组件为ListItem或者ListItemGroup，其中，ListItem表示单个列表项，ListItemGroup用于列表数据的分组展示，其子组件也是ListItem，具体用法如下

1. List() {
2.   // 列表项
3.   ListItem() {......}
4.   ListItem() {......}
5.   ListItem() {......}
6.   ListItem() {......}
7.   ListItem() {......}
8.   ListItem() {......}
9.   ListItem() {......}
10.   ListItem() {......}
11.   ListItem() {......}
12.   ListItem() {......}
13.   ListItem() {......}
14.   ListItem() {......}
15. }

复制代码

效果

1. List() {
2.   // 列表组
3.   ListItemGroup(){
4.     //列表项
5.     ListItem(){......}
6.     ListItem(){......}
7.   }
9.   ListItemGroup(){
10.     ListItem(){......}
11.     ListItem(){......}
12.   }
13.   
14.   ListItemGroup(){
15.     ListItem(){......}
16.     ListItem(){......}
17.   }
18. }

复制代码

效果

2.2 参数

List 组件的参数定义如下，下面逐一介绍每个参数

1. 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

1. @Entry
2. @Component
3. struct ScrollerPage {
4.   data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
5.   scroller: Scroller = new Scroller();
7.   build() {
8.     Stack({ alignContent: Alignment.BottomEnd }) {
9.       List({ space: 20, scroller: this.scroller }) {
10.         ForEach(this.data, (item) => {
11.           ListItem() {
12.             Text(item.toString())
13.               .itemTextStyle()
14.           }
15.         })
16.       }.listStyle()
17.       .height('100%')
18.       .width('100%')
20.       Button({ type: ButtonType.Circle }) {
21.         Image($r('app.media.icon_top'))
22.           .width(40)
23.           .height(40)
24.       }
25.       .width(60)
26.       .height(60)
27.       .backgroundColor(Color.Orange)
28.       .offset({ x: -20, y: -100 })
29.       .onClick(() => {
30.         this.scroller.scrollToIndex(0)
31.       })
32.     }
33.   }
34. }
36. @Extend(Text) function itemTextStyle() {
37.   .height(80)
38.   .width('100%')
39.   .textAlign(TextAlign.Center)
40.   .fontColor(Color.White)
41.   .fontSize(40)
42.   .fontWeight(FontWeight.Bold)
43.   .backgroundColor('#008a00')
44.   .borderRadius(10)
45. }
47. @Extend(List) function listStyle() {
48.   .backgroundColor(Color.White)
49.   .padding(20)
50. }

复制代码

2.3 常用属性

2.3.1 主轴方向

使用listDirection()方法可以设置列表的主轴方向（即列表的排列和滚动方向），其参数类型为枚举类型Axis，可选的枚举值如下

2.3.2 交叉轴对齐方式

使用alignListItem()方法可以设置子组件在交叉轴方向的对齐方式，其参数类型为枚举类型ListItemAlign，可选的枚举值有

示例代码
pages /layout/list新建AlignPage.ets

1. @Entry
2. @Component
3. struct AlignPage {
4.   data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
6.   build() {
8.     List({ space: 20 }) {
9.       ForEach(this.data, (item) => {
10.         ListItem() {
11.           Text(item.toString())
12.             .height(80)
13.             .width(320)
14.             .itemTextStyle1()
15.         }
16.       })
17.     }.listStyle1()
18.     .height('100%')
19.     .width('100%')
20.     .alignListItem(ListItemAlign.Center)
22.   }
23. }
25. @Extend(Text) function itemTextStyle1() {  //同一个命名空间下不能重复，否则会报错
26.   .textAlign(TextAlign.Center)
27.   .fontColor(Color.White)
28.   .fontSize(40)
29.   .fontWeight(FontWeight.Bold)
30.   .backgroundColor('#008a00')
31.   .borderRadius(10)
32. }
34. @Extend(List) function listStyle1() {
35.   .backgroundColor(Color.White)
36.   .padding({ top: 20, bottom: 20 })
37. }

复制代码

2.3.3 元素分割线

使用divider()属性可设置列表元素分割线样式，该方法的参数定义如下

1. divider(value: {strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length})

复制代码

各参数的含义如下
参数含义strokeWidth分割线线宽color分割线颜色startMargin分割线起始端到列表侧边距离（如下图所示）endMargin分割线末端到列表侧边距离（如下图所示）

示例代码
pages /layout/list新建DividerPage.ets

1. @Entry
2. @Component
3. struct DividerPage {
4.   data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
6.   build() {
8.     List({ space: 20 }) {
9.       ForEach(this.data, (item) => {
10.         ListItem() {
11.           Text(item.toString())
12.             .height(80)
13.             .width(320)
14.             .itemTextStyle2()
15.         }
16.       })
17.     }
18.     .listStyle2()
19.     .height('100%')
20.     .width('100%')
21.     .alignListItem(ListItemAlign.Center)
22.     .divider({
23.       strokeWidth: 1,
24.       color: Color.Orange,
25.       startMargin: 30,
26.       endMargin: 30
27.     })
29.   }
30. }
32. @Extend(Text) function itemTextStyle2() {
33.   .textAlign(TextAlign.Center)
34.   .fontColor(Color.White)
35.   .fontSize(40)
36.   .fontWeight(FontWeight.Bold)
37.   .backgroundColor('#008a00')
38.   .borderRadius(10)
39. }
41. @Extend(List) function listStyle2() {
42.   .backgroundColor(Color.White)
43.   .padding({ top: 20, bottom: 20 })
44. }

复制代码

2.3.4 滚动条样式

使用scrollBar()方法可以设置滚动条状态，该方法的参数类型为枚举类型BarState，可选的枚举值如下
名称描述BarState.Off不显示BarState.On常驻显示BarState.Auto按需显示(触摸时显示，2s后消失)示例代码
pages /layout/list新建ScrollBarPage.ets

1. @Entry
2. @Component
3. struct ScrollBarPage {
4.   data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
6.   build() {
8.     List({ space: 20 }) {
9.       ForEach(this.data, (item) => {
10.         ListItem() {
11.           Text(item.toString())
12.             .height(80)
13.             .width(320)
14.             .itemTextStyle3()
15.         }
16.       })
17.     }.listStyle3()
18.     .height('100%')
19.     .width('100%')
20.     .alignListItem(ListItemAlign.Center)
21.     .scrollBar(BarState.Auto)
23.   }
24. }
26. @Extend(Text) function itemTextStyle3() {
27.   .textAlign(TextAlign.Center)
28.   .fontColor(Color.White)
29.   .fontSize(40)
30.   .fontWeight(FontWeight.Bold)
31.   .backgroundColor('#008a00')
32.   .borderRadius(10)
33. }
35. @Extend(List) function listStyle3() {
36.   .backgroundColor(Color.White)
37.   .padding({ top: 20, bottom: 20 })
38. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！