第5章 ArkUI（下）

在UI开发中，开发者经常会遇到编写相似或重复代码的情况，以确保整体外观和样式的一致性。ArkUI提供了渲染语句、组件的导出和导入、组件代码复用等功能，可以帮助开发者减少编写相似或重复代码的情况，同时确保整体外观和样式的一致性。本章将对ArkUI进阶知识进行详细讲解。5.1 渲染语句5.1.1 条件渲染语句在开发中，有时需要根据某个条件决定是否渲染某个组件，此时可以使用条件渲染语句。条件渲染语句包括if语句、if…else语句、if…else if…else语句。下面以if语句为例演示条件渲染语句的使用方法。@Entry @Component struct IfPage { @State showImg: boolean = true; build() { Row() { Column() { Checkbox() .select(this.showImg) .onChange(isON = { this.showImg = isON; }) if (this.showImg) { Image($r('app.media.coin')) .width(150) .height(150) } } .width('100%') } .height('100%') } }5.1.2 循环渲染语句在开发中，有时需要渲染一批相同的组件。对于这样的需求，可以通过循环渲染语句来实现，从而减少重复的组件代码。循环渲染语句主要是通过ForEach()函数实现的。使用ForEach()函数可以基于数组进行循环渲染，在渲染过程中，系统会为每个数组元素生成一个唯一且持久的键，用于标识对应的组件。当这个键发生变化时，ArkUI将视为该数组元素已被替换或修改，并会基于新的键创建一个新的组件。ForEach()函数的语法格式如下。 ForEach( arr: Array, itemGenerator: (item: 类型, index?: number) = void, keyGenerator?: (item: 类型, index?: number): string = string )参数arr表示数据源，它是一个数组。 参数itemGenerator表示组件生成函数。 参数keyGenerator表示键生成函数。 在这两个函数中，item参数表示数组中元素的值，index参数表示数组中元素的索引。itemGenerator表示的函数会为数组中的每个元素创建组件，该函数中可以包含条件渲染语句，也可以在条件渲染语句中使用ForEach()函数。在用keyGenerator参数表示的函数中可以自定义键的生成规则。如果开发者没有定义keyGenerator表示的函数，则ArkUI会使用默认的键生成函数，相当于如下代码。(item: 类型, index: number) = index + '__' + JSON.stringify(item);下面通过代码演示ForEach()函数的使用方法。interface GoodsItem { id: number; goods_name: string; goods_img: Resource; goods_price: number; goods_count: number; } @Entry @Component struct ForEachPage { @State list: GoodsItem[] = [{ id: 1, goods_name: 'Vue.js前端开发实战（第2版）', goods_img: $r('app.media.vue'), goods_price: 49.8, goods_count: 1, }, { id: 2, goods_name: '软件测试（第2版）', goods_img: $r('app.media.test'), goods_price: 49.8, goods_count: 1, }, { id: 3, goods_name: 'PHP+MySQL动态网站开发', goods_img: $r('app.media.mysql'), goods_price: 49.8, goods_count: 1, }, { id: 4, goods_name: 'Python数据预处理', goods_img: $r('app.media.python'), goods_price: 39.8, goods_count: 1, }]; build() { List() { ForEach(this.list, (item: GoodsItem) = { ListItem() { Row({ space: 10 }) { Image(item.goods_img) .borderRadius(8) .width(120) .height(200) Column() { Text(item.goods_name) .fontWeight(FontWeight.Bold) Text('￥' + item.goods_price.toString() ) .fontColor(Color.Red) .fontWeight(FontWeight.Bold) } .padding({ top: 5, bottom: 5 }) .alignItems(HorizontalAlign.Start) .justifyContent(FlexAlign.SpaceBetween) .height(200) .layoutWeight(1) } nb