一文轻松拿下HarmonyOS NEXT的自定义组件
程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员成长那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！
1.自定义组件基础
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。
相比于之前学习的轻量级 UI 复用机制 @Builder，自定义组件的功能更为强大，日常开发中如果要进行 UI 或业务逻辑进行复用，需要掌握自定义组件的能力。
2.自定义组件语法格式
@Entry
@Component
struct Index {
build() {
Column() {
// 自定义组件
HelloComponent()
}
}
}
3.基本使用
如何创建自定义组件呢?
说明
自定义组件名、类名、函数名不能和系统组件名相同。
// 定义
@Component
struct MyComponent {
// 状态变量
@State message:string =''
build(){
// .... 描述 UI
//----------使用-----------
// 1.不传递参数使用
// MyComponent()
// 2.传递参数使用：通过传递参数的方式 设置子组件中 messsage 的值
// MyComponent({message:'xxx'})
}
}
-
struct：自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。
-
@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。
-
build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
-
@Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
-
@Preview：如果想要单独预览组件，可以使用@Preview 进行装饰
4.练一练
- 创建自定义组件（写到一个文件，拆分到其他文件）
a. build()中添加UI 描述
b. 定义状态变量
c. 渲染，并且修改
- 使用自定义组件
a. 无参数使用
b. 传递参数使用
- 测试@Preview预览组件
下面为参考的示例代码：
// 定义组件
@Component
struct HelloComponent {
// 自己的状态
@State message: string = 'Hello, World!';
build() {
// HelloComponent自定义组件组合系统组件Row和Text
Row() {
Text(this.message)
.onClick(() => {
// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
this.message = 'Hello, ArkUI!';
})
}
}
}
// 使用组件
@Entry
@Component
struct Index {
build() {
Column() {
HelloComponent()
// 只要愿意，可以 使用任意多次
HelloComponent()
// 还可以 传递参数给子组件，覆盖子组件成员变量的值
HelloComponent({message:'hello Feri'})
}
}
}
// HelloComponent.ets
// 定义组件
@Component
export struct HelloComponent {
// 自己的状态
@State message: string = 'Hello, World!';
build() {
// HelloComponent自定义组件组合系统组件Row和Text
Row() {
Text(this.message)
.onClick(() => {
// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
this.message = 'Hello, ArkUI!';
})
}
}
}
页面.ets-------------------
import {HelloComponent} from 'HelloComponent'
// 使用组件
@Entry
@Component
struct Index {
build() {
Column() {
HelloComponent()
// 只要愿意，可以 使用任意多次
HelloComponent()
// 还可以 传递参数给子组件，覆盖子组件成员变量的值
HelloComponent({message:'hello itheima'})
}
}
}
5.成员函数/变量
自定义组件除了必须要实现build()函数外，还可以定义其他的成员函数，以及成员变量
注意：
- 不支持静态函数、静态成员变量
- 成员函数、变量均为私有
@Component
struct MyComponent {
// 状态变量
@State message:string=''
// 成员变量-数据
info:string = ''
// 成员变量-函数
sayHello=()=>{}
// 成员函数
sayHi(){
}
build(){
// .... 描述 UI
}
}
亲自动手实现以下自定义组件
- 添加自定义组件
a. 定义成员变量（普通变量、状态变量）
b. 定义成员函数
c. 调用函数，修改成员变量（普通变量、状态变量）
- 使用自定义组件
a. 无参数调用
b. 传递参数调用
参考代码
// HelloComponent.ets
@Component
export struct HelloComponent {
// 成员变量
info: string = '感觉自己闷闷哒'
// 成员变量也可以是函数
sayHello=()=>{}
// 状态变量
@State message: string = 'Hello, World!';
// 成员函数
sayHi() {
console.log('你好呀')
}
build() {
// HelloComponent自定义组件组合系统组件Row和Text
Column() {
Text(this.message)
Text(this.info)
Button('修改数据')
.onClick(() => {
this.info = '(* ￣3)(ε￣ *)'
this.message = 'Hello,ArkTS'
this.sayHi()
this.sayHello()
})
}
}
}
// 页面的.ets
import { HelloComponent } from './components/HelloComponent'
@Entry
@Component
struct Index {
build() {
Column() {
// 使用组件内部定义的初始值
HelloComponent()
// 使用传入的值，覆盖子组件的默认值
HelloComponent({ info: '你好', message: 'ArkTS' })
// 函数也可以传入
HelloComponent({ sayHello(){ console.log('传入的逻辑') } })
}
}
}
7.通用样式事件
自定义组件可以通过点语法的形式设置通用样式,通用事件
子组件()
.width(100)
.height(100)
.backgroundColor(Color.Orange)
.onClick(() => {
console.log('外部添加的点击事件')
})
练一练:
- 添加自定义组件，随意设置内容
- 使用自定义组件，通过点语法设置通用样式
@Component
struct MyComponent2 {
build() {
Button(`Hello World`)
}
}
@Entry
@Component
struct Index {
build() {
Row() {
MyComponent2()
.width(200)
.height(300)
.backgroundColor(Color.Red)
.onClick(() => {
console.log('外部添加的点击事件')
})
}
}
}
说明
ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。
通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。
好啦，就说到这里啦，希望每天坚持！
- 点赞
- 收藏
- 关注作者
评论（0）