创建组件

根据组件构造方法的不同#xff0c;创建组件包含有参数和无参数两种方式。

创建组件时不需要new运算…ArkTS以声明方式组合和扩展组件来描述应用程序的UI同时还提供了基本的属性、事件和子组件配置方法帮助开发者实现应用交互逻辑。

创建组件

如果组件的接口定义没有包含必选构造参数则组件后面的“()”不需要配置任何内容。

例如Divider组件不包含构造参数

Column()

如果组件的接口定义包含构造参数则在组件后面的“()”配置相应参数。

Text(test)

Text($r(app.string.title_value))

无参数形式

变量或表达式也可以用于参数赋值其中表达式返回的结果类型必须满足参数类型要求。

Image(https://

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性建议每个属性方法单独写一行。

.width(100)

Text(hello).fontSize(this.size)

Image(test.jpg).width(this.count

100

对于系统组件ArkUI还为其属性预定义了一些枚举类型供开发者调用枚举类型可以作为参数传递但必须满足参数类型要求。

Text(hello).fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)

配置事件

事件方法以“.”链式调用的方式配置系统组件支持的事件建议每个事件方法单独写一行。

Button(Click

使用匿名函数表达式配置组件的事件方法要求使用bind以确保函数体中的this指向当前组件。

Button(add

counter).onClick(function(){this.counter

2;}.bind(this))

counter).onClick(this.myClickHandler.bind(this))

...

如果组件支持子组件配置则需在尾随闭包{...}中为组件添加子组件的UI描述。

Column、Row、Stack、Grid、List等组件都是容器组件。

Column()

{Text(Hello).fontSize(100)Divider()Text(this.myText).fontSize(100).fontColor(Color.Red)

Column()

{Image(test1.jpg).width(100).height(100)Button(click

1).onClick(()

那么很多小伙伴肯定主要是查找一些鸿蒙开发相关的内容提升自己在这里我为大家准备了一套《Open

Harmony4.0Next》的学习导图从入门到进阶再到南北向开发实战的一整套完整体系想要学习了解更多鸿蒙开发的相关知识可以借鉴《做鸿蒙应用开发到底学习些啥》

(Harmony

OS)开发学习手册》都是整理成PDF文档方式分享给大家参考学习《鸿蒙开发学习指南》

《鸿蒙

更多了解更多鸿蒙开发的相关知识可以参考《做鸿蒙应用开发到底学习些啥》