上一篇文章我们介绍了声明式UI描述和自定义组件的基本用法,现在我们系统的看看自定义组件的结构、成员函数、变量等.在 《遥遥领先,HaemonyOS的ArkTS应用入门实操》文章里面我们讲解了 ArkTS 的基本代码组成,这里我们看看具体的组件结构.
自定义组件基于struct实现
struct + 自定义组件名 + {...}的组合构成自定义组件
Custom components cannot extend or implement other classes and interfaces. <etsLint> 自定义组件无法扩展或实现其他类和接口。<etsLint> ⚠️ 自定义组件名、类名、函数名不能和系统组件名相同
仅能装饰struct关键字声明
的数据结构A function or a method can only be decorated by one of the 'Extend, Builder and Styles'. <etsLint> 函数或方法只能由“扩展、生成器和样式”之一修饰。<etsLint>
This custom component must have a 'build' function. <etsLint> 此自定义组件必须具有“build”功能。<etsLint>
Duplicate decorators for struct are not allowed. <etsLint> 不允许使用重复的 struct 装饰器。<etsLint>
build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数
This custom component must have a 'build' function. <etsLint> 此自定义组件必须具有“build”功能。<etsLint>
所有声明在build()函数的语言,我们统称为UI描述.
和 Vue2 一样需要根节点只能一个
@Entry装饰的自定义组件将作为UI页面的入口
在单个UI页面中,最多可以使用@Entry装饰一个自定义组件,将相当于 Java 当中的 Main 函数
Duplicate decorators for struct are not allowed. <etsLint> 不允许使用重复的 struct 装饰器。<etsLint>
自定义组件除了必须要实现build()函数外,还可以实现其他成员函数.成员函数具有以下约束.
自定义组件可以包含成员变量,成员变量具有以下约束:
在上面的 Build函数当中我们讲到了可以在 build 当中使用方法或者使用 @Builder
来修饰的函数里创建自定义组件
我们在创建自定义组件的过程中,根据装饰器的规则来初始化自定义组件的参数
// Entry 标记当前组件是入口组件,比如Java当中的Main (标记后就变成了一个独立的页面)
@Entry
// Component 装饰器: 需要使用装饰器来标志(相当于 Java 里面的 Bean) 用来修饰类结构、方法、变量
@Component
// struct 结构体 就是一个自定义的组件,和VUE一样哪里都可以用
struct Order {
// 定义变量
// @State 变量名称: 变量类型(TS语法不知道的可以去学学基础) = 对应变量类型的数据
@State message: string = 'Hello World'
private flag: string = '父组件私有'
// 构建组件为页面元素
build() {
// 根节点唯一且必要,必须为容器组件
Row() {
ParentComponent({ countDownFrom: 36, flag: this.flag })
.onClick(() => {
console.info('方法或者函数里面允许!');
})
}
}
}
// 子组件
@Component
struct ParentComponent {
private countDownFrom: number = 0;
private flag: string = '子组件私有'
build() {
Column() {
Text(`${this.countDownFrom}`).fontSize(30)
Divider()
Text(`${this.flag}`).fontSize(30)
}
}
}
ok 自定义组件的知识点差不多搞定,还剩下一些装饰器的玩法.
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。