《鸿蒙HarmonyOS应用开发基础》课件 第5章 ArkUI（下）.pptxVIP

第5章ArkUI（下）《鸿蒙HarmonyOS应用开发基础》

学习目标/Target掌握渲染语句的使用方法，能够根据实际需求使用条件渲染语句和循环渲染语句掌握组件导出和导入，能够通过export关键字和import关键字实现组件的导出和导入掌握组件代码复用，能够使用@Styles、@Extend和@Builder装饰器实现组件代码复用掌握组件代码定制，能够使用@BuilderParam装饰器和尾随闭包实现组件代码定制

章节概述/Summary在UI开发中，开发者经常会遇到编写相似或重复代码的情况，以确保整体外观和样式的一致性。ArkUI提供了渲染语句、组件的导出和导入、组件代码复用等功能，可以帮助开发者减少编写相似或重复代码的情况，同时确保整体外观和样式的一致性。本章将对ArkUI进阶知识进行详细讲解。

目录/Contents5.15.2渲染语句组件导出和导入5.35.4组件代码复用组件代码定制5.5阶段案例——评论回复页面

渲染语句5.1

5.1.1条件渲染语句先定一个小目标！掌握条件渲染语句的使用方法，能够实现根据某个条件决定是否渲染某个组件

5.1.1条件渲染语句在开发中，有时需要根据某个条件决定是否渲染某个组件，此时可以使用条件渲染语句。条件渲染语句包括if语句、if…else语句、if…elseif…else语句。

5.1.1条件渲染语句下面以if语句为例演示条件渲染语句的使用方法。

5.1.2循环渲染语句先定一个小目标！掌握循环渲染语句的使用方法，能够实现循环渲染一批组件

5.1.2循环渲染语句在开发中，有时需要渲染一批相同的组件。对于这样的需求，可以通过循环渲染语句来实现，从而减少重复的组件代码。

5.1.2循环渲染语句循环渲染语句主要是通过ForEach()函数实现的。使用ForEach()函数可以基于数组进行循环渲染，在渲染过程中，系统会为每个数组元素生成一个唯一且持久的键，用于标识对应的组件。当这个键发生变化时，ArkUI将视为该数组元素已被替换或修改，并会基于新的键创建一个新的组件。

5.1.2循环渲染语句ForEach()函数的语法格式如下。参数arr表示数据源，它是一个数组。参数itemGenerator表示组件生成函数。参数keyGenerator表示键生成函数。在这两个函数中，item参数表示数组中元素的值，index参数表示数组中元素的索引。ForEach(arr:Array,itemGenerator:(item:类型,index?:number)=void,keyGenerator?:(item:类型,index?:number):string=string)

5.1.2循环渲染语句itemGenerator表示的函数会为数组中的每个元素创建组件，该函数中可以包含条件渲染语句，也可以在条件渲染语句中使用ForEach()函数。在keyGenerator表示的函数中可以自定义键的生成规则。如果开发者没有定义keyGenerator表示的函数，则ArkUI会使用默认的键生成函数，相当于如下代码。(item:类型,index:number)=index+__+JSON.stringify(item);

5.1.2循环渲染语句下面通过代码演示ForEach()函数的使用方法。

组件导出和导入5.2

5.2组件导出和导入先定一个小目标！掌握组件导出和导入，能够通过export关键字和import关键字实现组件的导出和导入

5.2组件导出和导入ArkUI中的组件可以被导出和导入，从而方便复用组件。使用export关键字可以对组件进行导出，可以添加default关键字实现默认导出。使用import关键字可以对组件进行导入。

5.2组件导出和导入导出和导入的语法在第3章已经讲过。将组件导入后，在build()方法中通过“组件名()”的方式可以使用组件。

5.2组件导出和导入下面通过代码演示组件的导出和导入。假设一个页面有头部、主体和底部3部分内容，现需要将头部、主体和底部单独抽出为3个子组件。

组件代码复用5.3

5.3.1@Styles装饰器先定一个小目标！掌握组件代码复用，能够使用@Styles装饰器实现组件代码复用

5.3.1@Styles装饰器@Styles装饰器用于装饰一个方法。在被@Styles装饰器装饰的方法中可以编写多条通用属性和通用事件的代码，通过组件调用该方法即可复用该方法中的代码。

5.3.1@Styles装饰器定义方法时，可以在struct外使用@Styles装饰器定义或在struct内使用@Styles装饰器定