泰安房产网0538,wordpress优化搜索引擎,南宁网站建设推广,搭建源码下载站网站声明式UI语法 基本概念声明式UI描述创建组件无参数有参数 配置属性配置事件 配置子组件 基本概念 装饰器#xff1a;用于装饰类、结构、方法及变量#xff0c;并赋予其特殊的含义。 例如#xff1a; Entry 有该装饰器的自定义组件#xff0c;可以在UIAbility中使用#xf… 声明式UI语法 基本概念声明式UI描述创建组件无参数有参数 配置属性配置事件 配置子组件 基本概念 装饰器用于装饰类、结构、方法及变量并赋予其特殊的含义。 例如 Entry 有该装饰器的自定义组件可以在UIAbility中使用作为页面入口。该装饰器配合Component装饰器使用 Component 自定义组件 State 表示组件中的状态变量状态变化会出发UI刷新。 L UI描述以声明式的方式来描述UI的结构在组件的build方法中。 自定义组件可复用的UI单元可组合其他组件。 系统组件ArkUI框架中默认内置的基础和容器组件。例如Column、Row、Text、Image、Button等。 属性方法ArkTs中使用链式调用的方式来配置组件属性。 事件方法事件响应逻辑也是使用链式调用的方式设置如onclick方法等在方法内部进行实现。
基础的组件一般就是由上述部分组成如下图 当然也有一些其他的语法范式方便我们进行封装复用如
除此之外ArkTS扩展了多种语法范式来使开发更加便捷 Builder/BuilderParam特殊的封装UI描述的方法细粒度的封装和复用UI描述。 Extend/Styles扩展内置组件和封装属性样式更灵活地组合内置组件。 stateStyles多态样式可以依据组件的内部状态的不同设置不同样式。
这些后续会讲到。
声明式UI描述
创建组件
在ArkTs的基础语法中我们讲到类实例化一个类需要使用new关键字进行。而在UI组件中创建组件是不需要使用new关键字的。
无参数
如果组件的接口定义没有包含必选的构造参数则组件后面的()中可以不配置任何内容。
例如Button() Text()等包含可选参数的组件Driver()等没有构造参数的组件。
有参数
如果组件的接口定义中包含了必选构造参数则在组件后的()中需要配置相应的参数。 例如Image()组件必选参数为src。
变量和表达式也可以用作参数赋值。
配置属性
组件的属性方法以.链式调用的方式配置样式和其他属性。 Text(this.message).id(HelloWorld).fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }})配置事件
使用箭头函数配置组件的事件方法 Button() {Text(跳转).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({ top: 0.00vp, right: 0.00vp, bottom: 150.00vp, left: 0.00vp }).backgroundColor(#ff0000).width(50%).height(10%).alignRules({center: { anchor: __container__, align: VerticalAlign.Bottom },middle: { anchor: __container__, align: HorizontalAlign.Center }}).onClick(() {console.info(click second button)router.pushUrl({ url: pages/Second }).then(() {console.info(jump success)}).catch((err: BusinessError) {console.error(jump failed,errCode:${err.code},errMessage:${err.message})})})}.height(100%).width(100%)如需使用组件中的成员函数配置组件的事件方法需要使用bind this。
myClickHandler(): void {this.counter 2;
}
...
Button(add counter).onClick(this.myClickHandler.bind(this))ArkTs语法不推荐使用成员函数配合bind(this)的方式去配置组件的事件方法
使用声明的箭头函数可以直接调用不需要使用bind(this)
fn () {console.info(counter: ${this.counter})this.counter
}
...
Button(add counter).onClick(this.fn)配置子组件
如果组件是容器组件则支持子组件配置需要在组件声明后紧随的闭包中添加子组件的描述。如Column Row List等组件。 RelativeContainer() {Text(this.message).id(SecondHelloWorld).fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }})Button() {Text(back).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({bottom: 50}).alignRules({center: { anchor: __container__, align: VerticalAlign.Bottom },middle: { anchor: __container__, align: HorizontalAlign.Center }}).width(50%).height(10%).backgroundColor(#ff0000).onClick(() {try {router.back()} catch (err) {let code (err as BusinessError).codelet message (err as BusinessError).messageconsole.info(jump error:${code},${message})}})}.height(100%).width(100%)
