ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用

news2024/11/16 21:30:49

ArkUI开发进阶—@Builder函数@BuilderParam装饰器的妙用与场景应用

HarmonyOS，作为一款全场景分布式操作系统，为了推动更广泛的应用开发，采用了一种先进而灵活的编程语言——ArkTS。ArkTS是在TypeScript（TS）的基础上发展而来，为HarmonyOS提供了丰富的应用开发工具，使开发者能够更轻松地构建出色的多设备应用。
在这里插入图片描述

ArkTS的基础：TypeScript的超集

在深入ArkTS之前，了解其基础是至关重要的。ArkTS是TypeScript的超集，继承了TS的所有特性，因此，对于已经熟悉TS的开发者而言，学习ArkTS将变得更加顺利。这种扩展使得ArkTS具备更丰富的语法和功能，为HarmonyOS应用提供了更大的灵活性。

ArkTS的核心能力扩展

1. 基本语法扩展

ArkTS不仅仅是在语法上对TypeScript的简单包装，它在基本语法上进行了进一步的扩展。通过引入声明式UI描述、自定义组件和动态扩展UI元素的能力，ArkTS为UI开发提供了更直观且高效的工具。这与ArkUI框架中的系统组件、事件方法以及属性方法相互配合，构建了应用开发的主体。

2. 状态管理机制

在应用开发中，状态管理是一个关键的问题。ArkTS引入了多维度的状态管理机制，使得与UI相关的数据可以在组件内使用，也可以在不同组件层级间传递。这种多层级的状态管理不仅包括父子组件之间的传递，还支持应用全局范围内的数据传递和跨设备传递。开发者可以根据需求选择只读的单向传递或可变更的双向传递，实现数据和UI的灵活联动。

3. 渲染控制

ArkTS提供了灵活的渲染控制能力，包括条件渲染、循环渲染和数据懒加载。条件渲染使得应用能够根据不同状态渲染相应的UI内容，而循环渲染则允许从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载则按需迭代数据，实现更高效的应用性能。

ArkTS基本语法概述

为了更好地理解ArkTS的基本组成，我们将通过一个简单的示例来演示其语法和结构。
在这里插入图片描述

示例：Hello ArkUI

// 使用装饰器定义组件和状态
@Entry
@Component
struct Hello {
  @State myText: string = 'Hello World';

  // 声明UI结构
  build() {
    Column() {
      Text(this.myText)
        .fontSize(20)
      Button('Click me')
        .onClick(() => {
          this.myText = 'Hello ArkUI';
        })
    }
  }
}

在这个示例中，我们使用了装饰器@Entry、@Component、@State，定义了一个名为Hello的组件，并声明了一个状态变量myText。在UI结构的描述中，我们使用了Column、Text和Button等系统组件，以及相应的属性方法和事件方法。

这个简单的示例展示了ArkTS的基本组成，包括装饰器、声明式UI描述、自定义组件、系统组件、属性方法和事件方法的使用。

ArkTS的高级语法范式

除了基本语法外，ArkTS还扩展了多种高级语法范式，使得开发变得更加便捷和灵活。

1. @Builder/@BuilderParam

这是一种特殊的封装UI描述的方法，可以实现细粒度的封装和复用UI描述。

2. @Extend/@Style

通过@Extend和@Style，开发者可以扩展内置组件和封装属性样式，更灵活地组合内置组件。

3. stateStyles

这是一种多态样式的应用，可以根据组件的内部状态的不同，设置不同的样式。

使用 @Builder 自定义构建函数

进一步理解 @Builder 装饰器

在前文示例中，我们已经展示了如何在组件内使用 @Builder 装饰器创建自定义构建函数，并在组件的 build 方法中调用该函数，实现了对按钮的定制。接下来，我们将深入理解 @Builder 装饰器的一些重要概念。

1. 构建函数内部的 this 指向

在自定义构建函数内部，this 关键字指向当前所属组件。这意味着你可以访问和操作组件内的状态变量。让我们通过一个例子来说明：

