《ArkUI实战》之渲染控制语法

最新推荐文章于 2024-05-31 16:47:45 发布
最新推荐文章于 2024-05-31 16:47:45 发布
阅读量639 收藏 11
点赞数 25
分类专栏： 经验分享 鸿蒙开发 移动开发 文章标签： harmonyos Openharmony 移动开发 前端 ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71263309/article/details/137930510
版权

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

if/else条件渲染

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

  • if 条件语句可以使用状态变量。
  • 使用 if 可以使子组件的渲染依赖条件语句。
  • 必须在容器组件内使用。
  • 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时，这些限制将应用于 if 和 else 语句内创建的组件。例如，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)
      }
    }

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

ForEach循环渲染

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

ForEach 定义如下：

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

  • arr：必须是数组，允许空数组，空数组场景下不会创建子组件。

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

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

简单样例如下所示：

    @Entry @Component struct ComponentTest {

      private textArray: string[] = ["1", "2", "3", "4", "5"];        // 数据源

      build() {
        Column({space: 10}) {
          ForEach(this.textArray, (item: string, index?: number) => { // 循环数组创建每一个Item
            Text(`Text: ${item}`)                                     // 可以生成一个或多个子组件
              .fontSize(20)
              .backgroundColor(Color.Pink)
              .margin({ top: 10 })
          })
        }
        .width('100%')
        .height('100%')
        .padding(10)
      }
    }

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

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;
    }
  • itemGenerator：子组件生成函数，为给定数组项生成一个或多个子组件。
  • keyGenerator：匿名参数，用于给定数组项生成唯一且稳定的键值。
  • dataSource：实现 IDataSource 接口的对象，需要开发者实现相关接口。
  1. IDataSource 定义如下：
    export declare interface IDataSource {
      totalCount(): number;
      getData(index: number): any;
      registerDataChangeListener(listener: DataChangeListener): void;
      unregisterDataChangeListener(listener: DataChangeListener): void;
    }
  • totalCount：获取数据总数。
  • getData：获取索引对应的数据。
  • registerDataChangeListener：注册改变数据的监听器。
  • unregisterDataChangeListener：注销改变数据的监听器。
  1. 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重新加载数据时的回调。
  • onDataAdded：item新添加数据时的回调。
  • onDataMoved：item数据移动时的回调。
  • onDataDeleted：item数据删除时的回调。
  • onDataChanged：item数据变化时的回调。

简单样例如下：

// 定义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数据
  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;
  }
}

打印结果如下：

