鸿蒙学习笔记 08 列表

引言

如果你在上篇文章中, 尝试过了多几个内容的话, 你就会发现, 他们居然超出了屏幕的范围! 而且我们是不能通过滑动来查看下面的内容的!

为了解决这个问题, 我们就需要使用今天学习的这个内容了: List容器

对于List容器, 可以代替Column, 一旦内容过多, 就可以自动的允许滚动了; 另外, List也是可以横着走的, 所以非常常用.

使用List

其实说简单太简单了, 首先, 我们要明确, 有List列表, 就一定有ListItem列表项. 这两个东西都是一种组件, 那么聪明的你绝对已经知道怎么做了吧?

注意, ListItem中, 只能有一个根组件, 如果你需要有多个组件, 可以用一个Row或者其他容器进行包裹.

只需要外层为List容器, 内层为ListItem不久可以了吗? 我们来试一试:

@Entry
@Component
struct Index {
  build() {
    // 原本Column
    List({ space: 20 }) {
      ForEach(items, (item: Item) => {
        // 原本直接是组件
        ListItem(){
          Good({ text1: item.text1, text2: item.text2 })
        }
      })
    }
    .width("100%")
  }
}

恭喜, 目前我们已经实现了想要的效果了!

常用属性

.listDirection

首先当然就是方向了, 你可以设置列表的方向, 进而实现一个左右滑动的效果, 常用于菜单之类的地方

.divider

顾名思义, 就是一个分割线, 不需要手动写一个Divider()组件, 直接就可以自动添加. 使用这个属性, 需要传入一些配置项:

• strokeWidth: 分割线的线宽
• color: 分割线的颜色
• startMargin：分割线距离左边, 上边的距离
• endMargin: 分割线距离右边, 下边的距离

@Entry
@Component
struct Index {
  build() {
    List({ space: 20 }) {
      ForEach(items, (item: Item) => {
        ListItem(){
          Good({ text1: item.text1, text2: item.text2 })
        }
      })
    }
    .width("100%")
    .divider({
      strokeWidth: 2,
      color: Color.Black,
      startMargin: 20,
      endMargin: 20
    })
  }
}

随后就可以实现如下的效果:

常用事件

虽然说, 列表就是一个展示容器, 不过说不定你会需要往下滑动刷新之类的情况. 所以这里还是介绍一下一些方法:

• .onReachStart(): 当滑动到顶部的时候会调用这个函数
• .onReachEnd(): 当滑动到底部的时候会调用这个函数

其实这些东西都是可以用.来查看的:

实在需要的时候, 就自己试一试吧~

End

本篇文章虽然很短, 不过也是最常用的部分了, 希望能够帮到你!