news 2026/5/26 4:02:46

ArkUI -- wrapBuilder mutableBuilder (组件扩展)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
ArkUI -- wrapBuilder mutableBuilder (组件扩展)

wrapBuilder:封装全局@Builder

@Builder 构建的构造函数无法作为参数传递,ArkUI 引入了wrapBuilder作为全局@Builder 的封装函数,wrapBuilder 会返回一个WrappedBuilder对象,用于全局@Builder 的赋值和传递。

  • wrapBuilder 方法只能传入全局@Builder方法
  • 在同一个自定义组件内,同一个 wrapBuilder 只能初始化一次,再次调用将不会生效
  • WrappedBuilder 对象的 builder 属性方法仅限在struct内部使用

wrapBuilder

wrapBuilder是一个模板函数,返回一个 WrappedBuilder 对象

declarefunctionwrapBuilder<ArgsextendsObject[]>(builder:(...args:Args)=>void):WrappedBuilder<Args>;

WrappedBuilder对象也是一个模板类

declareclassWrappedBuilder<ArgsextendsObject[]>{builder:(...args:Args)=>void;constructor(builder:(...args:Args)=>void);}

模板参数Args extends Object[]需要匹配 @Builder 函数参数的类型

【示例】

@BuilderfunctionitemBuilder(value:string,size:number){Text(value).fontSize(size)}//WrappedBuilder 的参数类型,与 @Builder 函数的参数类型一致letglobalBuilder:WrappedBuilder<[string,number]>=wrapBuilder(itemBuilder);@Componentstruct TestIndex{@Statemessage:string='wrapBuilder test'build(){Column(){globalBuilder.builder(this.message,50)}.width('100%').height('100%')}}

【引用传递】

按引用传递参数时,状态变量的改变会引起 @Builder 方法内的UI刷新

