环境及工具
HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发
1、前言
1、界面和组件的编写。
2、状态管理和组件间的数据传递。
3、交互时，界面渲染控制。
专栏基于API12进行开发
2、背景
在HarmonyOS开发中，ArkTS是主力应用开发语言。
ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。
学习ArkTS语言之前，建议开发者具备TS语言开发能力，或拥有JavaScript语言开发能力。
3、装饰器
在HarmonyOS开发中，关键的UI相关的定义(界面入口、自定义组件、状态变量、样式定义等)都是通过装饰器来标注的。
常用的装饰器例如: @Entry、@Component、@State、@Builder、@Extend、@Styles等。
- @Component表示自定义组件。
- @Entry表示该自定义组件为入口组件。
- @State表示组件中的状态变量，状态变量变化会触发UI刷新。
- @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
- @Extend/@Styles：扩展内置组件和封装属性样式，更灵活地组合内置组件。
图解
其中：
@Component表示Hello是一个自定义组件。
@Entry表示当前自定义组件为UI页面的入口(单个UI页面中，最多可以使用@Entry装饰一个自定义组件)。
@State表示message是一个内部状态变量（任何对message的修改，都将触发UI的刷新）。
4、UI描述
2、在垂直布局控件中，创建了一个Text()文本组件，并添加.fontSize()。
3、创建了一个Button按钮，添加属性：高度50,，宽度为100，上外边距为20。 ## 交互图
4.1、创建组件
根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。
- 有参数
如果组件的接口定义包含构造参数，则在组件后面的“()”配置相应参数。
Image('https://xyz/test.jpg')
变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。
- 无参数
如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。
Column() {
Text('item 1')
Divider() // 无参数示例
Text('item 2')
}
4.2、配置属性
属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行
// 配置Button属性
Button()
.height(50)
.width(100)
.margin({top: 20})
// 配置Text属性
Text('Hello World')
.fontSize(50)
4.3、配置事件
配置事件与配置属性类似
事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。
Button('Click me')
.onClick(() => {
this.myText = '小煦同学';
})
tips：这里推荐使用箭头函数来作为事件的执行回调函数。
如果使用 function 匿名函数，或者使用组件成员变量，需要bind(this)保证传入的回调函数与当前组件一致
// case1: 匿名function，需要this
Button('add counter')
.onClick(function(){
this.counter += 2;
}.bind(this))
// case2: 成员函数，需要.bind(this)
myClickHandler(): void {
this.counter += 2; }
Button('add counter')
.onClick(this.myClickHandler.bind(this))
4.4、配置子组件
如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。
Column() {
// 下面的代码是Column组件d的子组件
Text('Hello')
.fontSize(80)
Divider()
Text(this.message)
.fontSize(100)
.fontColor(Color.Red)
}
容器组件均支持子组件配置，可以实现相对复杂的多级嵌套。
Column() {
// 下面的代码是Column组件的子组件
Row() {
// 下面的代码是Row组件d的子组件（Row嵌套在了Column中）
Image('test1.jpg')
.width(100)
.height(100)
Button('click +1')
.onClick(() => {
console.info('+1 clicked!');
})
}
}
5、总结
至此，我们已经简单了解了鸿蒙UI开发中的两个重要概念，装饰器和UI描述，接下来，我们开始了解UI开发啦！