[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

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

小结

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

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……
关注
  • 25
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 11万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
Android性能优化系列之渲染优化
02-25
然而有的时候你的程序会出现这样的情况，如果某个绘制操作超过了16秒用了24秒这时候用户看同一张图片花了32秒而不是16s，用户会感到卡顿，这种现象我们叫-丢帧首先我们要了解android的渲染机制，android的渲染主要...
HarmonyOS ArkUI实战开发—状态管理
m0_71524094的博客
04-26 886
在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。
OpenHarmony ArkUI 实战开发—ETS 装饰器解读
m0_70748458的博客
04-26 880
最近利用空闲时间在学习华为方舟开发框架（简称：ArkUI）的ets开发，发现在ets语言中装饰器的有着非常重要的作用，在写每一个自定义组件时都需要用到它，看到装饰器这个字眼，想起之前学过的设计模式里的装饰器模式（允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装），ets中的装饰器的作用就是类似这样的。华为官网中对装饰器的介绍也比较详细，参照官网的讲解，自己对其进行了汇总，方便后续理解与查阅。
OpenHarmony实战开发-合理选择条件渲染和显隐控制。
m0_70749039的博客
04-22 1032
开发者可以通过条件渲染或显隐控制两种方式来实现组件在显示和隐藏间的切换。本文从两者原理机制的区别出发，对二者适用场景分别进行说明，实现相应适用场景的示例并给出性能对比数据。
OpenHarmony实战开发-控制页面刷新范围
m0_70749039的博客
05-24 588
在实现页面UI时，业务方需要根据业务逻辑动态更新组件的状态，常见的如在手机桌面长按某个App的图标时，图标背景色、大小等会发生变化。根据业务需要，有时我们需要触发单个组件的状态更新，有时需要触发部分或全部组件的状态更新。那么如何控制组件状态刷新的范围呢？本例将为大家提供一种参考方案。
OpenHarmony实战开发-ForEach：循环渲染
m0_70749039的博客
05-27 612
ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。
HarmonyOS实战开发：if/else：条件渲染
2401_84194030的博客
04-22 711
ArkTS提供了渲染控制的能力。
OpenGL之控制正方形移动.zip
07-22
OpenGL_控制正方形移动，简单介绍了正方形的绘制，并简单实现方向键对正方形在屏幕上的移动，里面有详细的代码和注解（该代码没有处理多个键位一起出发的情况，自己可适当补充）
详解Angular5 服务端渲染实战
08-28
本篇文章主要介绍了详解Angular5 服务端渲染实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUEJS实战之构建基础并渲染出列表（1）
11-23
前言 我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,...既然决定学习vue,那么最好的学习方法就是实战.偶然看到 cNodeJs.Org 论坛有公开的api可以使用,这太方便了.于是,我决定用这个公开的
鸿蒙OS 路由跳转
程序员—威廉
05-22 397
2. **调用`Router`对象的`replace`或`push`方法**：在需要执行跳转的地方，调用`Router`对象的`replace`或`push`方法，并传入目标页面的路由路径。3. **使用`AbilitySlice`的`start`方法**：在自定义组件中，可以使用`AbilitySlice`的`start`方法来启动一个新的页面。1. **使用`@Route`装饰器**：在需要跳转的页面上添加`@Route`装饰器，并指定一个唯一的路由路径。）中定义路由路径，并指定参数。
JavaScript、Kotlin、Flutter可以开发鸿蒙APP吗？
finogeeks的博客
05-30 1177
作为反内卷达人，作者今天想分享的是：不学习ArkTS语言，我们应该怎么开发鸿蒙app！
HarmonyOS鸿蒙学习笔记（28）@entry和@Component的生命周期
最新发布
菜鸟博客
05-31 937
@entry和@Component的生命周期
HarmonyOS-9(stage模式)
xueyoubangbang的博客
05-29 284
【代码】HarmonyOS-9(stage模式)
【HarmonyOS】取消页面转场动画
我的小窝
05-29 422
取消页面转场动画
vue3渲染Markdown语法
02-28
在Vue 3中渲染Markdown语法，您可以使用Vue.js官方提供的`@vuepress/plugin-transformer-md`插件，该插件可以将Markdown文件转换为Vue单文件组件，使您可以在Vue 3中使用Markdown语法。 首先，您需要在Vue.js项目中安装该插件，可以使用以下命令： ``` npm install -D @vuepress/plugin-transformer-md ``` 然后，您需要在Vue.js项目中的VuePress配置文件中引用该插件： ```javascript // .vuepress/config.js module.exports = { // ... plugins: [ [ '@vuepress/plugin-transformer-md', { // 选项 } ] ] } ``` 然后，您可以在Vue单文件组件中使用Markdown语法。例如，您可以在组件的`template`中使用`v-pre`指令，以防止Vue解析Markdown语法： ```vue <template> <div v-pre> # Hello, world! This is some **bold** text. </div> </template> ``` 在上面的示例中，`v-pre`指令会阻止Vue解析组件的内容，以便Markdown语法可以正常显示。 您还可以使用Vue.js官方提供的`vuepress-theme-default`主题来为Vue 3应用程序提供漂亮的Markdown样式。该主题已经包含了渲染Markdown语法所需的所有依赖项和样式。 希望这可以帮助您在Vue 3中渲染Markdown语法！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值