List组件
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。
子组件
包含ListItem子组件。
接口
List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
space | number | string | 否 | 列表项间距。 默认值:0 |
initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值,则设置不生效。 默认值:0 |
scroller | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
属性
名称 | 参数类型 | 描述 |
---|---|---|
listDirection | 设置List组件排列方向参照Axis枚举说明。 默认值:Vertical | |
divider | { strokeWidth: Length, color?: ResourceColor, startMargin?: Length, endMargin?: Length } | null | 用于设置ListItem分割线样式,默认无分割线。 strokeWidth: 分割线的线宽。 color: 分割线的颜色。 startMargin: 分割线与列表侧边起始端的距离。 endMargin: 分割线与列表侧边结束端的距离。 |
scrollBar | 设置滚动条状态。 默认值:BarState.Off | |
cachedCount | number | 设置预加载的ListItem的数量。具体使用可参考减少应用白块说明。 默认值:1 |
editMode | boolean | 声明当前List组件是否处于可编辑模式。 默认值:false |
edgeEffect | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值:EdgeEffect.Spring | |
chainAnimation | boolean | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。 - false:不启用链式联动。 - true:启用链式联动。 默认值:false |
multiSelectable8+ | boolean | 是否开启鼠标框选。 >默认值:false - false:关闭框选。 - true:开启框选。 |
父子组件(自定义组件)
子组件导出用export语句
父组件导入用import {子组件文件名称} from "子组件文件相对路径"
双向数据绑定
改变任何一方数据时,两方数据都会变为改变的一方数据
子组件中数据用@Link修饰
父组件中用@State修饰,在子组件接口中数据用$修饰
条件渲染
使用if/else进行条件渲染。
说明
-
某些容器组件限制子组件的类型或数量,将if/else用于这些组件内时,这些限制将同样应用于if/else语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用if/else时,则if/else语句内也仅允许使用GridItem组件。
- Column() {
- if (this.count < 0) {
- Text('count is negative').fontSize(14)
- } else if (this.count % 2 === 0) {
- Text('count is even').fontSize(14)
- } else {
- Text('count is odd').fontSize(14)
- }
- }
循环渲染
通过循环渲染(ForEach)从数组中获取数据,并为每个数据项创建相应的组件,可减少代码复杂度。
- ForEach(
- arr: any[],
- itemGenerator: (item: any, index?: number) => void,
- keyGenerator?: (item: any, index?: number) => string
- )
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
arr | any[] | 是 | 必须是数组,允许设置为空数组,空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数,例如arr.slice(1, 3),设置的函数不得改变包括数组本身在内的任何状态变量,如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
itemGenerator | (item: any, index?: number) => void | 是 | 生成子组件的lambda函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。 |
keyGenerator | (item: any, index?: number) => string | 否 | 匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则ForEach中的所有节点都将重建。 |
说明
-
itemGenerator函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正常工作:
- ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
- item => Text(`${item.i}. item.data.label`),
- item => item.data.id.toString())