ArkTS-自定义组件学习

文章目录

      • 创建自定义组件
      • 页面和自定义组件生命周期
        • 自定义组件和页面的区别
        • 页面生命周期(即被`@Entry`修饰的组件)
        • 组件生命周期(即被`@Component`修饰的组件)
      • @Builder装饰器:自定义构建函数
        • 按引用传递参数
        • 按值传递参数
      • @BuilderParam装饰器:引用@Builder函数

这个ArkTS-自定义component引入只是一个入坑

创建自定义组件

@Component
export  struct compTest{@State one:string = "Test"build(){// Row(){} //build中只能一个Row(横向)或者是Column(纵向)Column(){Text(this.one)//Text文本和文本内容.fontSize(25)//文本字体大小.fontColor("#f00")//文本字体颜色.onClick(()=>{//文本字体的点击事件this.one = 'hello ArkTS' //改变文本})}}
}

在这里插入图片描述
创建组件,以上三个是关键信息,意思就是组件就要有@Component装饰器和struct(跟java中的class一个性质),在ArkTS中必须要定义build(){}固定格式

页面和自定义组件生命周期

自定义组件和页面的区别
  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用。
  • 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期
    请添加图片描述
页面生命周期(即被@Entry修饰的组件)
  • onPageShow:页面每次显示时触发
  • onPageHide:页面每次隐藏时触发一次
  • onBackPress:当用户点击返回按钮时触发
@Entry
@Component
struct Index {onPageShow(){console.info("Index页面显示了")}build() {Row() {//...}}
}

在这里插入图片描述

组件生命周期(即被@Component修饰的组件)
  • aboutToAppear :组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行
  • aboutToDisappear:在自定义组件即将析构销毁时执行
@Component
export  struct compTest{@State one:string = "Test"aboutToAppear(){console.info("自定义组件compTest调用了")}build(){// Row(){} //build中只能一个Row(横向)或者是Column(纵向)Column(){//...}}

在这里插入图片描述

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

官方@Builder装饰器使用说明

按引用传递参数
ABuilder( $$ : { paramA1: string, paramB1 : string } );

示例

@Builder function myBuilderTest($$: { param: string }){Row(){Text(`${$$.param}`)}
}@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column(){myBuilderTest({param:this.message})}.width('100%')}.height('100%').backgroundColor('#fff')}
}

在这里插入图片描述

按值传递参数
@Builder function myBuilderTest(param: string){Row(){Text(`${param}`)}
}@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column(){myBuilderTest(this.message)}.width('100%')}.height('100%').backgroundColor('#fff')}
}

也是上面的效果,但是按引用传递参数可以传入对象形式的参数

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

在这里插入图片描述

意思就是自定义组件中添加跳转操作和事件方法会导致引入所有引入该组件的自定义组件都会添加这个功能。为了解决这个问题所以出现了@BuilderParam装饰器

@Builder function myBuilderTest($$: { param: string,param1:string }){Row(){Button(`区分${$$.param1}`).onClick(()=>{console.info(`${$$.param}触发事件了`)})}
}@Entry
@Component
struct Index {@Builder myBuildTest2(){Column(){Button(``).onClick(()=>{console.info(`额触发事件了`)})}};@BuilderParam Build1: ($$:{ param: string,param1:string }) => void = myBuilderTest;@BuilderParam Build2: () => void = this.myBuildTest2;build() {Row() {Column(){myBuilderTest({param:this.message,param1:'这是事件1'})this.Build2()}.width('100%')}.height('100%').backgroundColor('#fff')}
}

子组件中@BuilderParam.父组件@Builder使用

@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 })}}
}

俩个组件之间的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 })}}
}

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

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

相关文章

生物动力葡萄酒和有机葡萄酒一样吗?

农业维持了数十万年的文明,但当人类以错误的方式过多干预,过于专注于制造和操纵产品时,农业往往会失败。如果我们的目标是获得最高质量的收成,并长期坚持我们的做法,我们就必须与土地打交道。 当我们开始寻找生物动力…

应用内测分发平台如何上传应用包体?

●您可免费将您的应用(支持苹果.ios安卓.apk文件)上传至咕噜分发平台,我们将免费为应用生成下载信息,但咕噜分发将会对应用的下载次数进行收费(每个账号都享有免费赠送的下载点数以及参加活动的赠送点数)&a…

【电路笔记】-分压器

分压器 文章目录 分压器1、概述2、负载分压器3、分压器网络4、无功分压器4.1 电容分压器4.2 感应分压器 5、总结 有时,需要精确的电压值作为参考,或者仅在需要较少功率的电路的特定阶段之前需要。 分压器是解决此问题的一个简单方法,因为它们…

【Vue】filter的用法

上一篇&#xff1a; vue的指令 https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5502 本篇所使用指令 v-for v-on v-html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

记一次docker服务启动失败解决过程

环境&#xff1a;centos 7.6 报错&#xff1a;start request repeated too quickly for docker.service 由于服务器修复了内核漏洞&#xff0c;需要重启&#xff0c;没想到重启后&#xff0c;docker启动失败了 查看状态 systemctl status docker如下图 里面有一行提示&…

网络互联与IP地址

目录 网络互联概述网络的定义与分类网络的定义网络的分类 OSI模型和DoD模型网络拓扑结构总线型拓扑结构星型拓扑结构环型拓扑结构 传输介质同轴电缆双绞线光纤 介质访问控制方式CSMA/CD令牌 网络设备网卡集线器交换机路由器总结 IP地址A、B、C类IP地址特殊地址形式 子网与子网掩…

