首页 文章 精选 留言 我的

精选列表

搜索[openharmony],共343篇文章
优秀的个人博客,低调大师

OpenHarmony自定义构建函数:@Builder装饰器

前面章节介绍了如何创建一个自定义组件。该自定义组件内部UI结构固定,仅与使用方进行数据传递。ArkUI还提供了一种更轻量的UI元素复用机制@Builder,@Builder所装饰的函数遵循build()函数语法规则,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。 为了简化语言,我们将@Builder装饰的函数也称为“自定义构建函数”。 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用。 装饰器使用说明 自定义组件内自定义构建函数 定义的语法: @Builder MyBuilderFunction() { ... } 使用方法: this.MyBuilderFunction() { ... } ​ ● 允许在自定义组件内定义一个或多个自定义构建函数,该函数被认为是该组件的私有、特殊类型的成员函数。 ​ ● 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用,但不允许在组件外调用。 ​ ● 在自定义函数体中,this指代当前所属组件,组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。 全局自定义构建函数 定义的语法: @Builder function MyGlobalBuilderFunction() { ... } 使用方法: MyGlobalBuilderFunction() ​ ● 全局的自定义构建函数可以被整个应用获取,不允许使用this和bind方法。 ​ ● 如果不涉及组件状态变化,建议使用全局的自定义构建方法。 参数传递规则 自定义构建函数的参数传递有按值传递和按引用传递两种,均需遵守以下规则: ​ ● 参数的类型必须与参数声明的类型一致,不允许undefined、null和返回undefined、null的表达式。 ​ ● 在@Builder修饰的函数内部,不允许改变参数值。 ​ ● @Builder内UI语法遵循UI语法规则。 按引用传递参数 按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。 class ABuilderParam { paramA1: string = '' paramB1: string = '' } @Builder function ABuilder($$ : ABuilderParam) {...} class ABuilderParam { paramA1: string = '' } @Builder function ABuilder($$: ABuilderParam) { Row() { Text(`UseStateVarByReference: ${$$.paramA1} `) } } @Entry @Component struct Parent { @State label: string = 'Hello'; build() { Column() { // Pass the this.label reference to the ABuilder component when the ABuilder component is called in the Parent component. ABuilder({ paramA1: this.label }) Button('Click me').onClick(() => { // After Click me is clicked, the UI text changes from Hello to ArkUI. this.label = 'ArkUI'; }) } } } 按值传递参数 调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递。 @Builder function ABuilder(paramA1: string) { Row() { Text(`UseStateVarByValue: ${paramA1} `) } } @Entry @Component struct Parent { label: string = 'Hello'; build() { Column() { ABuilder(this.label) } } } 本文由博客一文多发平台 OpenWrite 发布!

优秀的个人博客,低调大师

OpenHarmony装饰指定自定义组件:@BuilderParam装饰器

当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。 说明: 从API version 9开始,该装饰器支持在ArkTS卡片中使用。 装饰器使用说明 初始化@BuilderParam装饰的方法 @BuildParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化。 ​ ● 使用所属自定义组件的自定义构建函数或者全局的自定义构建函数,在本地初始化@BuilderParam。 @Builder function GlobalBuilder0() {} @Component struct Child { @Builder doNothingBuilder() {}; @BuilderParam aBuilder0: () => void = this.doNothingBuilder; @BuilderParam aBuilder1: () => void = GlobalBuilder0; build(){} } ​ ● 用父组件自定义构建函数初始化子组件@BuildParam装饰的方法。 @Component struct Child { @Builder componentBuilder() { Text(`Parent builder `) } @BuilderParam aBuilder0: () => void = this.componentBuilder; build() { Column() { this.aBuilder0() } } } @Entry @Component struct Parent { @Builder componentBuilder() { Text(`Parent builder `) } build() { Column() { Child({ aBuilder0: this.componentBuilder }) } } } ​ ● 需注意this指向正确。 以下示例中,Parent组件在调用this.componentBuilder()时,this.label指向其所属组件,即“Parent”。@Builder componentBuilder()传给子组件@BuilderParam aBuilder0,在Child组件中调用this.aBuilder0()时,this.label指向在Child的label,即“Child”。对于@BuilderParam aBuilder1,在将this.componentBuilder传给aBuilder1时,调用bind绑定了this,因此其this.label指向Parent的label。 说明: 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。 @Component struct Child { @Builder componentBuilder() { Text(`Child builder `) } label: string = `Child` @BuilderParam aBuilder0: () => void = this.componentBuilder; @BuilderParam aBuilder1: () => void = this.componentBuilder; build() { Column() { this.aBuilder0() this.aBuilder1() } } } @Entry @Component struct Parent { label: string = `Parent` @Builder componentBuilder() { Text(`${this.label}`) } build() { Column() { this.componentBuilder() Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) } } } 使用场景 参数初始化组件 @BuilderParam装饰的方法可以是有参数和无参数的两种形式,需与指向的@Builder方法类型匹配。@BuilderParam装饰的方法类型需要和@Builder方法类型一致。 class GlobalBuilderParam { label: string = "" } @Builder function GlobalBuilder1($$ : GlobalBuilderParam) { Text($$.label) .width(400) .height(50) .backgroundColor(Color.Blue) } @Component struct Child { @Builder componentBuilder() { Text(`Child builder `) } label: string = 'Child' // 无参数类,指向的componentBuilder也是无参数类型 @BuilderParam aBuilder0: () => void = this.componentBuilder; // 有参数类型,指向的GlobalBuilder1也是有参数类型的方法 @BuilderParam aBuilder1: ($$ : GlobalBuilderParam) => void = this.componentBuilder; 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 }) } } } 尾随闭包初始化组件 在自定义组件中使用@BuilderParam装饰的属性时也可通过尾随闭包进行初始化。在初始化自定义组件时,组件后紧跟一个大括号“{}”形成尾随闭包场景。 说明: 此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性。 开发者可以将尾随闭包内的内容看做@Builder装饰的函数传给@BuilderParam。示例如下: // xxx.ets class CustomContainerParam { header: string = ''; } @Component struct CustomContainer { @Builder componentCloser() { Text(`Custom closer `) } @Prop header: string = ''; @BuilderParam closer: () => void = this.componentCloser; 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'; param: CustomContainerParam = { header: this.text }; build() { Column() { // 创建CustomContainer,在创建CustomContainer时,通过其后紧跟一个大括号“{}”形成尾随闭包 // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数 CustomContainer(this.param) { Column() { specificParam('testA', 'testB') }.backgroundColor(Color.Yellow) .onClick(() => { this.text = 'changeHeader'; }) } } } } 本文由博客一文多发平台 OpenWrite 发布!

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤,还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色。

Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称,一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring

Spring框架(Spring Framework)是由Rod Johnson于2002年提出的开源Java企业级应用框架,旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念,提供核心容器、应用上下文、数据访问集成等模块,支持整合Hibernate、Struts等第三方框架,其适用范围不仅限于服务器端开发,绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

用户登录
用户注册