遥遥领先! 声明式UI描述和自定义组件的介绍和用法

2023-12-03 01:56:24 浏览数 (2)

前言

上一篇文章我们玩了下入门并且介绍了 ArkTs 的语法和玩法,还有基本的构建组成、装饰器、UI 描述(build)等本篇文章我们详细的介绍 声明式UI描述自定义组件

bannerbanner

声明式UI描述

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

创建组件

根据组件构造方法的不同,创建组件包含有参数和无参数两种方式 和其他语言都差不多,它 创建组件时不需要new运算符

无参数

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

例如: Divider组件不包含构造参数,Button 组件重载了无参构造器等

imgimg
imgimg
按钮组件的无参构造器和有参构造器imgimg

有参构造器

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

比如: Image 组件它没有无参构造器

imgimg
  • Image组件的构造器定义了必须属性为 src 的参数传递
  • Button 组件的非必选参数content。
imgimg

配置属性

这玩意就相当于 Java 当中的 lambda 链式编程

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

  • 配置Text组件的字体大小
imgimg
  • 配置组件的多个属性
代码语言:go复制
Image($r('xxxxxxx'))
  .alt('哈哈哈')    
  .width(100)    
  .height(100)

查看组件有哪些属性可用

imgimg

配置子组件

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

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

imgimg

也就是把组件放在容器里面,Column、Row、Stack、Grid、List 都是容器组件.

自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。(官方原话)

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。
  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

基本用法

其实就是我们之前那样玩的方式

定义自定义子组件,官方文档当中没有机械能 export 会导致找不到模块报错

imgimg

使用子组件

imgimg

HelloComponent可以在其他自定义组件中的build()函数中多次创建,实现自定义组件的重用

imgimg

最后

我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

本期结束咱们下次再见

0 人点赞