鴻蒙應用開發從入門到實戰（九）：ArkTS渲染控制

大家好，我是潘Sir，持續分享IT技術，幫你少走彎路。《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容、歡迎關注！

? ArkTS拓展了TypeScript，可以結合ArkUI進行渲染控制，是的界面設計具有可編程性。本文簡要描述鴻蒙應用開發中的條件渲染和循環渲染。

一、條件渲染

1.1 概述

? 條件渲染可根據應用的不同狀態渲染不同的UI界面，例如前文的開/關燈案例，以及以下的播放/暫停案例，均可使用條件渲染實現。

? 常見案例：網站的登錄和注冊模塊、商城網站會員價格顯示等

1.2 語法

條件渲染的語法如下

if (...){
  //UI描述 
}else if (...){
  //UI描述
}else{
  //UI描述
}

1.3 案例

表白案例

@Entry
@Component
  // 條件渲染
struct ConditionPage {
  @State isSuc: boolean = true;

  build() {
    Column({space:20}) {
      if (this.isSuc) {
        Text('表白成功,O(∩_∩)O')
      } else {
        Text('繼續加油，??')
      }

      Button('表白')
        .backgroundColor(Color.Green)
        .onClick(()=>{
          this.isSuc=!this.isSuc
        })
    }
    .width('100%')
    .height('100%')
    .margin({top:50})
  }
}

二、循環渲染

2.1 概述

? 循環渲染可使用ForEach語句基于一個數組來快速渲染一個組件列表，例如以下案例中的選項列表就可通過循環渲染實現。

2.2 語法

ForEach循環渲染的語法如下

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

各參數的含義如下

• arr

需要進行循環渲染的數據源，必須為數組類型，例如上述案例中的

@State options: string[] = ["蘋果", "桃子", "香蕉", "橘子"];

• itemGenerator

組件生成函數，用于為arr數組中的每個元素創建對應的組件。該函數可接收兩個參數，分別是

• • item：arr數組中的數據項
  • index（可選）：arr數組中的數據項的索引

例如上述案例中的

(item: string) => {
        Button(item)
          .width(100)
          .backgroundColor(Color.Green)
          .onClick(() => {
            this.answer = item;
          })
      }

• keyGenerator（可選）：

key生成函數，用于為arr數組中的每個數據項生成唯一的key。

key的作用

ForEach在數組發生變化（修改數組元素或者向數組增加或刪除元素）時，需要重新渲染組件列表，在重新渲染時，它會盡量復用原來的組件對象，而不是為每個元素都重新創建組件對象。key的作用就是輔助ForEach完成組件對象的復用。

具體邏輯如下：

ForEach在進行初次渲染時，會使用keyGenerator為數組中的每個元素生成一個唯一的key，并將key作為組件對象的標識。當數組發生變化導致ForEach需要重新渲染時，ForEach會再次使用keyGenerator為每個元素重新生成一遍key，然后ForEach會檢查新生成的key在上次渲染時是否已經存在，若存在，ForEach就會認為這個key對應的數組元素沒有發生變化，那它就會直接復用這個key所對應的組件對象；若不存在，ForEach就會認為這個key對應的元素發生了變化，或者該元素為新增元素，此時，就會為該元素重新創建一個組件對象。

開發者可以通過keyGenerator函數自定義key的生成規則。如果開發者沒有定義keyGenerator函數，則系統會使用默認的key生成函數，即

(item: any, index: number) => { return index + '__' + JSON.stringify(item); }

在某些情況下默認的key生成函數，會導致界面渲染效率低下，此時可考慮通過keyGenerator函數自定義生成邏輯，例如如下場景

狀態變量數組定義如下

@State arr:string[] = ["zhangsan","lisi","wangwu"]

ForEach語句如下

Column(){
  ForEach(this.arr,(item)=>{ Text(item) })
}

初次渲染時，每個元素對應的key依次為0__"zhagnsan"、1__"lisi"、2__"wangwu"。若現有一個操作是向arr數組頭部插入新的元素，例如新元素為wanger，按照默認的key生成邏輯，插入新元素之后每個元素的key就會依次變為0__"wanger"、1__"zhagnsan"、2__"lisi"、3__"wangwu"，也就是所有元素的key都發生了變化，因此UI界面更新時需要為每個元素都重新創建組件對象，即便原有的元素沒有發生變化也無法復用之前的組件，這樣一來就導致了性能浪費。此時我們就可以考慮提供第三個參數，如下

Column(){
  ForEach(this.arr, (item)=>{ Text(item) }, item => JSON.stringify(item))
}

2.3 案例

愛好列表

@Entry
@Component
  // 循環控制
struct LoopPage {
  @State likes: string[] = ["唱歌", "跳舞", "學習", "打豆豆"];
  @State choose: string = ""; //注意string是小寫

  build() {
    Row() {
      Column() {
        Text('你喜歡的是：' + this.choose)
        ForEach(this.likes, (item) => {
          Button(item)
            .width(200)
            .margin(10)
            .onClick(()=>{
              this.choose=item
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

《鴻蒙應用開發從入門到項目實戰》系列文章持續更新中，陸續更新AI+編程、企業級項目實戰等原創內容，防止迷路，歡迎關注！