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

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 装饰器将为项目带来更多的便利。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Ubuntu18.4中安装wkhtmltopdf + Odoo16配置【二】

Ubuntu18.4中安装wkhtmltopdf + Odoo16配置【二】

deepin Linux 安装wkhtmltopdf 1、先从官网的链接里下载linux对应的包 wkhtmltopdf/wkhtmltopdf 下载需要的版本，推荐版本，新测有效： wkhtmltox-0.12.4_linux-generic-amd64.tar.xz 2、解压下载的文件 解压后会有一个wkhtmltox文件夹 3…
阅读更多...
多行业万能预约门店小程序源码系统 轻松预约 出行无忧 附带完整的搭建教程

多行业万能预约门店小程序源码系统 轻松预约 出行无忧 附带完整的搭建教程

大家好啊，罗峰来给大家分享好用的源码系统了。今天要给大家分享的是一款多行业万能预约门店小程序源码系统。在现实生活中，许多服务行业需要在线预约，如美发店、健身房、旅行社等。然而，对于商家来说，每个行业都有其独…
阅读更多...
服务器系列之 成功解决 com.jcraft.jsch.JSchException: Auth fail

服务器系列之 成功解决 com.jcraft.jsch.JSchException: Auth fail

我 | 在这里 🕵️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 🏠 工作 | 广州 ⭐ Java 全栈开发（软件工程师） 🎃 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 🏷️ 标签 | 男 自律狂人 目标明确 责任心强 ✈️公…
阅读更多...
前置微小信号放大器在生物医学中有哪些应用

前置微小信号放大器在生物医学中有哪些应用

前置微小信号放大器在生物医学领域中具有广泛的应用。生物医学信号通常具有较小的振幅和较低的幅频响应，因此需要借助放大器来增强信号以便进行准确的测量、监测和分析。以下是前置微小信号放大器在生物医学中的主要应用。 心电图（ECG）放大器…
阅读更多...
[Linux] 冯诺依曼体系结构 与 操作系统

[Linux] 冯诺依曼体系结构 与 操作系统

文章目录 1、冯诺依曼体系结构2、操作系统 1、冯诺依曼体系结构 冯诺依曼结构也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置，因此程序指令和数据的宽度相…
阅读更多...
最好的猫罐头品牌有哪些？精选的5款口碑好的猫罐头推荐！

最好的猫罐头品牌有哪些？精选的5款口碑好的猫罐头推荐！

对于一个刚入门的养猫小白来说，面对市面上琳琅满目的猫罐头选择确实让人头大。我们总想选到营养价值高的罐头，但又怕猫咪不喜欢吃，也担心选到不安全的产品。 最好的猫罐头品牌有哪些？根据我开宠物店7年的经验，今天我将…
阅读更多...
2016年2月9日 Go生态洞察：Go语言中的语言和地区匹配

2016年2月9日 Go生态洞察：Go语言中的语言和地区匹配

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…
阅读更多...
2023算力专题研究：算力租赁算力国产化机会

2023算力专题研究：算力租赁算力国产化机会

今天分享的是算力系列深度研究报告：《2023算力专题研究：算力租赁&算力国产化机会》。 （报告出品方：华泰证券） 报告共计：18页 关注算力租赁&算力国产化机会 中美 AI 产业算力层存在差距&#xff…
阅读更多...
ELK企业级日志分析平台——elasticsearch

ELK企业级日志分析平台——elasticsearch

集群部署 文档：https://www.elastic.co/guide/en/elasticsearch/reference/7.6/index.html 下载：https://elasticsearch.cn/download/ 主机 ip 角色 k8s1 192.168.92.11 cerebro elk1 192.168.92.31 elasticsearch elk2 192.168.92.32 elasti…
阅读更多...
docker启动容器失败，然后查看日志，docker logs查看容器出现报错：

docker启动容器失败，然后查看日志，docker logs查看容器出现报错：

docker 启动容器失败，然后docker logs 查看容器出现报错： error from daemon in stream: Error grabbing logs: invalid character l after object key:value pair在网上看到的 解决方案： 找到你日志文件目录： docker inspect …
阅读更多...
在华为昇腾开发板安装gdal-python

在华为昇腾开发板安装gdal-python

作者：朱金灿 来源：clever101的专栏 为什么大多数人学不会人工智能编程？>>> 在华为昇腾开发板安装gdal-python分为两步：编译gdal库和下载gdal对应的python包。 1.编译gdal库 首先下载gdal库，。在linux（arm架构）上编译的gdal库及其第三方库源码，内含一个编译…
阅读更多...
Java Web 学习之路（1） —— 前端篇

