鸿蒙组件学习_List组件

说明

该组件从API Version 7开始支持。
该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。

子组件

包含ListItem、ListItemGroup子组件。

List的子组件索引值计算规则

if/else语句中，只有条件成立的分支内的子组件会参与索引值的计算
ListItemGroup作为一个整体计算一个索引值, ListItemGroup内部的ListItem不计算索引值。
List子组件visibility属性设置为Hidden或None依然会计算索引值。
List子组件的visibility属性设置为None时不显示,但该子组件上下的space还会生效。

List参数
space   子组件主轴方向的间隔
initialIndex    设置当前List初次加载时视口起始位置显示的item的索引值(默认值: 0)
scroller    可滚动组件的控制器。用于与可滚动组件进行绑定。

List属性
listDirection   设置List组件的排列方向
    Axis.Horizontal 水平方向列表
    Axis.Vertical   垂直方向列表
divider     设置ListItem分割线样式，默认无分割线。
    - strockWidth   分割线的线宽
    - color         分割线的颜色
    - startMargin   分割线与列表侧边起始端的距离
    - endMargin     分割线与列表侧边结束端的距离
editMode    声明当前List组件是否处于可编辑模式
edgeEffect  设置组件的滑动效果
chainAnimation  设置当前List是否启用链式联动特效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。默认值(false)
multiSelectable 是否开启鼠标框选，默认(false)
lanes   设置交叉轴呈几列显示
alignListItem   
sticky  配合ListItemGroup组件使用，设置ListItemGroup中的header和footer是否要吸顶或吸底

List事件
onScroll        列表滑动时触发
onReachStart    回到列表起点时触发
onReachEnd      到达列表终点是触发

@Entry
@Component
struct List_test{
  private arr: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
  build(){
    Column(){
      List({space: 10}) {
        ForEach(this.arr,(item: number) => {
          ListItem(){
            Text('任务' + item.toString())
          }.visibility(Visibility.Visible)
          .selectable(true)
        }, (item) => JSON.stringify(item))
      }.listDirection(Axis.Vertical)
      .divider({
        color: Color.Blue,
        strokeWidth: 10,
        startMargin: 5,
        endMargin: 5
      })
      .chainAnimation(true)
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
      .cachedCount(5)
      .lanes(1)
      .alignListItem(ListItemAlign.Center)
      .sticky(StickyStyle.Header)
      .onScroll(() => {
        console.log('List moved')
      })
      .onReachStart(() => {
        console.log('return to start')
      })
      .onReachEnd(() => {
        console.log('come to end')
      })
    }
  }
}

ListItem组件

说明

该组件从API Version 7 开始支持。

子组件

可以包含单个子组件

接口

ListItem(value?:string)
从API version 9 开始, 该接口支持在ArkTS卡片中使用

selectable  当前ListItem元素是否可以被鼠标框选
swiperAction    用于设置ListItem的划出组件
    start: 自定义@build函数
    end: 自定义@build函数
    edgeEffect: SwiperEdgeEffect