classTemplateData{publicfloorName:string='test'}@BuilderfunctionfloorBuilder(data:TemplateData){Text(data.floorName).width('100%').textAlign(TextAlign.Center).borderWidth(1)}constfloorBuild:WrappedBuilder<[TemplateData]>=wrapBuilder(floorBuilder);@Entry@Componentstruct Index{@Statedata:TemplateData=newTemplateData();build(){Column({space:20}){// 按引用传入参数时,状态变量的改变会引起 @Builder 方法内的 UI 刷新floorBuild.builder({floorName:this.data.floorName})// 直接传入对象实例,状态变量的改变不会触发 UI 刷floorBuild.builder(this.data)Button('change name').onClick(()=>{this.data.floorName+='-'})}}}

mutableBuilder

API22 开始,推荐使用mutableBuilder,支持二次赋值后刷新UI
wrapBuilder 只能初始化一次,不支持动态切换 @Builder,引入 mutableBuilder 作为动态全局 @Builder 的封装函数,mutableBuilder 返回 MutableBuilder 对象,用于全局 @Builder 的动态刷新。

mutableBuilder是一个模板函数,返回一个 MutableBuilder 对象

declarefunctionmutableBuilder<ArgsextendsObject[]>(builder:BuilderCallback):MutableBuilder<Args>;

MutableBuilder对象是一个模板类,继承自 WrappedBuilder

declareclassMutableBuilder<ArgsextendsObject[]>extendsWrappedBuilder<Args>{}

MutableBuilder 继承自 WrappedBuilder,即 mutableBuilder 对应的 @Builder 具有与 WrappedBuilder 同等能力,其也可用于创建 ComponentContent 实例,作为openCustomDialogtabBar等的入参

  • mutableBuilder 方法只能传入全局@Builder方法,传入局部@Builder方法编译时报错
  • MutableBuilder 对象的 builder 方法仅限在自定义组件内部使用,在自定义组件外面使用会导致程序运行时崩溃
  • MutableBuilder 与 wrapBuilder 不可混用,会导致不符合预期的更新

动态更新全局@Builder

@BuilderfunctiontextBuilder(title:string){Text(title).width('100%').textAlign(TextAlign.Center).borderWidth(1)}@BuilderfunctionbuttonBuilder(title:string){Button(title)}@Entry@Componentstruct Index{@StatebuildText:boolean=true;@Statemessage:string='text builder';@LocalcontentBuild:MutableBuilder<[string]>=mutableBuilder(textBuilder);build(){Column({space:20}){this.contentBuild.builder(this.message)// 点击按钮,动态更新 @BuilderButton('change builder').onClick(()=>{this.buildText=!this.buildText;if(this.buildText){this.message='text builder';this.contentBuild=mutableBuilder(textBuilder);}else{this.message='button builder';this.contentBuild=mutableBuilder(buttonBuilder);}})}}}

@Monitor 监听 @Builder 的变化

mutableBuilder对应的 @Builder 函数中可使用MutableBinding进行包裹来观察状态变量的变化,同时可通过@MonitoraddMonitor监听 mutableBuilder 中 @Builder 的变化

@BuilderfunctiontextBuilder(title:string){Text(title).width('100%').textAlign(TextAlign.Center).borderWidth(1)}@BuilderfunctionbuttonBuilder(title:string){Button(title)}@Entry@Componentstruct Index{@StatebuildText:boolean=true;@Statemessage:string='text builder';@LocalcontentBuild:MutableBuilder<[string]>=mutableBuilder(textBuilder);@Monitor('contentBuild')variableChange(m:IMonitor):void{console.info('Builder changed');}build(){Column({space:20}){this.contentBuild.builder(this.message)// 点击按钮,动态更新 @BuilderButton('change builder').onClick(()=>{this.buildText=!this.buildText;if(this.buildText){this.message='text builder';this.contentBuild=mutableBuilder(textBuilder);}else{this.message='button builder';this.contentBuild=mutableBuilder(buttonBuilder);}})}}}

点击按钮,切换 @Builder 时,@Monitor 会监听到全局 @Builder 的变化,打印日志

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/26 4:02:28

DeepSeek灰度发布策略全拆解:5类流量切分陷阱+3种熔断阈值设定公式

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek灰度发布策略全景概览 DeepSeek模型服务的灰度发布并非简单的流量切分&#xff0c;而是一套融合可观测性、渐进式验证与多维回滚能力的工程化闭环体系。其核心目标是在保障线上推理稳定性的同时&…

作者头像 李华
网站建设 2026/5/26 3:54:06

Direct Corpus Interaction (DCI) 论文理念助力Agent发展

一、核心设计理念&#xff1a;接口翻转DCI的根本设计思路是把语义理解的责任从索引层下移到LLM层。传统流程&#xff1a;原始语料 → 切块 → 向量化/建索引 → top-k过滤 → LLM推理DCI流程&#xff1a;原始语料 ←→ LLM&#xff08;直接用终端工具操作&#xff0c;自己决定搜…

作者头像 李华
网站建设 2026/5/26 3:52:04

C++11——并发库介绍

说明&#xff1a;本篇旨在介绍并发库怎么使用&#xff0c;介绍的不会太全面。前置条件是了解 Linux/window 的相应的系统调用再看。这是文档&#xff1a;cplusplus。 1、<thread>库 1.1 说明 其实 C 的 <thread> 库就是对系统调用封装了一层&#xff08;其实不仅是…

作者头像 李华
网站建设 2026/5/26 3:50:10

STM32CubeMX保姆级教程:从零点亮STM32F103C8T6最小系统板的LED

STM32CubeMX零基础实战&#xff1a;点亮你的第一颗LED 拿到STM32开发板的第一天&#xff0c;就像站在乐高积木城堡前的孩子——那些密密麻麻的引脚和陌生的专业术语让人既兴奋又忐忑。本文将带你用最直观的方式跨出第一步&#xff1a;让板载的LED灯亮起来。这不是简单的步骤罗列…

作者头像 李华
网站建设 2026/5/26 3:48:47

没有银弹,从来就没有

我反复回想起Fred Brooks在1986年写的一段话。 他的论点很简单。没有任何单一发明、工具或技术能让构建软件变得 dramatically 更容易。进步确实在发生&#xff0c;但它永远是局部的&#xff0c;永远留下某些未解决的问题。 四十年后&#xff0c;我认为他是对的。而我认为我们…

作者头像 李华