HarmonyOS ArkUI --- List组件和Grid组件的使用

List组件和Grid组件的使用

简介

在我们常用的手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含列表，“首页”页面中包含两个网格布局，“商城”页面中包含一个商品列表。

上图中的列表中都包含一系列相同宽度的列表项，连续、多行呈现同类数据，例如图片和文本。常见的列表有线性列表（List列表）和网格布局（Grid列表）：

为了帮助开发者构建包含列表的应用，ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。

List组件的使用

List组件简介

List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。

使用ForEeach渲染列表

列表往往由多个列表项组成，所以我们需要在List组件中使用多个ListItem组件来构建列表，这就会导致代码的冗余。使用循环渲染（ForEach）遍历数组的方式构建列表，可以减少重复代码，示例代码如下：

1. @Entry
2. @Component
3. struct ListDemo {
4. private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
6. build() {
7. Column() {
8. List({ space: 10 }) {
9. ForEach(this.arr, (item: number) => {
10. ListItem() {
11. Text(`${item}`)
12. .width('100%')
13. .height(100)
14. .fontSize(20)
15. .fontColor(Color.White)
16. .textAlign(TextAlign.Center)
17. .borderRadius(10)
18. .backgroundColor(0x007DFF)
19. }
20. }, item => item)
21. }
22. }
23. .padding(12)
24. .height('100%')
25. .backgroundColor(0xF1F3F5)
26. }
27. }

效果图如下：

设置列表分割线

List组件子组件ListItem之间默认是没有分割线的，部分场景子组件ListItem间需要设置分割线，这时候您可以使用List组件的divider属性。divider属性包含四个参数：

• strokeWidth: 分割线的线宽。
• color: 分割线的颜色。
• startMargin：分割线距离列表侧边起始端的距离。
• endMargin: 分割线距离列表侧边结束端的距离。

  

List列表滚动事件监听

List组件提供了一系列事件方法用来监听列表的滚动，您可以根据需要，监听这些事件来做一些操作：

• onScroll：列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。
• onScrollIndex：列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。
• onReachStart：列表到达起始位置时触发。
• onReachEnd：列表到底末尾位置时触发。
• onScrollStop：列表滑动停止时触发。

使用示例代码如下：

1. List({ space: 10 }) {
2. ForEach(this.arr, (item) => {
3. ListItem() {
4. Text(`${item}`)
5. ...
6. }
7. }, item => item)
8. }
9. .onScrollIndex((firstIndex: number, lastIndex: number) => {
10. console.info('first' + firstIndex)
11. console.info('last' + lastIndex)
12. })
13. .onScroll((scrollOffset: number, scrollState: ScrollState) => {
14. console.info('scrollOffset' + scrollOffset)
15. console.info('scrollState' + scrollState)
16. })
17. .onReachStart(() => {
18. console.info('onReachStart')
19. })
20. .onReachEnd(() => {
21. console.info('onReachEnd')
22. })
23. .onScrollStop(() => {
24. console.info('onScrollStop')
25. })

设置List排列方向

List组件里面的列表项默认是按垂直方向排列的，如果您想让列表沿水平方向排列，您可以将List组件的listDirection属性设置为Axis.Horizontal。

listDirection参数类型是Axis，定义了以下两种类型：

• Vertical（默认值）：子组件ListItem在List容器组件中呈纵向排列。

  

• Horizontal：子组件ListItem在List容器组件中呈横向排列。

  

Grid组件的使用

Grid组件简介

Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。

使用ForEach渲染网格布局

和List组件一样，Grid组件也可以使用ForEach来渲染多个列表项GridItem，我们通过下面的这段示例代码来介绍Grid组件的使用。

1. @Entry
2. @Component
3. struct GridExample {
4. // 定义一个长度为16的数组
5. private arr: string[] = new Array(16).fill('').map((_, index) => `item ${index}`);
7. build() {
8. Column() {
9. Grid() {
10. ForEach(this.arr, (item: string) => {
11. GridItem() {
12. Text(item)
13. .fontSize(16)
14. .fontColor(Color.White)
15. .backgroundColor(0x007DFF)
16. .width('100%')
17. .height('100%')
18. .textAlign(TextAlign.Center)
19. }
20. }, item => item)
21. }
22. .columnsTemplate('1fr 1fr 1fr 1fr')
23. .rowsTemplate('1fr 1fr 1fr 1fr')
24. .columnsGap(10)
25. .rowsGap(10)
26. .height(300)
27. }
28. .width('100%')
29. .padding(12)
30. .backgroundColor(0xF1F3F5)
31. }
32. }

示例代码中创建了16个GridItem列表项。同时设置columnsTemplate的值为'1fr 1fr 1fr 1fr'，表示这个网格为4列，将Grid允许的宽分为4等分，每列占1份；rowsTemplate的值为'1fr 1fr 1fr 1fr'，表示这个网格为4行，将Grid允许的高分为4等分，每行占1份。这样就构成了一个4行4列的网格列表，然后使用columnsGap设置列间距为10vp，使用rowsGap设置行间距也为10vp。示例代码效果图如下：

上面构建的网格布局使用了固定的行数和列数，所以构建出的网格是不可滚动的。然而有时候因为内容较多，我们通过滚动的方式来显示更多的内容，就需要一个可以滚动的网格布局。我们只需要设置rowsTemplate和columnsTemplate中的一个即可。

将示例代码中GridItem的高度设置为固定值，例如100；仅设置columnsTemplate属性，不设置rowsTemplate属性，就可以实现Grid列表的滚动：

1. Grid() {
2. ForEach(this.arr, (item: string) => {
3. GridItem() {
4. Text(item)
5. .height(100)
6. ...
7. }
8. }, item => item)
9. }
10. .columnsTemplate('1fr 1fr 1fr 1fr')
11. .columnsGap(10)
12. .rowsGap(10)
13. .height(300)

此外，Grid像List一样也可以使用onScrollIndex来监听列表的滚动。

列表性能优化

开发者在使用长列表时，如果直接采用循环渲染方式，会一次性加载所有的列表元素，从而导致页面启动时间过长，影响用户体验，推荐通过以下方式来进行列表性能优化：

使用数据懒加载

设置list组件的宽高