鴻蒙ArkUI開發(fā)學(xué)習(xí)：【渲染控制語法】

ArkUI開發(fā)框架是一套構(gòu)建 HarmonyOS / OpenHarmony 應(yīng)用界面的聲明式UI開發(fā)框架，它支持程序使用 if/else 條件渲染， ForEach 循環(huán)渲染以及 LazyForEach 懶加載渲染。本節(jié)筆者介紹一下這三種渲染方式的使用。

if/else條件渲染

使用 if/else 進(jìn)行條件渲染需要注意以下情況：

• if 條件語句可以使用狀態(tài)變量。

• 使用 if 可以使子組件的渲染依賴條件語句。

• 必須在容器組件內(nèi)使用。

• 某些容器組件限制子組件的類型或數(shù)量。將if放置在這些組件內(nèi)時(shí)，這些限制將應(yīng)用于 if 和 else 語句內(nèi)創(chuàng)建的組件。例如，Grid 組件的子組件僅支持 GridItem 組件，在 Grid 組件內(nèi)使用條件渲染時(shí)，則 if 條件語句內(nèi)僅允許使用 GridItem 組件。
  簡單樣例如下所示：

  @Entry @Component struct ComponentTest {
  
    @State showImage: boolean = false;
  
    build() {
      Column({space: 10}) {
  
        if (this.showImage) {            // 顯示圖片
          Image($r("app.media.test"))
            .width(160)
            .height(60)
            .backgroundColor(Color.Pink)
        } else {                         // 顯示文本
          Text('Loading...')
            .fontSize(23)
            .width(160)
            .height(60)
            .backgroundColor(Color.Pink)
        }
  
        Button(this.showImage ? 'Image Loaded' : 'Load Image')    // 按鈕文字
          .size({width: 160, height: 40})
          .backgroundColor(this.showImage ? Color.Gray : '#aabbcc')// 按鈕背景色
          .onClick(() = > {
            this.showImage = true;                                 // 設(shè)置標(biāo)記位
          })
      }
      .width('100%')
      .height('100%')
      .padding(10)
    }
  }
  

  樣例運(yùn)行結(jié)果如下圖所示：

  

ForEach循環(huán)渲染

ArkUI開發(fā)框架提供循環(huán)渲染（ForEach組件）來迭代數(shù)組，并為每個(gè)數(shù)組項(xiàng)創(chuàng)建相應(yīng)的組件。

ForEach 定義如下：

interface ForEach {(
	arr: Array< any >, 
	itemGenerator: (item: any, index?: number) = > void,
  keyGenerator?: (item: any, index?: number) = > string
  ): ForEach;
}

• arr ：必須是數(shù)組，允許空數(shù)組，空數(shù)組場景下不會(huì)創(chuàng)建子組件。
• itemGenerator ：子組件生成函數(shù)，為給定數(shù)組項(xiàng)生成一個(gè)或多個(gè)子組件。
• keyGenerator ：匿名參數(shù)，用于給定數(shù)組項(xiàng)生成唯一且穩(wěn)定的鍵值。
  簡單樣例如下所示：

@Entry @Component struct ComponentTest {

  private textArray: string[] = ["1", "2", "3", "4", "5"];        // 數(shù)據(jù)源

