第47节 ArkTS 创建自定义组件

embedded/2024/12/20 6:54:57/
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中的插槽功能。

五、自定义布局

如果默认的布局方式不能满足你的需求,你还可以自定义布局。这通常涉及到重写 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 中创建和使用自定义组件了。这些组件可以帮助你构建更复杂、更灵活的用户界面。

http://www.ppmy.cn/embedded/147206.html

相关文章

2024 年最新前端ES-Module模块化、webpack打包工具详细教程(更新中)

模块化概述 什么是模块?模块是一个封装了特定功能的代码块,可以独立开发、测试和维护。模块通过导出(export)和导入(import)与其他模块通信,保持内部细节的封装。 前端 JavaScript 模块化是指…

thinkphp:try-catch捕获异常

使用简单的例子,实现了一个简单的try-catch捕获异常的实例 //开始事务Db::startTrans(); try{ //有异常抛出异常 if(存在错误){ throw new \Exception("异常信息"); } // 提交事务 Db::commit(); // 返回成功信息 ... } catch (\…

Nginx反向代理与负载均衡应用实践

Nginx反向代理与负载均衡应用实践 1.1 集群简介 简单地说 ,集群就是指一组(若干个)相互独立的计算机 ,利用高速通信网络组成的一 个较大的计算机服务系统 ,每个集群节点(即集群中的每台计算机)…

Qt之自定义标题栏拓展(十)

Qt开发 系列文章 - user-defined-titlebars(十) 目录 前言 一、方式一 1.效果演示 2.创建标题栏类 3.可视化UI设计 4.定义相关函数 5.使用标题栏类 二、方式二 1.效果演示 2.创建标题栏类 3.定义相关函数 4.使用标题栏类 总结 前言 Qt自带…

AQS源码学习

一、park/unpark阻塞唤醒线程 LockSupport是JDK中用来实现线程阻塞和唤醒的工具。使用它可以在任何场合使线程阻塞,可以指定任何线程进行唤醒,并且不用担心阻塞和唤醒操作的顺序,但要注意连续多次唤醒的效果和一次唤醒是一样的。JDK并发包下…

安全删除硬件并弹出媒体(弹出显卡)问题处理

“安全删除硬件”图标点开之后,出现弹出显卡问题 解决办法: 本人是华硕笔记本电脑,这仅仅是我的解决办法,仅供参考! 更新/安装“触控板驱动程序” 以下以华硕为例: 去电脑官网下,下载“触控…

【双指针】算法题(一)

【双指针】算法题(一) 前言: 本章只有两道算法题:移动零、复写零。 常见的双指针有两种形式,一种是对撞指针,一种是左右指针。 **对撞指针:**一般用于顺序结构中,也称左右指针。 …

【Python使用】嘿马头条项目从到完整开发教程第9篇:缓存,1 缓存穿透【附代码文档】

本教程的知识点为:简介 1. 内容 2. 目标 产品效果 ToutiaoWeb虚拟机使用说明 数据库 理解ORM 作用 思考: 使用ORM的方式选择 数据库 SQLAlchemy操作 1 新增 2 查询 all() 数据库 分布式ID 1 方案选择 2 头条 使用雪花算法 (代码 toutiao-backend/common/…