12-ArkTS语言_渲染控制

渲染控制

if/else：条件渲染

• 支持if、else和else if语句。
• if、else if后跟随的条件语句可以使用状态变量。
• 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
• 当if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新
• 条件可以包括Typescript表达式。

if(条件表达式){
  组件内容1
}else{
  组件内容2
}

案例：开关机

🐵 素材

/*
 * 分支渲染
 * */
@Entry
@Component
struct IfDemoPage {
  @State close: boolean = false

  build() {
    Row() {
      Column({space:'25vp'}) {
        Button(this.close ? "开机" : "关机")
          .fontSize('25fp')
          .height('50vp')
          .width('100vp')
          .onClick(() => {
            this.close = !this.close;
          })
        if (this.close) {
          this.Branch_Comp('已关机', $r('app.media.AHUWEI'))
        } else {
          this.Branch_Comp('已开机', $r('app.media.HarmonyOS'))
        }
      }
      .width('100%')
    }
    .height('100%')
  }

  @Builder
  Branch_Comp(content: string, src: Resource) {
    Text(content)
      .fontSize('30fp')
      .fontWeight(FontWeight.Bold)
    Image(src)
      .objectFit(ImageFit.Contain)
      .height('200vp')
      .width('200vp')
  }
}

作业：逢七过小游戏

ForEach：循环渲染

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

接口描述

---

ForEach(
  arr: Array,
  itemGenerator: (item: Array, index?: number) => void,
    keyGenerator?: (item: Array, index?: number): string => string
                 )

参数名	参数类型	必填	参数描述
arr	Array	是	数据源，为Array类型的数组。
说明：

• 可以设置为空数组，此时不会创建子组件。
• 可以设置返回值为数组类型的函数，例如arr.slice(1, 3)，但设置的函数不应改变包括数组本身在内的任何状态变量，例如不应使用Array.splice(),Array.sort()或Array.reverse()这些会改变原数组的函数。 |
  | itemGenerator | (item: any, index?: number) => void | 是 | 组件生成函数。
• 为数组中的每个元素创建对应的组件。
• item参数：arr数组中的数据项。
• index参数（可选）：arr数组中的数据项索引。
  说明：
• 组件的类型必须是ForEach的父容器所允许的。例如，ListItem组件要求ForEach的父容器组件必须为List组件。 |
  | keyGenerator | (item: any, index?: number) => string | 否 | 键值生成函数。
• 为数据源arr的每个数组项生成唯一且持久的键值。函数返回值为开发者自定义的键值生成规则。
• item参数：arr数组中的数据项。- index参数（可选）：arr数组中的数据项索引。
  说明：
• 如果函数缺省，框架默认的键值生成函数为```typescript
  (item: T, index: number) => { return index + ‘__’ + JSON.stringify(index); }

- 键值生成函数不应改变任何组件状态。 |

- ForEach的itemGenerator函数可以包含if/else条件渲染逻辑。另外，也可以在if/else条件渲染语句中使用ForEach组件。
- **键值生成函数。返回值要确保唯一！！！很重要。有开发经验的人看文档即可理解。零基础小白，先简单记忆。后期能力增强后逐渐理解。**
### 课堂案例
​```typescript
@State product: string[] = ['PC', '问界汽车', "平板", `手环`]

/*
 * 循环渲染:
 *  语法+键值生成函数
 * */
@Entry
  @Component
  struct Loop {
    @State product: string[] = ['PC', '问界汽车', "平板", `手环`]
    // @State product:string[] = ['PC','问界汽车',"平板",'PC',`手环`]

    build() {
      Row() {
        Column() {
          Text('循环渲染数据')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          Divider()
          ForEach(this.product, (item) => {
            Row() {
              Text(item).fontSize(30)
            }
          }, (item) => {
            return item
          })
        }
        .width('100%')
      }
      .height('100%')
    }
  }

❤️ 对象数组

@State  harmony_dixin:object[] = [
  {
    id:'001',
    title:'helloworld',
    content:'入门代码编写'
  },
  {
    id:'002',
    title:'跳转',
    content:'多种语言页面跳转'
  },
  {
    id:'003',
    title:'ArkTS语言',
    content:'详细学习arkts语法内容'
  },
]

作业：使用渲染控制完成前文案例

---

LazyForEach：数据懒加载(用法同上，自行学习)

LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。

---