运用list组件丰富页面

本博客由 金陵科技学院-开放原子开源社 陈桑誉文编写

list组件介绍

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
list组件包含两个子组件，分别为ListItem与ListItemGroup。其中ListItemGroup组件用来展示列表item分组，它包含ListItem组件。ListItem组件用于展示具体的item，我们在此拿这个组件来展示。

下图为一个基础的包含list组件的示例页面（具体代码在文末）

list组件接口

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

接口参数介绍

space:
此参数用于子组件主轴方向的间隔。默认值为0，支持number和string类型。我们可以用此参数设置list子组件在其主轴方向的间隔。

initialIndex:
此参数用于设置当前List初次加载时视口起始位置显示的item的索引值。默认值为0，但当设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值，无效取值按默认值显示，也就是0。

scroller:
此参数为可滚动组件的控制器。用于与可滚动组件进行绑定。

list组件属性与事件

由于editMode属性在api9被废弃，用于声明当前List组件是否处于可编辑模式。在此不多做介绍。

listDirection：
此属性设置List组件排列方向。支持的参数有Vertical和Horizontal。
当为Vertical时：

.listDirection(Axis.Vertical)//为纵向排列，也就是竖着的排列，与上方示例的图一样

当为Horizontal时：

.listDirection(Axis.Horizontal)//为横向排列，为了演示我修改了一下比例

divider：
此属性用于设置ListItem分割线样式，具体可以填入以下参数。需要注意的是此分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。在多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。

{strokeWidth: Length,color:ResourceColor,startMargin?: Length,endMargin?: Length} | null

示例：

.divider({strokeWidth:2,color:Color.White})//线宽2，颜色为白色的分割线

scrollBar：
此属性用于设置滚动条状态。默认为关
在开启时，它的效果为:

.scrollBar(BarState.On)

cachedCount：
此属性用于设置列表中ListItem/ListItemGroup的预加载数量，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。再listitem数量大或者加载多个图片时，可以使用本属性来提前加载数据以获取更流畅的使用体验，不过会增加cpu、内存开销。在使用时还是要依据实际需要来确定预加载数量。

edgeEffect：
此属性用来设置组件的滑动到边缘时的效果。有EdgeEffect.Spring,EdgeEffect.Fade,EdgeEffect.None三种效果。在设置为fade下，为阴影效果，在滑动到边缘后会有圆弧状的阴影。如下图顶端所示：

.edgeEffect(EdgeEffect.Fade)

在设置为spring下，将会根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹：

.edgeEffect(EdgeEffect.Spring)

在设置为none时，不会有任何效果。

chainAnimation：
此属性用于设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。默认是关闭，开启后的效果如下：

.chainAnimation(true)

multiSelectable：
此属性为是否开启鼠标框选。

lanes：
lanes用于决定List组件在交叉轴方向按几列布局。
其规则如下

• lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
• lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。
• lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算。
• ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
• lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。

.lanes(2)

示例代码

@Entry
@Component
struct Index {
  @State arr:number[]=[0,1,2,3,4,5,6,7,8,9,10,11,12]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(32)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.White)
          }
        }, item => item)
      }
      //.listDirection(Axis.Horizontal)//排列方式
      //.divider({strokeWidth:2,color:Color.White})//list分割线
      //.scrollBar(BarState.On)//滑动块
      //.cachedCount(2)//预加载
      //.edgeEffect(EdgeEffect.None)//边缘效果
      //.chainAnimation(true)//联动效果
      //.multiSelectable(true)//鼠标框选
      //.lanes(2)//列
      .width('80%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .padding({ top: 5 })
  }

}

新人发帖，如果文中有错误，欢迎大家在评论区指正。