@Entry
@Component
struct ExampleComponent {
  @State buttonText: string = 'Click me';

  @Builder
  BuildButton() {
    Button(this.buttonText)
      .onClick(() => {
        console.log(`Button Clicked! Current text: ${this.buttonText}`);
      });
  }

  build() {
    Column() {
      Text('Welcome to ArkTS!')
        .fontSize(20)
      // 调用自定义构建函数
      this.BuildButton()
    }
  }
}

在这个例子中，我们在构建函数的点击事件处理中使用了 this.buttonText，这样就能在点击按钮时打印出当前按钮文本的信息。

2. 构建函数的参数传递

通过 @Builder 装饰器创建的构建函数支持参数传递。参数的传递可以是按值传递或按引用传递。在前文的说明中，我们已经了解了这两种传递方式的使用规则。

@Builder MyBuilderFunction(param: string) {
  // 构建函数体
}

通过参数传递，你可以将外部数据灵活地传递给自定义构建函数，实现更加通用和可配置的构建逻辑。

3. 全局自定义构建函数

除了在组件内定义自定义构建函数，你还可以创建全局自定义构建函数。全局构建函数不属于任何特定组件，因此不能使用 this 关键字，也不能访问组件内的状态变量。这适用于那些与组件无关的通用构建逻辑。

@Builder
function GlobalBuilderFunction() {
  // 全局构建函数体
}

在应用的任何地方都可以调用全局构建函数，实现全局范围内的构建逻辑复用。

最佳实践与建议

  1. 合理使用参数传递： 在使用 @Builder 装饰器时，根据实际需求选择合适的参数传递方式。按值传递适用于不需要响应外部变化的场景，而按引用传递适用于需要响应外部变化的场景。

  2. 充分利用 this 指向： 在自定义构建函数内部，充分利用 this 指向，访问和操作组件内的状态变量，实现更灵活的构建逻辑。

  3. 全局构建函数的谨慎使用： 全局构建函数适用于通用逻辑，但在使用时要谨慎，确保其不依赖于特定组件的状态或上下文。

  4. 构建函数的命名规范： 为了提高代码的可读性，建议根据构建函数的功能给予清晰的命名，使其用途一目了然。

@BuilderParam装饰器：引用@Builder函数

在ArkUI中，当开发者创建自定义组件时，有时希望对组件添加特定的功能，例如在自定义组件中添加一个点击跳转操作。直接在组件内嵌入事件方法可能导致所有引入该自定义组件的地方都增加了该功能。为解决这个问题，ArkUI引入了@BuilderParam装饰器。@BuilderParam用来装饰指向@Builder方法的变量，开发者可以在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器类似于一个占位符，用于声明任意UI描述的一个元素。

说明

从API version 9开始，该装饰器支持在ArkTS卡片中使用。

装饰器使用说明

初始化@BuilderParam装饰的方法

@BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。

  1. 使用所属自定义组件的自定义构建函数或全局的自定义构建函数，在本地初始化@BuilderParam。
@Builder function GlobalBuilder0() {}

@Component
struct Child {
  @Builder doNothingBuilder() {};

  @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  build(){}
}
  1. 用父组件自定义构建函数初始化子组件@BuilderParam装饰的方法。
@Component
struct Child {
  @BuilderParam aBuilder0: () => void;

  build() {
    Column() {
      this.aBuilder0()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`Parent builder `)
  }

  build() {
    Column() {
      Child({ aBuilder0: this.componentBuilder })
    }
  }
}

注意： 在这个例子中，当父组件的构建函数 componentBuilder 传递给子组件的 aBuilder0 时，this 指向正确，即指向父组件。

@Component
struct Child {
  label: string = `Child`
  @BuilderParam aBuilder0: () => void;

  build() {
    Column() {
      this.aBuilder0()
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = `Parent`

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ aBuilder0: this.componentBuilder })
    }
  }
}

