当前位置: 首页 > news >正文

鸿蒙开发-ArkTS 创建自定义组件

在 ArkTS 中创建自定义组件是一个相对简单但功能强大的过程。以下是如何在 ArkTS 中创建和使用自定义组件的详细步骤:

一、定义自定义组件

  1. 使用@Component注解:为了注册一个组件,使其能够在其他文件中被引用,你需要使用@Component注解。例如:
@Component
struct MyComponent {build() {Column() {Text('自定义组件')Button('点击')}}
}
  1. 组件命名规则:一个项目下所有的自定义组件名不可以重复,无论是否在一个.ets文件中。
  2. 根组件要求:被@Component装饰的组件(包括主组件和其他自定义组件),其build()方法中必须有且仅有一个根容器组件。

二、自定义组件的属性与样式

  1. 属性:你可以在组件中定义属性,并通过父组件传递值来动态改变这些属性。例如,通过@State定义状态变量,并在build()方法中使用这些变量。
  2. 样式:组件内的样式不会受外界调用时的影响,只会缩放(可能还会直接少显示一部分),不会改变颜色、位置、方法等。因此,在使用组件时,需要给其留有充足的位置。

三、自定义组件的成员变量与函数

  1. 成员变量:为了更好的让自定义组件灵活使用,ArkTS允许对自定义组件里面的成员变量进行赋值,但是不允许对成员函数赋值。如果要改变函数,则需要使用箭头函数的形式来调用函数。
  2. 成员函数:你可以在组件中定义成员函数,并在需要时调用它们。例如,定义一个按钮的点击事件处理函数。

四、使用@BuilderParams传递UI组件

在组件中,你可以使用@BuilderParam来指定一个为箭头函数的成员参数,这个箭头函数可以设置一个初始的默认值。这样,父组件就可以在调用子组件时,传入自定义的结构来替换子组件的默认结构。这类似于Vue中的插槽功能。

五、自定义布局

如果默认的布局方式不能满足你的需求,你还可以自定义布局。这通常涉及到重写onMeasureSizeonPlaceChildren方法,以精确控制子组件的位置和大小。

六、示例

以下是一个完整的示例,展示了如何创建一个自定义组件并在父组件中使用它:

// 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项目&#xff1a…...

云计算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详细使用教程

序言 我们平常写广搜什么&#xff0c;上来就是一句 queue<XXX> qu; 说明队列时很重要的。 STL库中的queue把队列的各种操作封装成一个类&#xff0c;非常方便&#xff0c;信奥中使用它也是很有优势的。 目录 一、队列的定义 二、创建队列对象 三、队列的初始化 四、常…...

【前端】JavaScript 中的 filter() 方法的理论与实践深度解析

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;filter() 方法的概念与原理1. 什么是 filter()&#xff1f;2. 基本工作原理3. 方法特点4. 用法格式参数解析 &#x1f4af;代码案例详解示例&#xff1a;筛选有效数字并…...

【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法&#xff0c;即分类正确率仅比随机猜测略高的学习算法&#xff0c;但是组合之后的效果仍可能高于…...

JVM运行时数据区内部结构

VM内部结构 对于jvm来说他的内部结构主要分成三个部分&#xff0c;分别是类加载阶段&#xff0c;运行时数据区&#xff0c;以及垃圾回收区域&#xff0c;类加载我们放到之后来总结&#xff0c;今天先复习一下类运行区域 首先这个区域主要是分成如下几个部分 下面举个例子来解释…...

Navicat for MySQL 查主键、表字段类型、索引

针对Navicat 版本11 &#xff0c;不同版本查询方式可能不同 1、主键查询 &#xff08;重点找DDL&#xff01;&#xff01;&#xff01;&#xff09; 方法&#xff08;1&#xff09; &#xff1a;右键 - 对象信息 - 选择要查的表 - DDL - PRIMARY KEY 方法&#xff08;2&…...

如何在谷歌浏览器中实现自定义主题

在数字化时代&#xff0c;个性化设置已成为提升用户体验的重要一环。对于广泛使用的谷歌浏览器而言&#xff0c;改变默认的浏览器主题不仅能够美化界面&#xff0c;还能在一定程度上提升使用效率和愉悦感。本文将详细介绍如何在谷歌浏览器中实现自定义主题&#xff0c;包括从官…...

visual studio 2022 c++使用教程

介绍 c开发windows一般都是visual studio&#xff0c;linux一般是vscode&#xff0c;但vscode调试c不方便&#xff0c;所以很多情况都是2套代码&#xff0c;在windows上用vs开发方便&#xff0c;在转到linux。 安装 1、官网下载vs2022企业版–选择桌面开发–安装位置–安装–…...

曝光三要素

一光圈 光圈越大&#xff0c;数值越小&#xff0c;画面越亮&#xff0c;背景越模糊 光圈越小&#xff0c;数值越大&#xff0c;画面越暗&#xff0c;背景越清晰 二 快门 快门最主要的作用是控制曝光时间的长短 快门速度的单位是秒&#xff0c;一般用 1秒&#xff0c;1/8秒&am…...

01-2 :PyCharm安装配置教程(图文结合-超详细)

一、PyCharm安装 PyCharm集成开发工具&#xff08;IDE&#xff09;&#xff0c;是当下全球Python开发者&#xff0c;使用最频繁的工具软件。 绝大多数的Python程序&#xff0c;都是在PyCharm工具内完成的开发。 本篇文章基于PyCharm软件工具进行描述&#xff0c;教你如何安装…...

类OCSP靶场-Kioptrix系列-Kioptrix Level 1

一、前情提要 二、实战打靶 1. 信息收集 1.1. 主机发现 1.2. 端口扫描 1.3 目录爆破 1.4. 敏感信息 2.根据服务搜索漏洞 2.1. 搜索exp 2.2. 编译exp 2.3. 查看exp使用方法&#xff0c;并利用 3. 提权 二、第二种方法 一、前情提要 Kioptrix Level是免费靶场&#x…...

Maven插件打包发布远程Docker镜像

dockerfile-maven-plugin插件的介绍 dockerfile-maven-plugin目前这款插件非常成熟&#xff0c;它集成了Maven和Docker&#xff0c;该插件的官方文档地址如下&#xff1a; 地址&#xff1a;https://github.com/spotify/dockerfile-maven 其他说明&#xff1a; dockerfile是用…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...