HarmonyOS List列表组件基础讲解

本文 我们来说一个新的布局 列表布局
需要认识一个新的组件 list组件
这是一个相对有些复杂的容器组件 带有一些好用的功能

其中 最关键的点在于 比如 你Column容器中 多个元素 到超出时 他会将多的部分给你隐藏掉 看不到了
而 list 会提供上下滚动的一个效果

而且 list 它直接 竖向 也支持 横向排列 是非常灵活的

那么来 我们还是在界面中 写一个 List组件 然后鼠标移入它 点击进入API

它这里 有三个参数

space 这个大家不要太熟啦 控制内部元素间的间隔距离
initialIndex 是这个组件 初次加载 索引值的位置 这个参数有点多余说实话 直接给0 或者不设置就好了 默认值就是 0
scroller 则是个 滚动属性的控制器 Scroller 类型

我们可以这样写

@Entry
@Component
struct Dom {
   
  scrollerint: Scroller = new Scroller()
  build() {
   
    Row() {
   
      Column() {
   
        Text("你哈世界")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        List({
   
          space: 30,
          initialIndex: 0,
          scroller: this.scrollerint
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

new Scroller 创建一个滚动控制器 然后 initialIndex我们让它索引从0开始 space 内部元素 间隔 30vp

属性的话 它也有 所有组件都有的 height 高度 width 宽度 border 边框等等属性
然后 它内部组件 必须在 ListItem容器中 我们可以编写代码如下

@Entry
@Component
struct Dom {
   
  scrollerint: Scroller = new Scroller();
  @State StringArr:string[] = ["小猫猫哦","小狗狗","大狗熊"];

  build() {
   
    Row() {
   
      Column() {
   
        List({
   
          space: 30,
          initialIndex: 0,
          scroller: this.scrollerint
        }) {
   
          ForEach(
            this.StringArr,
            (item,index)=>{
   
              ListItem(){
   
                  Text(item+" 元素下标为"+index)
              }
            }
          )
        }
        .width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

这里 我们将 List 组件的 高宽都设置 百分之百 然后 在它里面 写了个 ForEach循环 循环我们上面定义的 StringArr 字符串数组
然后 我们之前说过 List 下的元素都要用 ListItem 容器包裹起来 不用会报错
然后 里面用text组件展示内容

运行结果如下

没有任何问题

然后 我们将List 组件高度 调整为 50vp

我们鼠标上下拖动内容

它是可以进行滚动的

这就是 list列表组件的好处

listDirection 属性 控制排序的方向 也是非常的舒服

Axis类型的 我们可以在 list组件下面的属性中写上

.listDirection(Axis.)

编辑器提示就会告诉你下面有什么

默认值是 Axis.Vertical 竖向的
我们改成 Axis.Horizontal
他的排序就横过来了

还可以进行横向拖动

事件中这些 滑动触发的 自然也是逃不掉 但这里只是简单讲解使用 后续大家可以自行研究