DCDC电感发热啸叫原因分析

一、电感发热啸叫原因解析 发热原因&#xff1a;电感饱和&#xff0c;实际使用的电感值<理论电感计算值 原因1&#xff1a;电感选择过小&#xff0c;计算值不合理。 原因2&#xff1a;PCB布局不合理&#xff0c;屏蔽型电感下方应设禁止铺铜区。 啸叫原因&#xff1a; 人耳的…

Log4j2.xml不生效:WARN StatusLogger Multiple logging implementations found:

背景 将 -Dlog4j.debug 添加到IDEA的类的启动配置中 运行上图代码&#xff0c;这里log4j2.xml控制的日志级别是info&#xff0c;很明显是没生效。 DEBUG StatusLogger org.slf4j.helpers.Log4jLoggerFactory is not on classpath. Good! DEBUG StatusLogger Using Shutdow…

Camera Raw v16.0.0(PS Raw增效工具)

Camera Raw 16是一款允许摄影师处理原始图像文件的软件PS增效工具。原始图像文件是未经相机内部软件处理的数码照片&#xff0c;因此包含相机传感器捕获的所有信息。Camera Raw 为摄影师提供了一种在将原始文件转换为更广泛兼容的格式&#xff08;如 JPEG 或 TIFF&#xff09;之…

搭建SRS视频服务器

去官方网站下载FFmpeg6.1 https://ffmpeg.org/download.html拷贝到CentOS7.9中的/opt目录下&#xff0c;解压并重命名 tar -xvf ffmpeg-6.1.tar.xz 解压后编译安装 ./configure make make install从github下载SRS4.0release 解压后 如果ffmpeg的路径不在/usr/local/bin/ffmpe…

【MATLAB】全网入门快、免费获取、持续更新的科研绘图教程系列2

14 【MATLAB】科研绘图第十四期表示散点分布的双柱状双Y轴统计图 %% 表示散点分布的双柱状双Y轴统计图%% Made by Lwcah &#xff08;公众号&#xff1a;Lwcah&#xff09; %% 公众号&#xff1a;Lwcah %% 知乎、B站、小红书、抖音同名账号:Lwcah&#xff0c;感谢关注~ %% 更多…

LeetCode二叉树小题目

Q1将有序数组转换为二叉搜索树 题目大致意思就是从一个数组建立平衡的二叉搜索树。由于数组以及进行了升序处理&#xff0c;我们只要考虑好怎么做到平衡的。平衡意味着左右子树的高度差不能大于1。由此我们可以想着是否能用类似二分递归来解决。 如果left>right,直接返回nul…

IO多路转接之epoll

目录 一. epoll的实现原理 二. epoll的相关接口 2.1 epoll_create -- 创建epoll模型 2.2 epoll_ctl -- 对epoll模型进行控制 2.3 epoll_wait -- 等待epoll所关注的事件就绪 2.4 epoll相关接口的使用方法 三. Epoll服务器的模拟实现 3.1 EpollServer类的声明 3.2 Epoll…

网工内推 | 美的、得力集团,包吃包住,IE认证优先,14薪

01 美的 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1.负责IT网络设备、IDC机房的日常维护巡检、监控和管理&#xff1b; 2.负责路由、交换、防火墙、无线控制器、AP等网络设备的开通、调整、优化升级&#xff1b; 3.负责公司OT、IT网络规划&#xff0c;项目实施以…

路由VRRP配置例子

拓朴如下&#xff1a; 主要配置如下&#xff1a; [R1] interface GigabitEthernet0/0/0ip address 10.1.1.1 255.255.255.0 vrrp vrid 1 virtual-ip 10.1.1.254vrrp vrid 1 priority 200vrrp vrid 1 preempt-mode timer delay 20 # interface GigabitEthernet0/0/1ip address …

【10套模拟】【10】

关键字&#xff1a; 线性探测次数、冒泡交换性质、排序次数最值、bst查找关键字最多比较次数、m叉树空指针域 链表合并、二叉排序树查找x、堆排序

css给盒子写四个角

如图&#xff1a;之前一直用定位 现在发现可以用css写 background: linear-gradient(to top, #306eef, #306eef) left top no-repeat, /*上左*/ linear-gradient(to right, #306eef, #386eef) left top no-repeat, /*左上*/ linear-gradient(to left, #386eef, #306eef) righ…

python opencv -模板匹配

python opencv -模板匹配 模板匹配就是&#xff0c;我们现有一个模板和一个图片&#xff0c;然后&#xff0c;在这个图片中寻找和模板近似的部分。 在opencv 中主要通过cv2.matchTemplate这个函数去实现。 下面我们先看一下&#xff0c;模板图片和需要匹配的图片&#xff1a…

(Matalb时序预测)GA-BP遗传算法优化BP神经网络的多维时序回归预测

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码 四、本文代码数据说明手册分享&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matalb平台编译&am…

Spring IOC 和 AOP

Spring IOC 什么是 IoC ? IoC &#xff08;Inversion of Control 控制反转&#xff09;是一种设计思想&#xff0c;而不是一个具体的技术实现。IoC 的思想就是将原本在程序中手动创建对象的控制权&#xff0c;交由给 Spring 框架来管理。 为什么叫控制反转&#xff1f; 控制…