1. ArkTS的基本组成
- 装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。
- 自定义组件:可复用的UI单元,可组合其他组件,图示中
@Component
装饰的struct Hello
就是一个自定义组件。 - UI描述:以声明式的方式来描述UI的结构,图示中
build()
方法中的代码块。 - 系统组件:ArkUI框架中内置的容器组件和基础组件,开发者可直接使用。图示中的
Column
、Text
、Divider
、Button
都是系统组件。 - 属性方法:组件可以通过链式调用配置多项属性,图示中的
fontSize()
、width()
、height()
等。 - 事件方法:组件可以通过链式调用设置多个事件的响应逻辑,图示中
Button
后面的onClick()
就是给按钮设置点击事件。
2. ArkTS自定义组件
- 打开DevEco Studio新建一个
ets
文件,ArkTS File 的后缀名就是ets
。
- 编写自定义组件
一个组件的基本结构:
@Component
标记为一个组件struct
定义组件结构FirstComponent
组件名build()
:描绘组件UI
@Component
struct FirstComponent {
build() {
}
}
- 描绘组件UI
添加一个系统组件Text()
,它用来显示文本的,然后给文本字体设置大小。
@Component
struct FirstComponent {
build() {
Text("我是第一个组件")
.fontSize(30)
}
}
- 预览组件
在DevEco Studio的Previewer
中,只能预览被@Entry
修饰的组件。所以这里先给组件加上@Entry
修饰符,然后点开Previewer
页签,进行组件的效果预览。
@Entry
@Component
struct FirstComponent {
build() {
Text("我是第一个组件")
.fontSize(30)
}
}