在这里插入图片描述

使用场景

1. 参数初始化组件

@BuilderParam装饰的方法可以是有参数和无参数的两种形式，需要与指向的@Builder方法类型匹配。

@Builder function GlobalBuilder1($$ : {label: string }) {
  Text($$.label)
    .width(400)
    .height(50)
    .backgroundColor(Color.Blue)
}

@Component
struct Child {
  label: string = 'Child'
  // 无参数类，指向的componentBuilder也是无参数类型
  @BuilderParam aBuilder0: () => void;
  // 有参数类型，指向的GlobalBuilder1也是有参数类型的方法
  @BuilderParam aBuilder1: ($$ : { label : string}) => void;

  build() {
    Column() {
      this.aBuilder0()
      this.aBuilder1({label: 'global Builder label' } )
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = 'Parent'

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })
    }
  }
}

2. 尾随闭包初始化组件

在自定义组件中使用@BuilderParam装饰的属性时，也可以通过尾随闭包进行初始化。在初始化自定义组件时，组件后紧跟一个大括号“{}”形成尾随闭包场景。

// xxx.ets
@Component
struct CustomContainer {
  @Prop header: string;
  @BuilderParam closer: () => void

  build() {
    Column

() {
      Text(this.header)
        .fontSize(30)
      this.closer()
    }
  }
}

@Builder function specificParam(label1: string, label2: string) {
  Column() {
    Text(label1)
      .fontSize(30)
    Text(label2)
      .fontSize(30)
  }
}

@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';

  build() {
    Column() {
      // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
      // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
      CustomContainer({ header: this.text }) {
        Column() {
          specificParam('testA', 'testB')
        }.backgroundColor(Color.Yellow)
        .onClick(() => {
          this.text = 'changeHeader';
        })
      }
    }
  }
}

通过不同的初始化方式和使用场景，开发者可以更好地掌握 @BuilderParam 装饰器的使用方法，提高代码的可读性和可维护性。

未来展望

ArkTS作为HarmonyOS应用开发的主力语言，未来将持续演进。计划逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性，以满足不断变化的应用开发需求。

结语

通过深入理解 @Builder 装饰器，我们可以更好地使用自定义构建函数来实现 UI 元素的复用，提高代码的可维护性和可读性。这一特性使得 ArkTS 在应用开发中更加灵活，让开发者能够更轻松地构建复杂的用户界面。在实际应用中，合理使用 @Builder 装饰器将为项目带来更多的便利。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1246360.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用骨传导耳机会伤耳朵吗？一文读懂骨传导耳机有哪些优点

使用骨传导耳机会伤耳朵吗？一文读懂骨传导耳机有哪些优点

首先说明，如果是正确的使用骨传导耳机是不会伤耳朵。 一、骨传导耳机的传声原理是什么？ 声音的传播需要介质，传统的耳机是通过空气来进行传播，也被称为“空气传导耳机”，而骨传导耳机最大的特别之处就在于&#xff0…
阅读更多...
ke12Servlet规范有三个高级特性,,文件上传下载

ke12Servlet规范有三个高级特性,,文件上传下载

1Servlet规范有三个高级特性 分别是Filter、Listener和文件的上传下载。Filter用于修改request、response对象，Listener用于监听context、session、request事件。 熟悉Filter的生命周期 了解Filter及其相关API 掌握Filter的实现 掌握Filter的映射与过滤器链的使用…
阅读更多...
CTA-GAN：基于生成对抗性网络的主动脉和颈动脉非集中CT血管造影 CT到增强CT的合成技术

CTA-GAN：基于生成对抗性网络的主动脉和颈动脉非集中CT血管造影 CT到增强CT的合成技术

Generative Adversarial Network–based Noncontrast CT Angiography for Aorta and Carotid Arteries 基于生成对抗性网络的主动脉和颈动脉非集中CT血管造影背景贡献实验方法损失函数Thinking 基于生成对抗性网络的主动脉和颈动脉非集中CT血管造影 https://github.com/ying-f…
阅读更多...
Navicat 技术指引 | 连接 GaussDB 主备版

