《HarmonyOS应用开发基础》 课件知识点2-12-2 列表容器组件List.pptx

列表容器组件List

List概述List列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。如右图所示。子组件：ListItem、ListItemGroup接口描述：List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})

List的参数参数说明：参数名参数类型必填参数描述spacenumber|string否列表项间距。默认值：0initialIndexnumber否设置当前List初次加载时起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值，则设置不生效。默认值：0scrollerScroller否可滚动组件的控制器。用于与可滚动组件进行绑定。

List的属性List除支持通用属性外，还支持以下属性。名称参数类型描述listDirectionAxis设置List组件排列方向。默认值：Axis.Verticaldivider{strokeWidth:?Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null设置ListItem分割线样式，默认无分割线。-strokeWidth:分割线的线宽。-color:分割线的颜色。-startMargin:分割线与列表侧边起始端的距离。-endMargin:分割线与列表侧边结束端的距离。edgeEffectEdgeEffect设置组件的滑动效果。默认值：EdgeEffect.Spring

List属性的使用private?arr:?number[]?=?[0,?1,?2,?3,?4,?5,?6,?7,?8,?9]...??????List({?space:?20,?initialIndex:?0?})?{????????ForEach(this.arr,?(item)?=?{??????????ListItem()?{????????????Text(?+?item)??????????????.width(100%)??????????????.height(100)??????????????.fontSize(16)??????????????.textAlign(TextAlign.Center)??????????????.borderRadius(10)??????????????.backgroundColor(#FFFFFF)??????????}????????},?item?=?item)??????}??????.listDirection(Axis.Vertical)?//?排列方向??????.divider({?strokeWidth:?2,?color:?#FFFFFF,?startMargin:?20,?endMargin:?20?})?//?每行之间的分界线??????.edgeEffect(EdgeEffect.None)?//?滑动到边缘无效果??????.chainAnimation(false)?//?联动特效关闭

List的事件List提供的事件有很多，这里我们只介绍onReachStart和onReachEnd。onReachStart(event:()=void)：列表到达起始位置时触发。onReachEnd(event:()=void)：列表到底末尾位置时触发。List(){...省略子组件}...省略List属性.onReachStart(()?=?{??console.info(列表已到达顶端)}).onReachEnd(()?=?{??console.info(列表已到达底部)})

扩展：ListItemGroupListItemGroup用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。接口说明：ListItemGroup(options?:{header?:CustomBuilder,footer?:CustomBuilder,space?:number|string})使用说明：当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时，不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时，不允许设置ListItemGroup组件的width属性。L