网站导航
> 文档中心 > 【无标题】

【无标题】

网友: 文档中心 2023-02-09 16:48:04

List组件

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

  • 该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。

子组件

包含ListItem子组件。

接口

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

参数：

参数名

参数类型

必填

参数描述

space

number | string

否

列表项间距。

默认值：0

initialIndex

number

否

设置当前List初次加载时视口起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值，则设置不生效。

默认值：0

scroller

Scroller

否

可滚动组件的控制器。用于与可滚动组件进行绑定。

属性

名称

参数类型

描述

listDirection

Axis

设置List组件排列方向参照Axis枚举说明。

默认值：Vertical

divider

{

strokeWidth: Length,

color?: ResourceColor,

startMargin?: Length,

endMargin?: Length

} | null

用于设置ListItem分割线样式，默认无分割线。

strokeWidth: 分割线的线宽。

color: 分割线的颜色。

startMargin： 分割线与列表侧边起始端的距离。

endMargin: 分割线与列表侧边结束端的距离。

scrollBar

BarState

设置滚动条状态。

默认值：BarState.Off

cachedCount

number

设置预加载的ListItem的数量。具体使用可参考减少应用白块说明。

默认值：1

editMode

boolean

声明当前List组件是否处于可编辑模式。

默认值：false

edgeEffect

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可以使子组件的渲染依赖条件语句。

  • 必须在容器组件内使用。

  • 某些容器组件限制子组件的类型或数量，将if/else用于这些组件内时，这些限制将同样应用于if/else语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用if/else时，则if/else语句内也仅允许使用GridItem组件。



    

  1. Column() {
    2. 

  2. if (this.count < 0) {
    3. 

  3. Text('count is negative').fontSize(14)
    4. 

  4. } else if (this.count % 2 === 0) {
    5. 

  5. Text('count is even').fontSize(14)
    6. 

  6. } else {
    7. 

  7. Text('count is odd').fontSize(14)
    8. 

  8. }
    9. 

  9. }
    10. 



循环渲染




通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可减少代码复杂度。




    

  1. ForEach(
    2. 

  2. arr: any[],
    3. 

  3. itemGenerator: (item: any, index?: number) => void,
    4. 

  4. keyGenerator?: (item: any, index?: number) => string
    5. 

  5. )
    6. 



参数：








参数名




参数类型




必填




参数描述










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中的所有节点都将重建。








说明


    

  • 

    ForEach必须在容器组件内使用。
    

    • 

  • 

    生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
    

    • 

  • 

    允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中。
    

    • 

  • 

    itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如，以下示例可能无法正常工作：
    

    

      

    1. ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
      2. 

    2. item => Text(`${item.i}. item.data.label`),
      3. 

    3. item => item.data.id.toString())
      4. 

    

    • 



 



				
				               	

                			

				                

                	

                    	网络标签：                      

                

				
             

		

    

			
    
		

		
	

	     
	

    	

		

    
相关问题