鸿蒙开发-ArkTS 创建自定义组件
在 ArkTS 中创建自定义组件是一个相对简单但功能强大的过程。以下是如何在 ArkTS 中创建和使用自定义组件的详细步骤:
一、定义自定义组件
- 使用@Component注解:为了注册一个组件,使其能够在其他文件中被引用,你需要使用
@Component注解。例如:
@Component
struct MyComponent {build() {Column() {Text('自定义组件')Button('点击')}}
}
- 组件命名规则:一个项目下所有的自定义组件名不可以重复,无论是否在一个
.ets文件中。 - 根组件要求:被
@Component装饰的组件(包括主组件和其他自定义组件),其build()方法中必须有且仅有一个根容器组件。
二、自定义组件的属性与样式
- 属性:你可以在组件中定义属性,并通过父组件传递值来动态改变这些属性。例如,通过
@State定义状态变量,并在build()方法中使用这些变量。 - 样式:组件内的样式不会受外界调用时的影响,只会缩放(可能还会直接少显示一部分),不会改变颜色、位置、方法等。因此,在使用组件时,需要给其留有充足的位置。
三、自定义组件的成员变量与函数
- 成员变量:为了更好的让自定义组件灵活使用,ArkTS允许对自定义组件里面的成员变量进行赋值,但是不允许对成员函数赋值。如果要改变函数,则需要使用箭头函数的形式来调用函数。
- 成员函数:你可以在组件中定义成员函数,并在需要时调用它们。例如,定义一个按钮的点击事件处理函数。
四、使用@BuilderParams传递UI组件
在组件中,你可以使用@BuilderParam来指定一个为箭头函数的成员参数,这个箭头函数可以设置一个初始的默认值。这样,父组件就可以在调用子组件时,传入自定义的结构来替换子组件的默认结构。这类似于Vue中的插槽功能。
五、自定义布局
如果默认的布局方式不能满足你的需求,你还可以自定义布局。这通常涉及到重写onMeasureSize和onPlaceChildren方法,以精确控制子组件的位置和大小。
六、示例
以下是一个完整的示例,展示了如何创建一个自定义组件并在父组件中使用它:
// MyComponent.ets
@Component
struct MyComponent {@State message: string = '这是一个自定义组件'build() {Column() {Text(this.message).fontSize(20).width(200).height(20).textAlign(TextAlign.Center).fontColor('#ccc').backgroundColor(Color.White)}}
}// Index.ets
import { MyComponent } from '../components/MyComponent'@Entry
@Component
struct Index {build() {Column() {MyComponent().width('100%').backgroundColor('#BFECFF') // 父组件设置的背景颜色不会改变子组件的背景颜色}}
}
在这个示例中,我们定义了一个名为MyComponent的自定义组件,并在Index组件中使用了它。注意,尽管我们在Index组件中设置了背景颜色,但这并不会改变MyComponent组件的内部样式。
通过以上步骤,你就可以在 ArkTS 中创建和使用自定义组件了。这些组件可以帮助你构建更复杂、更灵活的用户界面。

相关文章:
鸿蒙开发-ArkTS 创建自定义组件
在 ArkTS 中创建自定义组件是一个相对简单但功能强大的过程。以下是如何在 ArkTS 中创建和使用自定义组件的详细步骤: 一、定义自定义组件 使用Component注解:为了注册一个组件,使其能够在其他文件中被引用,你需要使用Component…...
记录学习《手动学习深度学习》这本书的笔记(五)
这一章是循环神经网络,太难了太难了,有很多卡壳的地方理解了好久,比如隐藏层和隐状态的区别、代码的含义(为此专门另写了一篇【笔记】记录对自主实现一个神经网络的步骤的理解)、梯度计算相关(【笔记】记录…...
【Qt】Qt+Visual Studio 2022环境开发
在使用Qt Creator的过程中,项目一大就会卡,所以我一般都是用VS开发Cmake开发, 在上一篇文章中,我已经安装了CMake,如果你没有安装就自己按一下。 记得配置Qt环境变量,不然CMake无法生成VS项目:…...
云计算HCIP-OpenStack04
书接上回: 云计算HCIP-OpenStack03-CSDN博客 12.Nova计算管理 Nova作为OpenStack的核心服务,最重要的功能就是提供对于计算资源的管理。 计算资源的管理就包含了已封装的资源和未封装的资源。已封装的资源就包含了虚拟机、容器。未封装的资源就是物理机提…...
HCIA-Access V2.5_3_2_VLAN数据转发
802.1Q的转发原则--Access-Link 首先看一下Access,对于Access端口来说, 它只属于一个VLAN,它的VLANID等于PVID。 首先看一下接收方向,前面说过交换机内部一定要带标签转发,所以当交换机接收到一个不带tag的数据帧时,会给它打上端…...
transformer学习笔记-导航
本系列专栏,主要是对transformer的基本原理做简要笔记,目前也是主要针对个人比较感兴趣的部分,包括:神经网络基本原理、词嵌入embedding、自注意力机制、多头注意力、位置编码、RoPE旋转位置编码等部分。transformer涉及的知识体系…...
功能篇:JAVA后端实现跨域配置
在Java后端实现跨域配置(CORS,Cross-Origin Resource Sharing)有多种方法,具体取决于你使用的框架。如果你使用的是Spring Boot或Spring MVC,可以通过以下几种方式来配置CORS。 ### 方法一:全局配置 对于所…...
防火墙内局域网特殊的Nginx基于stream模块进行四层协议转发模块的监听443 端口并将所有接收转发到目标服务器
在一些特殊场合下, 公司内部网络防火墙限制, 不能做端口映射, 此时可以使用nginx的做从四层协议转发, 只走tcp/ip协议, 而不走http方式, 可以做waf设置, 就可以做443, 或其它端口, 从而达到被直接转发到远程服务器效果 机房只映射了一个IP:22280, 而需求是这个SDK只能通过…...
【Hive】-- hive 3.1.3 伪分布式部署(单节点)
1、环境准备 1.1、版本选择 apache hive 3.1.3 apache hadoop 3.1.0 oracle jdk 1.8 mysql 8.0.15 操作系统:Mac os 10.151.2、软件下载 https://archive.apache.org/dist/hive/ https://archive.apache.org/dist/hadoop/ 1.3、解压 tar -zxvf apache-hive-4.0.0-bin.tar…...
C++ STL 队列queue详细使用教程
序言 我们平常写广搜什么,上来就是一句 queue<XXX> qu; 说明队列时很重要的。 STL库中的queue把队列的各种操作封装成一个类,非常方便,信奥中使用它也是很有优势的。 目录 一、队列的定义 二、创建队列对象 三、队列的初始化 四、常…...
【前端】JavaScript 中的 filter() 方法的理论与实践深度解析
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯filter() 方法的概念与原理1. 什么是 filter()?2. 基本工作原理3. 方法特点4. 用法格式参数解析 💯代码案例详解示例:筛选有效数字并…...
【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost
集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法,即分类正确率仅比随机猜测略高的学习算法,但是组合之后的效果仍可能高于…...
JVM运行时数据区内部结构
VM内部结构 对于jvm来说他的内部结构主要分成三个部分,分别是类加载阶段,运行时数据区,以及垃圾回收区域,类加载我们放到之后来总结,今天先复习一下类运行区域 首先这个区域主要是分成如下几个部分 下面举个例子来解释…...
Navicat for MySQL 查主键、表字段类型、索引
针对Navicat 版本11 ,不同版本查询方式可能不同 1、主键查询 (重点找DDL!!!) 方法(1) :右键 - 对象信息 - 选择要查的表 - DDL - PRIMARY KEY 方法(2&…...
如何在谷歌浏览器中实现自定义主题
在数字化时代,个性化设置已成为提升用户体验的重要一环。对于广泛使用的谷歌浏览器而言,改变默认的浏览器主题不仅能够美化界面,还能在一定程度上提升使用效率和愉悦感。本文将详细介绍如何在谷歌浏览器中实现自定义主题,包括从官…...
visual studio 2022 c++使用教程
介绍 c开发windows一般都是visual studio,linux一般是vscode,但vscode调试c不方便,所以很多情况都是2套代码,在windows上用vs开发方便,在转到linux。 安装 1、官网下载vs2022企业版–选择桌面开发–安装位置–安装–…...
曝光三要素
一光圈 光圈越大,数值越小,画面越亮,背景越模糊 光圈越小,数值越大,画面越暗,背景越清晰 二 快门 快门最主要的作用是控制曝光时间的长短 快门速度的单位是秒,一般用 1秒,1/8秒&am…...
01-2 :PyCharm安装配置教程(图文结合-超详细)
一、PyCharm安装 PyCharm集成开发工具(IDE),是当下全球Python开发者,使用最频繁的工具软件。 绝大多数的Python程序,都是在PyCharm工具内完成的开发。 本篇文章基于PyCharm软件工具进行描述,教你如何安装…...
类OCSP靶场-Kioptrix系列-Kioptrix Level 1
一、前情提要 二、实战打靶 1. 信息收集 1.1. 主机发现 1.2. 端口扫描 1.3 目录爆破 1.4. 敏感信息 2.根据服务搜索漏洞 2.1. 搜索exp 2.2. 编译exp 2.3. 查看exp使用方法,并利用 3. 提权 二、第二种方法 一、前情提要 Kioptrix Level是免费靶场&#x…...
Maven插件打包发布远程Docker镜像
dockerfile-maven-plugin插件的介绍 dockerfile-maven-plugin目前这款插件非常成熟,它集成了Maven和Docker,该插件的官方文档地址如下: 地址:https://github.com/spotify/dockerfile-maven 其他说明: dockerfile是用…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
边缘计算网关提升水产养殖尾水处理的远程运维效率
一、项目背景 随着水产养殖行业的快速发展,养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下,而且难以实现精准监控和管理。为了提升尾水处理的效果和效率,同时降低人力成本,某大型水产养殖企业决定…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长,WebRTC作为开源实时通信技术,为浏览器与移动应用提供免插件的音视频通信能力,在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能,对实时…...
EEG-fNIRS联合成像在跨频率耦合研究中的创新应用
摘要 神经影像技术对医学科学产生了深远的影响,推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下,基于神经血管耦合现象的多模态神经影像方法,通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里,本研…...
Spring Boot 与 Kafka 的深度集成实践(二)
3. 生产者实现 3.1 生产者配置 在 Spring Boot 项目中,配置 Kafka 生产者主要是配置生产者工厂(ProducerFactory)和 KafkaTemplate 。生产者工厂负责创建 Kafka 生产者实例,而 KafkaTemplate 则是用于发送消息的核心组件&#x…...