Navicat 技术指引 | 连接 GaussDB 主备版

Navicat Premium（16.2.8 Windows版或以上） 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能，还提供强大的高阶功能（如模型、结构同步、协同合作、数据迁移等），这…
阅读更多...
黑马点评笔记 redis缓存三大问题解决

黑马点评笔记 redis缓存三大问题解决

文章目录 缓存问题缓存穿透问题的解决思路编码解决商品查询的缓存穿透问题 缓存雪崩问题及解决思路缓存击穿问题及解决思路问题分析使用锁来解决代码实现 逻辑过期方案代码实现 缓存问题 我们熟知的是用到缓存就会遇到缓存三大问题： 缓存穿透缓存击穿缓存雪崩 接…
阅读更多...
2021年03月 Scratch（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年03月 Scratch（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试（1~4级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 在《采矿》游戏中，当角色捡到黄金时财富值加1分，捡到钻石时财富值加2分，下面哪个程序实现这个功能？ A： B： C： D： 答案：D A将变量值固定，BC为双重判断
阅读更多...
SPSS系统聚类

SPSS系统聚类

前言： 本专栏参考教材为《SPSS22.0从入门到精通》，由于软件版本原因，部分内容有所改变，为适应软件版本的变化，特此创作此专栏便于大家学习。本专栏使用软件为：SPSS25.0 本专栏所有的数据文件请点击此链接下…
阅读更多...
短视频获客系统成功分享，与其开发流程与涉及到的技术

短视频获客系统成功分享，与其开发流程与涉及到的技术

先来看实操成果，↑↑需要的同学可看我名字↖↖↖↖↖，或评论888无偿分享 一、短视频获客系统的开发流程 1. 需求分析：首先需要对目标用户进行深入了解，明确系统的功能和目标，制定详细的需求文档。 2. 系统设计&#…
阅读更多...
Android开发从0开始（ContentProvider与数据）

Android开发从0开始（ContentProvider与数据）

内容提供者&#xff1a;ContentProvider 为App存取内部数据提供外部接口&#xff0c;让不同应用共享数据。 ①在配置里AndroidManifest.xml <provider android:name".UserInfoProvider" android:authorities"com.example.chapter07_server.provider.U…
阅读更多...
springboot+vue基本微信小程序的旅游社系统

springboot+vue基本微信小程序的旅游社系统

项目介绍 现今市面上有关于旅游信息管理的微信小程序还是比较少的&#xff0c;所以本课题想对如今这么多的旅游景区做一个收集和分类。这样可以给身边喜欢旅游的朋友更好地推荐分享适合去旅行的地方。 前端采用HTML架构&#xff0c;遵循HTMLss JavaScript的开发方式&#xff0…
阅读更多...
MySQL数据库入门到大牛_基础_14_视图及基本操作

MySQL数据库入门到大牛_基础_14_视图及基本操作

本章开始将会介绍表之外的数据库对象。 文章目录 1. 常见的数据库对象2. 视图概述2.1 为什么使用视图&#xff1f;2.2 视图的理解 3. 创建视图3.1 创建单表视图3.2 创建多表联合视图3.3 基于视图创建视图 4. 查看视图5. 更新视图的数据5.1 一般情况5.2 不可更新的视图 6. 修改…
阅读更多...
3款免费次数多且功能又强大的国产AI绘画工具

3款免费次数多且功能又强大的国产AI绘画工具

hi&#xff0c;同学们&#xff0c;本期是我们第55 期 AI工具教程 最近两个月&#xff0c;国内很多AI绘画软件被关停&#xff0c;国外绝大部分AI绘画工具费用不低&#xff0c;因此 这两天我 重新整理 国产 AI绘画 工具 &#xff0c; 最终 筛选了 3款功能强大&#xf…
阅读更多...
[每周一更]-(第74期)：Docker-compose 部署Jenkins容器-英文版及错误纠错

