【HarmonyOS 4.0】@BuilderParam 装饰器

1. @BuilderParam 装饰器

  1. @BuilderParam 装饰器用于装饰自定义组件(struct)中的属性,其装饰的属性可作为一个UI结构的占位符,待创建该组件时,可通过参数为其传入具体的内容。
  2. 参数必须满足俩个条件:
    2.1 参数类型必须是个函数;
    2.2 参数必须是个UI结构;
  3. 因此这个参数就是 @Builder 方法
  4. 在这里插入图片描述

1.1 代码案例如下:

// 第一个Builder
@Builder
export function imageBuilder() {Column({ space: 10 }) {Image($r('app.media.app_icon')).width('70%').height('70%').objectFit(ImageFit.Contain)Text('@BuilderParam装饰器:引用@Builder函数').fontSize(16).fontWeight(FontWeight.Bold)}
}// 第二个Builder
@Builder
export function textBuilder() {Column({ space: 10 }) {Text('@BuilderParam装饰器:引用@Builder函数').fontSize(16).fontWeight(FontWeight.Bold)Text('当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。').fontSize(14).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(6)}
}// 自定义子组件
import { textBuilder } from './TextBuilder'@Extend(Column)
function columnStyle() {.width('90%').height(180).borderRadius(10).shadow({ radius: 20 }).padding(10)
}@Component
export struct Card {@BuilderParam content: () => void = textBuilderbuild() {Column({ space: 20 }) {Column() {this.content()}.columnStyle()}}
}// 父组件
import { imageBuilder } from "./ImageBuilder"
import { textBuilder } from './TextBuilder'
import { Card } from "./Card"@Entry
@Component
struct Index {private scroller: Scroller = new Scroller()build() {Scroll(this.scroller) {Column({ space: 20 }) {Card({ content: imageBuilder })Card({ content: textBuilder })Divider()Card({ content: textBuilder })Card({ content: imageBuilder })}.width('100%')}}
}

1.2 如果一个组件只定义一个 @BuilderParam 属性,那么创建该组件时,也可直接通过“子组件”的方式传入具体的UI结构。

// 子组件
@Extend(Column)
function columnStyle() {.width('90%').height(180).borderRadius(10).shadow({ radius: 20 }).padding(10)
}@Component
export struct Card {@BuilderParam content: () => voidbuild() {Column({ space: 20 }) {Column() {this.content()}.columnStyle()}}
}// 父组件
import { Card } from "./Card"@Entry
@Component
struct Index {build() {Column({ space: 20 }) {Card() {Column({ space: 10 }) {Image($r('app.media.app_icon')).width('70%').height('70%').objectFit(ImageFit.Contain)Text('@BuilderParam装饰器:引用@Builder函数').fontSize(16).fontWeight(FontWeight.Bold)}}}.height('100%').width('100%')}
}

1.3 未知代码:

