# 2.4:渲染控制语法

ArkUI开发框架是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架,它支持程序使用 if/else 条件渲染, ForEach 循环渲染以及 LazyForEach 懒加载渲染。本节笔者介绍一下这三种渲染方式的使用。

# 2.4.1:if/else条件渲染

使用 if/else 进行条件渲染需要注意以下情况:

  • if 条件语句可以使用状态变量。

  • 使用 if 可以使子组件的渲染依赖条件语句。

  • 必须在容器组件内使用。

  • 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时,这些限制将应用于 ifelse 语句内创建的组件。例如,Grid 组件的子组件仅支持 GridItem 组件,在 Grid 组件内使用条件渲染时,则 if 条件语句内仅允许使用 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;                                 // 设置标记位
            })
        }
        .width('100%')
        .height('100%')
        .padding(10)
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32

    样例运行结果如下图所示:

    2_4_1

# 2.4.2:ForEach循环渲染

ArkUI开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。

ForEach 定义如下:

interface ForEach {(
	arr: Array<any>, 
	itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
  ): ForEach;
}
1
2
3
4
5
6
  • arr:必须是数组,允许空数组,空数组场景下不会创建子组件。

  • itemGenerator:子组件生成函数,为给定数组项生成一个或多个子组件。

  • keyGenerator:匿名参数,用于给定数组项生成唯一且稳定的键值。

    简单样例如下所示:

    @Entry @Component struct ComponentTest {
    
      private textArray: string[] = ["1", "2", "3", "4", "5"];    // 数据源
    
      build() {
        Column({space: 10}) {
          ForEach(this.textArray, (item: any, index?: number) => {// 循环数组创建每一个Item
            Text(`Text: ${item}`)                                 // 可以生成一个或多个子组件
              .fontSize(20)
              .backgroundColor(Color.Pink)
              .margin({ top: 10 })
          })
        }
        .width('100%')
        .height('100%')
        .padding(10)
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    样例运行结果如下图所示:

    2_4_2

# 2.4.3:LazyForEach循环渲染

ArkUI开发框架提供数据懒加载( LazyForEach 组件)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。

  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;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    • itemGenerator:子组件生成函数,为给定数组项生成一个或多个子组件。
    • keyGenerator:匿名参数,用于给定数组项生成唯一且稳定的键值。
    • dataSource:实现 IDataSource 接口的对象,需要开发者实现相关接口。
  2. IDataSource 定义如下:

    export declare interface IDataSource {
      totalCount(): number;
      getData(index: number): any;
      registerDataChangeListener(listener: DataChangeListener): void;
      unregisterDataChangeListener(listener: DataChangeListener): void;
    }
    
    1
    2
    3
    4
    5
    6
    • totalCount:获取数据总数。
    • getData:获取索引对应的数据。
    • registerDataChangeListener:注册改变数据的监听器。
    • unregisterDataChangeListener:注销改变数据的监听器。
  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;
    }
    
    1
    2
    3
    4
    5
    6
    7
    • onDataReloaded:item重新加载数据时的回调。
    • onDataAdded:item新添加数据时的回调。
    • onDataMoved:item数据移动时的回调。
    • onDataDeleted:item数据删除时的回调。
    • onDataChanged:item数据变化时的回调。

简单样例如下:

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

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

  private mDataSource: T[] = null;

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

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

  getData(index: number): T {
    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数据
  private student: Student[] = mock();

  // 创建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)) // 调用getName验证懒加载
                  .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下标日志
    return 'index:' + item.sid + ", " + item.name;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

样例运行结果如下图所示:

2_4_3

打印结果如下:

[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
1
2
3
4
5
6
7

📢:使用懒加载,可以有效的降低资源占用

# 2.4.4:小结

本节主要讲解了ArkUI开发框架的渲染控制语法,读者熟练掌握后可以随心所欲的控制页面的显示逻辑了(#^.^#)

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2