HarmonyOS应用开发学习-ArkTs声明式UI描述
ArkTs声明式UI描述
1 创建组件
声明式UI描述
ArKTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑
创建组件
根据组件构造方法的不同，创建组件包含有参数和无参数两种方式，
无参数
如果组件的接口定义没有包含必选构造参数，则组件后面的"0"不需要配置任何内容。例如，Divider组件不包含构造参数:
Column() {//文字组件 无参数Text()//分割线组件 无参数Divider()
}有参数
如果组件的接口定义包含构造参数，则在组件后面的“()“配置相应参数。
- Image组件的必选参数src。
//图片组件，必须要参数，否则报错
Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')- Text组件的非必选参数content。
//文字组件 有参数
Text('HELLO') - 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。
例如，设置变量或表达式来构造lmage和Text组件的参数。
@Entry
@Component
struct Index { @State title:string ="你好！";img_src:string= 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';public p:string ='p'; //公共的private n:number=10; //私有的protected flag:boolean = true; //受保护的//UI描述build() {Row() {//容器组件：水平方向布局容器Column() {//容器组件：垂直方向布局容器Text(`${this.title}${this.n}`);Image(this.img_src);}.width('100%')}.height('100%')}
}2 配置属性
属性方法以".“链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。
- 配置Text组件的字体大小。
Text('text').fontSize(30) - 配置组件的多个属性
Image(this.img_src).width(300).height(100)- 除了直接传递常量参数外，还可以传递变量或表达式
Text('he11o')
.fontSize(this.size)
Image('test.jpg')
.width(this.count%2===0?100:200)//表达式定义宽度
.height(this.offset + 100)- 对于系统组件，ArkUl还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。
例如，可以按以下方式配置Text组件的颜色和字体样式
Text('he11o')
.fontsize(20)
.fontcolor(color.Red)//枚举类型定义颜色
.fontweight(fontweight.Bo1d)//枚举类型加粗3 配置事件
事件方法以”.“链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。
- 使用箭头函数配置组件的事件方法。
Button('click me')//箭头函数配置事件，点击按钮改变title变量的值.onClick(()=>{this.title = '按钮点击了'})- 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件
Button('click me')// 普通函数配置事件，this指向不对会直接写报错，所以需要设置bind属性.onClick(function(){this.title = "标题点击"}.bind(this))使用组件的成员函数配置组件的事件方法。
普通函数
//函数的定义myHandler():void{this.title = "myHandler"}
...
.onClick(this.myHandler.bind(this))箭头函数
//函数的定义
myHandler2 = ():void=>{this.title = "myHandler2"}
...
.onClick(this.myHandler2)