环境及工具
HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发
1、组件基本介绍
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。 在进行UI界面开发时，通常不是简单的将系统组件进行组合使用，而是要考虑代码可复用性、业务逻辑与UI分离，后续的新版本等因素。
自定义组件具有以下特点：
- 可组合：允许开发者组合使用系统组件、及其属性和方法。
- 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
- 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。
@Component
export struct HelloComponent{
@State message:string = 'Hello,world!';
build() {
Row(){
Text(this.message)
.onClick(()=>{
// 状态变量message的改变驱动UI刷新，UI从"Hello，World"变成了"Hello,小煦同学"
this.message = "Hello,小煦同学";
})
}
}
}
HelloComponent可以在其他自定义组件中的build()函数中多次创建，实现自定义组件的重用。
import { HelloComponent } from './HelloComponent'
@Entry
@Component
struct ParentComponent{
build() {
Column(){
Text("ArkUI message")
// 此处复用了组件
HelloComponent({message:"Hello World!"})
Divider()
// 再次复用组件
HelloComponent({message:"你好！"})
}
}
}
效果图：
一个自定义组件的UI组件一般有几个关键的组成部分：
- struct声明组件名字（如果需要复用，则需要加上export 关键字导出）。
- @Component 关键字装饰第1步创建的组件，表示当前的结构体是一个自定义组件。
- build()函数，该函数用于描述本组件需要渲染的样式。
- @State 装饰的本地变量，用于存储当前组件的内部状态。
- @Entry 关键字装饰，表示当前组件是UI页面的入口。
2、build()函数
build()函数是所有UI组件开发都需要实现的方法，它主要负责对UI的描述定义，build()函数需要遵循一些规则，如下所述：
- @Entry 装饰的组件，其build()函数下的根节点唯一且必要，且必须为容器组件。
@Components装饰的自定义组件，其build()函数下的根节点唯一且必要，可为非容器组件。两者中的ForEach禁止作为根节点。 - build()函数不允许声明本地变量，下面为反例：
build() {
// 反例：不允许声明本地变量
let a: number = 1;
}
如果写了反例中的代码，编译器将报错，本地变量反例报错如下:
- build()函数不允许在UI描述里直接使用console.info()。
`build() {
// 反例：不允许console.info
console.info('print debug log');
}
- build()函数里不允许创建本地的作用域。
build() {
// 反例：不允许本地作用域
{
... ``
}
}
- build函数里不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。
@Component
struct ParentComponent {
doSomeCalculations() {
}
calcTextValue(): string {
return 'Hello World';
}
@Builder doSomeRender() {
Text(`Hello World`)
}
build() {
Column() {
// 反例：不能调用没有用@Builder装饰的方法
this.doSomeCalculations();
// 正例：可以调用
this.doSomeRender();
// 正例：参数可以为调用TS方法的返回值
Text(this.calcTextValue())
}
}
}
- build()函数里不允许switch语法，如果需要使用条件判断，请使用if。
`build() {
Column() {
// 反例：不允许使用switch语法
switch (expression) {
case 1:
Text('...')
break;
case 2:
Image('...')
break;
default:
Text('...')
break;
}
}
}
- build()函数里不允许使用表达式。
build() {
Column() {
// 反例：不允许使用表达式
(this.aVar > 10) ? Text('...') : Image('...')
}
}
3、设置基本样式
所有的组件（不论是自定义组件还是系统组件），都可以设置一些通用样式，例如：宽度、高度、背景色、圆角等。设置方法均为 "." 号。
@Component
struct MyComponent2 {
build() {
Button(`Hello World`)
}
}
@Entry
@Component
struct MyComponent {
build() {
Row() {
MyComponent2()
.width(200)
.height(300)
.backgroundColor(Color.Red)
}
}
}
效果图：
tips:
ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。
通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。
总结：
同志仍需努力!
