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

渲染控制

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)????????Divider().strokeWidth(2).color(Color.Black)??????},?(item:?number)?=?item.toString())????}??}}