鸿蒙UI开发快速入门 —— part01: 装饰器&UI描述
1. 背景
在鸿蒙开发中,ArkTS是优选的主力应用开发语言。
ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。
因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力,本文的假设前提为,读者拥有TS编程经验。
2. 综述
学习UI开发,一般关注以下三个问题:
1)界面和控件如何编写;
2)状态管理和组件间的数据传递如何实现;
3)用户交互时,如何做到界面渲染控制。
在展开讲界面和控件编写前,本文先介绍两个UI相关的核心概念:装饰器、UI描述。
3. 装饰器
在鸿蒙开发中,关键的UI相关的定义(界面入口、自定义组件、状态变量、样式定义等)都是通过装饰器来标注。
常用的装饰器例如:@Entry、@Component、@State、@Builder、@Extend、@Styles等。
- @Component表示自定义组件;
- @Entry表示该自定义组件为入口组件;
- @State表示组件中的状态变量,状态变量变化会触发UI刷新;
- @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述;
- @Extend/@Styles:扩展内置组件和封装属性样式,更灵活地组合内置组件;
下面是一个Hello World程序中的拆解示意图:
其中:@Component表示Hello是一个自定义组件;@Entry表示当前自定义组件为UI页面的入口(单个UI页面中,最多可以使用@Entry装饰一个自定义组件);@State表示myText是一个内部状态变量(任何对myText的修改,都将触发UI的刷新);
4. UI描述
鸿蒙UI的开发在build()函数中完成,整个build()函数的开发类似于编写描述文件,我们也将buid()开发过程称为UI描述。
分析下图中的Hello World程序,它做了以下几件UI描述的事儿:
- 创建了一个Column()垂直布局组件,组件内部配置了三个子组件;
- 在垂直布局控件中,创建了一个Text()文本组件;
- 紧接着接了一个Diveder()水平分割线组件;
- 紧接着创建了一个Button按钮,并且配置属性:高度为50,宽度为100,顶部间距为20;
- Button配置了事件监听器,将myText的值从“Hello World”改为了 “ArkUI”。
交互示意图如下:
从示意图中,我们可以总结出UI 描述的几个关键点:a)创建组件;b)给组件配置属性;c)给组件配置事件监听;d)给组件添加子组件。
我们分别来了解下:
4.1 创建组件
根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。
- 有参数
如果组件的接口定义包含构造参数,则在组件后面的“()”配置相应参数,例如如下代码:
Image('https://xyz/test.jpg')
变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。例如,设置变量或表达式来构造Image和Text组件的参数,例如如下代码:
Image(this.imagePath)Image('https://' + this.imageUrl)Text(`count: ${this.count}`)
- 无参数
如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。例如,Divider组件不包含构造参数。
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 = 'ArkUI'; })
tips:这里推荐使用箭头函数来作为事件的执行回调函数。如果使用 function 匿名函数,或者使用组件成员变量,需要bind(this)保证传入的回调函数与当前组件一致 |
---|
// case1: 匿名function,需要bind(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(100)
Divider()
Text(this.myText)
.fontSize(100)
.fontColor(Color.Red)
}
容器组件均支持子组件配置,可以实现相对复杂的多级嵌套。
Column() {
// 下面的代码是Column组件d的子组件
Row() {
// 下面的代码是Row组件d的子组件(Row嵌套在了Column中)
Image('test1.jpg')
.width(100)
.height(100)
Button('click +1')
.onClick(() => {
console.info('+1 clicked!');
})
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)