前言
上一篇文章我们玩了下入门并且介绍了 ArkTs 的语法和玩法,还有基本的构建组成、装饰器、UI 描述(build)等本篇文章我们详细的介绍 声明式UI描述
和 自定义组件
声明式UI描述
ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。
创建组件
根据组件构造方法的不同,创建组件包含有参数和无参数两种方式 和其他语言都差不多,它 创建组件时不需要new运算符
无参数
如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。
例如: Divider组件不包含构造参数,Button 组件重载了无参构造器等
有参构造器
如果组件的接口定义包含构造参数,则在组件后面的“()”配置相应参数。
比如: Image 组件它没有无参构造器
- Image组件的构造器定义了必须属性为 src 的参数传递
- Button 组件的非必选参数content。
配置属性
这玩意就相当于 Java 当中的 lambda 链式编程
属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行,好看一些
- 配置Text组件的字体大小
- 配置组件的多个属性
Image($r('xxxxxxx'))
.alt('哈哈哈')
.width(100)
.height(100)
查看组件有哪些属性可用
配置子组件
如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述
Column、Row、Stack、Grid、List等组件都是容器组件。
也就是把组件放在容器里面,Column、Row、Stack、Grid、List 都是容器组件.
自定义组件
在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。(官方原话)
自定义组件具有以下特点:
- 可组合:允许开发者组合使用系统组件、及其属性和方法。
- 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
- 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。
基本用法
其实就是我们之前那样玩的方式
定义自定义子组件,官方文档当中没有机械能 export 会导致找不到模块报错
使用子组件
HelloComponent可以在其他自定义组件中的build()函数中多次创建,实现自定义组件的重用
最后
我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!
本期结束咱们下次再见