Java Web 学习之路（1） —— 前端篇

文章目录 前言1. JS1.1 引入方式1.2 基础语法1.3 函数1.4 对象1.5 事件监听 2. Vue3. Ajax4. Element5. Nginx 前言 在学习后端前，还需要大致了解下前端的一些知识，所以本篇就先快速把前端的一些知识过一遍。本篇不含过多干货和技术知识，仅仅…
阅读更多...
杰发科技AC7801——EEP内存分布情况

杰发科技AC7801——EEP内存分布情况

简介 按照文档进行配置 核心代码如下 /*!* file sweeprom_demo.c** brief This file provides sweeprom demo test function.**//* Includes */ #include <stdlib.h> #include "ac780x_sweeprom.h" #include "ac780x_debugout.h"/* Define …
阅读更多...
程序员兼职需要收藏的防坑技巧

程序员兼职需要收藏的防坑技巧

不管你是刚刚上车的新职员&#xff0c;还是职场经营多年的老手&#xff0c;在零散时间&#xff0c;通过兼职搞一点零花钱&#xff0c;充实一下自己的生活&#xff0c;这是在正常不过的事情&#xff0c;但是很多同学害怕兼职有风险&#xff0c;被骗或者说找不到门路&#xff0c;…
阅读更多...
肌少症合并其他疾病会增加死亡风险 |UK Biobank周报（11.16）

肌少症合并其他疾病会增加死亡风险 |UK Biobank周报（11.16）

欢迎参加郑老师2023年孟德尔随机化课程即将开始 发表文章后退款&#xff01;郑老师科研统计课程详情 英国生物银行&#xff08;UK Biobank&#xff0c;UKB&#xff09;是英国迄今以来规模最大的有关致病或预防疾病的基因和环境因子的信息资源库。目的是探求一些特定基因、生活方…
阅读更多...
Wireshark的捕获过滤器

Wireshark的捕获过滤器

Wireshark的过滤器&#xff0c;顾名思义&#xff0c;作用是对数据包进行过滤处理。具体过滤器包括捕获过滤器和显示过滤器。本文对捕获过滤器进行分析。 捕获过滤器&#xff1a;当进行数据包捕获时&#xff0c;只有那些满足给定的包含/排除表达式的数据包会被捕获。 捕获过滤器…
阅读更多...
外汇天眼：多名投资者账户被恶意清空，远离volofinance！

外汇天眼：多名投资者账户被恶意清空，远离volofinance！

最近&#xff0c;外汇平台volofinance因有多名投资者投诉&#xff0c;“荣幸”成为外汇天眼黑平台榜单中的一员&#xff0c;那么volofinance到底做了什么导致投资者前来投诉曝光呢&#xff1f; 起底volofinace 在网络搜索中&#xff0c;关于volofinance的信息少之又少&#xf…
阅读更多...
Vatee万腾科技的独特力量：Vatee数字时代创新的新视野

Vatee万腾科技的独特力量：Vatee数字时代创新的新视野

在数字化时代的浪潮中&#xff0c;Vatee万腾科技以其独特而强大的创新力量&#xff0c;为整个行业描绘了一幅崭新的视野。这不仅是一场科技创新的冒险&#xff0c;更是对未来数字时代发展方向的领先探索。 Vatee万腾将创新视为数字时代发展的引擎&#xff0c;成为推动行业向前的…
阅读更多...
千万不能下载当当网客户端或者去当当网购物

千万不能下载当当网客户端或者去当当网购物

这个是当当网价格&#xff1a;89块 这是拼多多包含品质险的价格&#xff1a;60元 可以看到从当当网网址里面去买同样的一本书要比在拼多多买贵20块钱 下面这个是从淘宝买的价格&#xff0c;可以看到当当网和淘宝的价格都比拼多多贵了20块钱 当当网的套路是&#xff1a;在其他的…
阅读更多...
文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《计及电动汽车需求响应的高速公路服务区光储充鲁棒优化配置》

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《计及电动汽车需求响应的高速公路服务区光储充鲁棒优化配置》

这个标题涉及到一个关于高速公路服务区的优化配置问题&#xff0c;其中考虑了电动汽车需求响应和光储充的因素。让我们逐步解读这个标题&#xff1a; 高速公路服务区&#xff1a; 涉及到高速公路上的服务区&#xff0c;这是供驾驶员休息、加油、用餐等的地方。 电动汽车需求响…
阅读更多...
最新文章

Copyright @ 2022~2023