  build() {
    Column({space: 10}) {
      ForEach(this.textArray, (item: string, index?: number) = > { // 循環(huán)數(shù)組創(chuàng)建每一個(gè)Item
        Text(`Text: ${item}`)                                     // 可以生成一個(gè)或多個(gè)子組件
          .fontSize(20)
          .backgroundColor(Color.Pink)
          .margin({ top: 10 })
      })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

樣例運(yùn)行結(jié)果如下圖所示：

LazyForEach循環(huán)渲染

ArkUI開發(fā)框架提供數(shù)據(jù)懶加載（ LazyForEach 組件）從提供的數(shù)據(jù)源中按需迭代數(shù)據(jù)，并在每次迭代過程中創(chuàng)建相應(yīng)的組件。

1. LazyForEach 定義如下：

   // LazyForEach定義
   interface LazyForEach {(
   	dataSource: IDataSource, 
     itemGenerator: (item: any, index?: number) = > void,
     keyGenerator?: (item: any, index?: number) = > string
     ): LazyForEach;
   }
   
   // IDataSource定義
   export declare interface IDataSource {
     totalCount(): number;
     getData(index: number): any;
     registerDataChangeListener(listener: DataChangeListener): void;
     unregisterDataChangeListener(listener: DataChangeListener): void;
   }
   
   // DataChangeListener定義
   export declare interface DataChangeListener {
     onDataReloaded(): void;
     onDataAdded(index: number): void;
     onDataMoved(from: number, to: number): void;
     onDataDeleted(index:number): void;
     onDataChanged(index:number): void;
   }
   

   • itemGenerator ：子組件生成函數(shù)，為給定數(shù)組項(xiàng)生成一個(gè)或多個(gè)子組件。
   • keyGenerator ：匿名參數(shù)，用于給定數(shù)組項(xiàng)生成唯一且穩(wěn)定的鍵值。
   • dataSource ：實(shí)現(xiàn) IDataSource 接口的對象，需要開發(fā)者實(shí)現(xiàn)相關(guān)接口。

2. IDataSource 定義如下：

   export declare interface IDataSource {
     totalCount(): number;
     getData(index: number): any;
     registerDataChangeListener(listener: DataChangeListener): void;
     unregisterDataChangeListener(listener: DataChangeListener): void;
   }
   

   • totalCount ：獲取數(shù)據(jù)總數(shù)。
   • getData ：獲取索引對應(yīng)的數(shù)據(jù)。
   • registerDataChangeListener ：注冊改變數(shù)據(jù)的監(jiān)聽器。
   • unregisterDataChangeListener ：注銷改變數(shù)據(jù)的監(jiān)聽器。

3. DataChangeListener 定義如下：

   export declare interface DataChangeListener {
     onDataReloaded(): void;
     onDataAdded(index: number): void;
     onDataMoved(from: number, to: number): void;
     onDataDeleted(index:number): void;
     onDataChanged(index:number): void;
   }
   

   • onDataReloaded ：item重新加載數(shù)據(jù)時(shí)的回調(diào)。
   • onDataAdded ：item新添加數(shù)據(jù)時(shí)的回調(diào)。
   • onDataMoved ：item數(shù)據(jù)移動(dòng)時(shí)的回調(diào)。
   • onDataDeleted ：item數(shù)據(jù)刪除時(shí)的回調(diào)。
   • onDataChanged ：item數(shù)據(jù)變化時(shí)的回調(diào)。

簡單樣例如下：

// 定義Student
class Student {
  public sid: number;
  public name: string;
  public age: number
  public address: string
  public avatar: string
  constructor(sid: number = -1, name: string, age: number = 16, address: string = '北京', avatar: string = "") {
    this.sid = sid;
    this.name = name;
    this.age = age;
    this.address = address;
    this.avatar = avatar;
  }
}

// 定義DataSource
abstract class BaseDataSource< T > implements IDataSource {

  private mDataSource: T[] = new Array();

  constructor(dataList: T[]) {
    this.mDataSource = dataList;
  }

  totalCount(): number {
    return this.mDataSource == null ? 0 : this.mDataSource.length
  }

  getData(index: number): T|null {
    return index >= 0 && index < this.totalCount() ? this.mDataSource[index] : null;
  }

  registerDataChangeListener(listener: DataChangeListener) {
  }

  unregisterDataChangeListener(listener: DataChangeListener) {
  }

}

// 
class StudentDataSource extends BaseDataSource< Student > {
  constructor(students: Student[]) {
    super(students)
  }
}

function mock(): Student[] {
  var students = [];
  for(var i = 0; i < 20; i++) {
    students[i] = new Student(i, "student:" + i, i + 10, "address:" + i, "app.media.test")
  }
  return students;
}

@Entry @Component struct ComponentTest {

  // mock數(shù)據(jù)
  private student: Student[] = mock();

  // 創(chuàng)建dataSource
  private dataSource: StudentDataSource = new StudentDataSource(this.student);

  build() {
    Column({space: 10}) {
      List() {
        LazyForEach(this.dataSource, (item: Student) = > {// LazyForEach使用自定義dataSource
          ListItem() {
            Row() {
              Image($r("app.media.test"))
                .height('100%')
                .width(80)
              Column() {
                Text(this.getName(item)) // 調(diào)用getName驗(yàn)證懶加載
                  .fontSize(20)
                Text('address: ' + item.address)
                  .fontSize(17)
              }
              .margin({left: 5})
              .alignItems(HorizontalAlign.Start)
              .layoutWeight(1)
            }
            .width('100%')
            .height('100%')
          }
          .width('100%')
          .height(60)
        })
      }
      .divider({
        strokeWidth: 3,
        color: Color.Gray
      })
      .width('90%')
      .height(160)
      .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  getName(item: Student): string {
    console.log("index: " + item.sid); // 打印item下標(biāo)日志
    return 'index：' + item.sid + ", " + item.name;
  }
}

樣例運(yùn)行結(jié)果如下圖所示：

打印結(jié)果如下：

[phone][Console    INFO]  04/02 23:54:19 82919424 app Log: Application onCreate
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 0
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 1
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 2
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 3
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 4
[phone][Console   DEBUG]  04/02 23:54:19 82919424 app Log: index: 5

使用懶加載，可以有效的降低資源占用

審核編輯 黃宇