【Harmony OS 4.0】渲染控制

1. if…else 条件渲染

  1. 根据应用的不同状态,渲染不同的UI界面。
  2. 修改条件分支的时候,会把原来的条件分支组件先删除,再重新创建一个条件分支组件。

1.1 代码示例如下:

// 自定义组件
@Component
struct MyChild {
  @Link count: number // @Link装饰器 - 父子双向同步 - 禁止本地初始化
  @Prop label: string // @Prop装饰器 - 父子单向同步 - 允许本地初始化

  build() {
    Row() {
      Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
        Text(`${this.label}`)
        Button(`计数器${this.count}`).onClick(() => {
          this.count += 1
        })
      }
    }
  }
}

@Entry
@Component
struct UITest6 {
  @State flag: boolean = true // @State装饰器 - 组件内状态 - 必须本地初始化
  @State parentCount: number = 0

  build() {
    Column() {
      if (this.flag) {
        MyChild({ count: $parentCount, label: '真真' })
      } else {
        MyChild({ count: $parentCount, label: '假假' })
      }
      Button(`是否真假:${this.flag}`).onClick(() => {
        this.flag = !this.flag
      }).margin(10)
    }
  }
}

2. 循环渲染

  1. 可使用 ForEach 语句基于一个数组来快速渲染一个组件列表。
  2. ForEach接口 基于 数组类型数据 来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
    例如,ListItem组件要求ForEach的父容器组件必须为List组件。
  3. 和 if…else 不一样,会做二次渲染,可以做到单独修改某一个值。

2.1 接收三个参数

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

2.1.1 arr

  1. 需要进行循环渲染的数据源,必须为数组类型。

2.1.2 itemGenerator

  1. 组件生成函数,用于为 arr 数组中的每个元素创建对应的组件。
  2. 该函数可接收俩个参数,分别是:
    item:arr 数组中的数据项,
    index(可选):arr 数组中的数据项的索引。

2.1.3 keyGenerator(可选)

  1. 是 key 生成函数,用于 arr 数组中的每个数据项生成唯一的 key
  2. key 的作用:
    ForEach 在数组发生变化时,需要重新渲染组件列表,再重新渲染时,它会尽量复用原来的组件对象,而不是重新渲染整个组件列表。
    key 的作用就是辅助 ForEach 完成组件对象的复用。
  3. 具体逻辑如下:
    ForEach 在进行初次渲染时,会使用 keyGenerator 为数组中的每个元素生成一个唯一的 key,并将 key 作为组件对象的标识。当数组发生变化导致 ForEach 需要重新渲染时,ForEach 会再次使用 keyGenerator 为每个元素重新生成一遍 key,然后 ForEach 会检查新生成的 key 在上次渲染时是否已经存在,若存在,ForEach 就会认为这个 key 对应的数组元素没有发生变化,那它就会直接复用这个 key 所对应的组件对象;若不存在,ForEach 就会认为这个 key 对应的元素发生了变化,或者该元素为新增元素,此时,就会为该元素重新创建一个组件对象。
  4. 如果开发者没有定义 keyGenerator函数,则系统会使用默认的 key 生成函数,即
(item: any, index: number) => { return index + '_' + JSON.stringify(item)}

在某些情况下默认的 key 生成函数,会导致界面渲染效率低下,此时可考虑通过 keyGenerator函数 自定义生成逻辑,即

ForEach(this.arr, (item) => {Text(item)}, item => JSON.stringify(item) )
  1. 在自定义 key 的生成逻辑时,必须得保证每个元素的 key 都是唯一的,这是规定好的。

2.2 代码示例如下:

// 自定义组件
@Component
struct MyChild {
  @Prop label: string

  build() {
    Column() {
      Text(this.label).fontSize(24).fontColor("#9955FF")
    }
  }
}

@Entry
@Component
struct UITest7 {
  @State my_array: Array<string> = ['one', 'two', 'three']

  build() {
    Column({space: 15}) {
      ForEach(this.my_array, (item: string, index: number) => { // ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用。
        MyChild({label: item}) // 且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
      })
      Button('修改two').onClick(() => {
        this.my_array[1] = 'new_two' // 和 if..else 不一样,会做二次渲染,可以做到单独修改某一个值。
      })
    }
    .justifyContent(FlexAlign.Center)
    .height("100%")
    .width('100%')
  }
}

你可能感兴趣的:(Harmony,OS,4.0,渲染控制)