《HarmonyOS应用开发基础》 课件知识点2-7 渲染控制

渲染控制0102条件渲染循环渲染条件渲染在ArkUI声明式开发范式中，页面中的组件可以使用if/else条件渲染，以达到根据应用的不同状态，渲染对应状态下的UI内容。条件渲染使用说明：if/else条件语句可以使用状态变量，并且在更新场景下必须使用状态变量。使用if/else可以使子组件的渲染依赖条件语句。必须在容器组件内使用。某些容器组件限制子组件的类型或数量，将if/else用于这些组件内时，这些限制将同样应用于if/else语句内创建的组件。例如Grid容器组件的子组件仅支持GridItem组件。条件渲染if/else使用示例：@Componentstruct

MyComponent

{

@State

count:

number

=

300

build()

{

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)

}

}

}}循环渲染在ArkUI声明式开发范式中，重复出现的组件可以用ForEach循环来迭代渲染，组件需要的数据放在数组中，ForEach在迭代数组时创建相应的组件并传入数据。ForEach语句结构：ForEach(

arr:

any[],

itemGenerator:

(item:

any,

index?:

number)

=>

void,

keyGenerator?:

(item:

any,

index?:

number)

=>

string

)循环渲染ForEach参数说明：参数名参数类型必填参数描述arrany[]是必须是数组，允许设置为空数组，空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,3)，设置的函数不得改变包括数组本身在内的任何状态变量，如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。itemGenerator(item:any,index?:number)=>void是生成子组件的箭头函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。keyGenerator(item:any,index?:number)=>string否匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。默认使用index+JSON.stringify(item)。为了使开发框架能够更好地识别数组更改，提高性能，建议开发者提供自定义的键值生成器。循环渲染ForEach使用说明：ForEach必须在容器组件内使用。生成的子组件应当是允许包含在ForEach父容器组件中的子组件。允许子组件生成器函数中包含if/else条件渲染。键值生成器必须针对每个数据生成唯一的值，如果键值相同，将导致键值相同的UI组件被框架忽略，从而无法在父容器内显示。不提供keyGenerator时，默认使用index+JSON.stringify(item)。itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。循环渲染ForEach使用示例：@Entry@Componentstruct

MyComponent

{

@State

arr:

number[]

=

[10,

20,

30]

build()

{

Column({

space:

5

})

{

Button('Reverse

Array')

.onClick(()

=>

{

this.arr.reverse()

})

ForEach(this.arr,

(item:

number)

=>

{

Text(`item

value:

${item}`).fontSize(18)