// 第一个Builder
@Builder
export function imageBuilder(title: string) {Column({ space: 10 }) {Image($r('app.media.app_icon')).width('70%').height('70%').objectFit(ImageFit.Contain)Text(title).fontSize(16).fontWeight(FontWeight.Bold)}
}// 第二个Builder
class TextObjBuilder {title: string = ''container: string = ''
}@Builder
export function textBuilder($$: TextObjBuilder) {Column({ space: 10 }) {Text($$.title).fontSize(16).fontWeight(FontWeight.Bold)Text($$.container).fontSize(14).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(6)}
}// 自定义组件
import { imageBuilder } from "./ImageBuilder"
import { textBuilder } from './TextBuilder'@Extend(Column)
function columnStyle() {.width('90%').height(180).borderRadius(10).shadow({ radius: 20 }).padding(10)
}class TextObjBuilder {title: string = ''container: string = ''
}@Entry
@Component
struct Index {@State title: string = '@BuilderParam装饰器:引用@Builder函数'@State container: string ='当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。'@BuilderParam content1: (title: string) => void = imageBuilder@BuilderParam content2: (TextObjBuilder: TextObjBuilder) => void = textBuilderbuild() {Column({ space: 20 }) {Column() {this.content1(this.title)}.columnStyle()Column() {this.content2({ title: this.title, container: this.container })}.columnStyle()}.height('100%').width('100%')}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows安全软件之火绒杀毒的密码忘记后处理

一、问题描述 某次,想升级系统补丁,但多次尝试后都失败,排查杀毒软件影响过程中,发现火绒杀毒配置了密码保护,但因时间太久,密码已无从考证,那我们应该怎样处理这种情况呢? 二、处…

鸿蒙XComponent组件的认识

概述: XComponent组件作为一种渲染组件,通常用于满足开发者较为复杂的自定义渲染需求,例如相机预览流的显示、游戏画面的渲染、自定义视频播放器等等。其中Native API是其核心内容! 其可通过指定其type字段来实现不同的功能&…

jenkins安装k8s插件发布服务

1、安装k8s插件 登录 Jenkins,系统管理→ 插件管理 → 搜索 kubernetes,选择第二个 Kubernetes,点击 安装,安装完成后重启 Jenkins 。 2、对接k8s集群、申请k8s凭据 因为 Jenkins 服务器在 kubernetes 集群之外,所以…

解决huggingface下载时Username/Password Authentication Failed.问题

项目场景: 使用huggingface 下载数据集。 问题描述 运行命令: wget https://huggingface.co/datasets/yangtaointernship/RealEstate10K-subset/resolve/main/google_scanned_objects.zip?downloadtrue 完整报错如下: --2024-08-30 15:…

Windows通过网线连接开发板共享网络

Windows端 打开更开适配器选项右键WLAN–属性–共享 右键以太网–属性–Internet协议版本4(TCP/IPv4) 记住IP地址 开发板端 查看网卡 ifconfig设置IP在同一网段 ifconfig eth0 192.168.137.2 netmask 255.255.255.0设置网关 route add default gw 192.168.137.1配置DNS su…

哪个牌子的电容笔好用又实惠?西圣、绿联、摩米士电容笔实测大比拼

​现在市面上的电容笔很多,在选择时会让人感到很纠结。那么多的选择,究竟哪个牌子的电容笔好用又实惠呢?一款优质的电容笔应考虑握持舒适度、笔尖材质、电池续航能力以及书写流畅度等因素。作为一位多年的数码爱好者,我今天将针对…

Android APK打包脚本

build.gradle版本 同目录创建config.gradle文件写入需要的信息入 config.gradle文件内容 ext { /*** 自定义APP运行环境* dev: 开发* test: 测试* pro: 生产*/ env "pro" /*** 动态参数配置,根据自己需要添加参数* APP_ID: 包名* VERSION_CODE: 版本号…

国产网卡品牌崛起,做好网络信息安全的“守门人”

在信息技术日新月异的时代背景下,信息安全不仅关乎个人隐私保护,更是国家安全与经济发展的基石。LR-LINK联瑞凭借其前瞻性的视野和深厚的研发实力,成功自主研发出全国产化的FPGA(现场可编程门阵列)网闸隔离卡方案&…

优质企业上网行为管理软件大盘点

员工在上班时间摸鱼,看似是一个小问题,但却会给企业带来诸多不良影响。首先,摸鱼会降低员工的工作效率,导致工作任务无法按时完成,影响项目进度。其次,摸鱼行为会破坏企业的工作氛围,影响其他员…

零基础学习Python(七)

1. 字符串常用方法 lower()、upper():转换为小写字符串、大写字符串 split(str):按照指定字符串str进行分割,结果为列表: email "123qq.com" print(email.split("")) [123, qq.com] count(str)&#xf…

Linux 安装Mysql保姆级教程

一、检查环境 我们登录服务器,查看之前是否安装过mysql rpm -qa | grep mysql 由于我之前安装过,所以这里是有数据的 如果需要删除重新下载,可以使用 rpm -e mysql57-community-release-el7-10.noarch.rpm 二、安装 1、下载 接下来下载安装…

Hive SQL

一、基本数据类型 tinyint 1byte 有符号整数 smallint 2byte 有符号整数 int 4byte 有符号整数 bigint 8byte 有符号整数 boolean 布尔类型,true或者false float 单精度浮点数 double 双精度浮点数 decim…

电脑C盘临时文件怎么清理?

在解决“C盘临时文件怎么清理?”的问题前,先来一起了解一下清理C盘临时文件的原因: 释放磁盘空间:临时文件可以占用大量磁盘空间,尤其是在长时间未清理的情况下,清理这些文件可以释放空间。提高系统性能&a…

sheng的学习笔记-AI-半监督聚类

AI目录:sheng的学习笔记-AI目录-CSDN博客 半监督学习:sheng的学习笔记-AI-半监督学习-CSDN博客 聚类:sheng的学习笔记-AI-聚类(Clustering)-CSDN博客 均值算法:sheng的学习笔记-AI-K均值算法_k均值算法怎么算迭代两次后的最大…

突发!Runway 从 HuggingFace 及 GitHub 上删库跑路,背后有何隐情?

突发!2024年8月29日Runway 从 HuggingFace 及 GitHub 上删库跑路,背后有何隐情? 🧐 今天我们来聊一聊科技圈一则爆炸性消息:Runway ML 从 HuggingFace 和 GitHub 上删库跑路,毫无预警!这个举动…

properties文件提示未引用

问题描述 以前用的好好的项目,今天突然打开就发现idea不识别spring配置信息显示未引用,如果config代码中引入的配置却可以高亮显示,然后输入spring相关的配置,文件是没有提示的。经过研究发现是spring相关的插件被关闭了。效果如下 解决方法 启用三个插件spring Boot,Sp…

看完这100道软件测试面试题,拿不到offer,算我输

掌握此套面试题,人手至少2份offer,绝不瞎吹!分享给大家。 一、自我介绍 二、灵活问题 1、大概说说之前公司的测试流程 2、测试报告有哪些内容? 3、如何保证用例的覆盖度? 4、什么是测试用例,什么是测试脚本&…

知识社区的小程序源码系统 界面支持万能DIY装修 带源代码包以及搭建部署教程

系统概述 知识社区的小程序源码系统是一款专为构建知识分享和交流社区而设计的强大工具。它提供了完整的源代码包,使开发者能够根据自己的需求进行定制和扩展,打造出个性化的小程序应用。 该系统的界面设计简洁大方,易于操作,同…

【JavaEE】线程安全性问题,线程不安全是怎么产生的,该如何应对

产生线程不安全的原因 在Java多线程编程中,线程不安全通常是由于多个线程同时访问共享资源而引发的竞争条件。以下是一些导致线程不安全的常见原因: 共享可变状态:当多个线程对共享的可变数据进行读写时,如果没有适当的同步机制&…

鸿蒙Next 单元测试框架——hypium

一 框架概述 单元测试框架(hypium)是HarmonyOS上的测试框架,提供测试用例编写、执行、结果显示能力,用于测试系统或应用接口。 表1 单元测试框架功能特性 二 安装使用 目前hypium以npm包的形式发布, 因此需要在Deveco Studio 工程级package.json内配…