[每周一更]-(第74期)：Docker-compose 部署Jenkins容器-英文版及错误纠错

1、前文概要 通过物理机部署Jenkins前文已经讲过&#xff08;地址&#xff1a;[Jenkins] 物理机 安装 Jenkins&#xff09;&#xff0c;也已经公司内部平稳运行若干年&#xff0c;考虑到容器化的使用场景&#xff0c;部分项目都采用容器运行&#xff0c;开始考虑部署容器化的J…
阅读更多...
JAVA毕业设计112—基于Java+Springboot+Vue的宠物领养社区小程序(源码+数据库)

JAVA毕业设计112—基于Java+Springboot+Vue的宠物领养社区小程序(源码+数据库)

基于JavaSpringbootVue的宠物领养社区小程序(源码数据库)112 一、系统介绍 本系统前后端分离带小程序 小程序&#xff08;用户端&#xff09;&#xff0c;后台管理系统&#xff08;管理员&#xff09; 小程序&#xff1a; 登录、注册、宠物领养、发布寻宠、发布领养、宠物社…
阅读更多...
数据黑洞，正在悄悄吞噬你的门店业绩

数据黑洞，正在悄悄吞噬你的门店业绩

互联网兴起以来&#xff0c;线下门店的数字化程度始终落后于线上。一个重要的原因是&#xff1a;线下信息不像线上那样简单、集中、易于统计。很多重要数据隐藏于「黑洞」之中&#xff0c;收集和分析成本极为高昂。这极大束缚了门店业绩的提升。 而反过来看&#xff0c;线下场景…
阅读更多...
2023亚太杯数学建模A题思路分析 - 采果机器人的图像识别技术

2023亚太杯数学建模A题思路分析 - 采果机器人的图像识别技术

1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有一个&#xff0c;全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…
阅读更多...
基于亚马逊云科技大语言模型等服务打造企业知识库

基于亚马逊云科技大语言模型等服务打造企业知识库

背景 大语言模型是自然语言处理领域的一项重要技术&#xff0c;能够通过学习大量的文本数据&#xff0c;生成具有语法和意义的自然语言文本。目前大语言模型已经成为了自然语言处理领域的一个热门话题&#xff0c;引起了广泛的关注和研究。 知识库需求在各行各业中普遍存在&a…
阅读更多...
1）业务平台集成电子签章平台

1）业务平台集成电子签章平台

1.前言 电子签章平台随着企业数字化转型逐步渗透到日常运营项目中&#xff0c;如合同盖章/规章制度发布/法审意见等场景下引入电子章解决盖章需求。 作为特定业务下的统一处理方案&#xff0c;需要在业务管理平台与电子签章平台之间构建一个桥梁&#xff0c;简化电子签章平台…
阅读更多...
Hadoop学习总结（MapReduce的数据去重）

Hadoop学习总结（MapReduce的数据去重）

现在假设有两个数据文件 file1.txtfile2.txt2018-3-1 a 2018-3-2 b 2018-3-3 c 2018-3-4 d 2018-3-5 a 2018-3-6 b 2018-3-7 c 2018-3-3 c2018-3-1 b 2018-3-2 a 2018-3-3 b 2018-3-4 d 2018-3-5 a 2018-3-6 c 2018-3-7 d 2018-3-3 c 上述文件 file1.txt 本身包含重复数据&…
阅读更多...
测试Bard和ChatGPT对双休有关法规的认知和简单推理

测试Bard和ChatGPT对双休有关法规的认知和简单推理

Bard是试验品&#xff0c;chatgpt是3.5版的。 首先带着问题&#xff0c;借助网络搜索&#xff0c;从政府官方网站等权威网站进行确认&#xff0c;已知正确答案的情况下&#xff0c;再来印证两个大语言模型的优劣。 想要了解的问题是&#xff0c;在中国&#xff0c;跟法定工作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023