HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

前言:

通过前面ArkTS开发语言(上)之TypeScript入门以及ArkTS开发语言(中)之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进,知道了ArkTS具备了声明式语法和组件化特性,今天,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使用@Builder创建排行列表布局内容,使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键,来学习自定义组件生命周期函数。

基本概念

首先我们先要明白如下几个基本概念,方便我们更好的理解ArkTS,掌握和理解本demo的知识点。

  1. 声明式UI基本概念

应用界面是由一个个页面组成,ArkTS是由ArkUI框架提供,用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程,其实是组合组件的过程,声明式UI的思想,主要体现在两个方面:

  • 描述UI的呈现结果,而不关心过程
  • 状态驱动视图更新

类似苹果的SwiftUI中通过组合视图View,安卓Jetpack Compose中通过组合@Composable函数,ArkUI作为HarmonyOS应用开发的UI开发框架,其使用ArkTS语言构建自定义组件,通过组合自定义组件完成页面的构建。

  1. 自定义组件的组成

ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。

  • 使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染。
  • 使用@Component装饰的自定义组件,如TitleView这个自定义组件则对应如下内容,作为页面的组成部分。
@Entry
@Component
struct TitleView {...}

在自定义组件内需要使用build方法来进行UI描述。

@Entry
@Componentstruct TitleView...build() {...} 
}

build方法内可以容纳内置组件和其他自定义组件,如Column和Text都是内置组件,由ArkUI框架提供,TitleView为自定义组件,需要开发者使用ArkTS自行声明。

@Entry
@Component
struct TitleView {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}
  1. 组件状态管理装饰器和@Builder装饰器:
    组件状态管理装饰器用来管理组件中的状态,它们分别是:@State、@Prop、@Link。
  • @State装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新。

  • @Prop与@State有相同的语义,但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化,允许组件内部修改@Prop变量,但更改不会通知给父组件,即@Prop属于单向数据绑定。

  • @Link装饰的变量可以和父组件的@State变量建立双向数据绑定,需要注意的是:@Link变量不能在组件内部进行初始化。

  • @Builder装饰的方法用于定义组件的声明式UI描述,在一个自定义组件内快速生成多个布局内容。

@State、@Prop、@Link三者关系如图所示:
在这里插入图片描述
4. 组件生命周期函数
自定义组件的生命周期函数用于通知用户该自定义组件的生命周期,这些回调函数是私有的,在运行时由开发框架在特定的时间进行调用,不能从应用程序中手动调用这些回调函数。 右图是自定义组件生命周期的简化图示:

在这里插入图片描述
后期会专门出一期文章讲解自定义组件的生命周期,敬请期待。

  1. 渲染控制语法:
    渲染控制分if/else:条件渲染和ForEach:循环渲染俩种。
  • if/else:条件渲染
    ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。

举个列子:

Column() {if (this.count > 0) {Text('count is positive')}
}

条件渲染的具体使用规则,注意事项,以及使用场景见if/else:条件渲染,这里不过过多描述。

  • ForEach:循环渲染
    ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如,ListItem组件要求ForEach的父容器组件必须为List组件。

举个列子:

ForEach(arr: any[], // 用于迭代的数组itemGenerator: (item: any, index?: number) => void, // 生成子组件的lambda函数keyGenerator?: (item: any, index?: number) => string // 用于给定数组项生成唯一且稳定的键值
)

条件渲染的具体使用规则,注意事项,以及使用场景见ForEach:循环渲染,这里不过过多描述。只不过ForEach循环渲染相对条件渲染来说相对复杂,后续有空我会专门介绍渲染控制。

了解以上五点,加上前面讲解到的ArkTS开发语言(上)之TypeScript入门和初识ArkTS开发语言(中)之ArkTS的由来和演进,我想大家对ArkTS有了基本的认识,也能做出一些简单的功能,下面我就以官方的一个待办列表对初识ArkTS开发语言做一个实战性总结。

ArkTS实战开发

下面我们用ArkTS实战开发一些自定义组件,然后组合实现一个待办列表,最终效果图如下:
在这里插入图片描述
我们已经知道,ArkTS通过struct声明组件名,并通过@Component和@Entry装饰器,来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口,会在页面加载时首先进行渲染。

@Entry
@Component
struct ToDoList {...}

使用@Component装饰的自定义组件,如ToDoItem这个自定义组件则对应如下内容,作为页面的组成部分。

@Component
struct ToDoItem {...}

在自定义组件内需要使用build方法来进行UI描述。

@Entry
@Componentstruct ToDoList...build() {...} 
}

build方法内可以容纳内置组件和其他自定义组件,如Column和Text都是内置组件,由ArkUI框架提供,ToDoItem为自定义组件,需要开发者使用ArkTS自行声明。

@Entry
@Component
struct ToDoList {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}

1:实战前分析

那么如何实现上面的效果图了,我们对页面组成进行拆分。

会发现,整个页面是有一个标题和若干个ToDoItem组成的,因此我们只需自定义实现标题组件和一个ToDoItem组件即可。

接下来我们就以此分析并实现这俩个组件。

2:实现标题组件

其实,标题组件很简单,就是一个简单的文本展示,我们只需用ArkUI提供的Text实现即可,这里为了加深对家对自定义组件语法和规则使用,我还是简单抽取成一个自定义公共组件吧。

自定义标题组件代码如下:

@Entry
@Component
struct ToDoTitle {...build() {Row() {Column() {Text("代办").fontSize(50)}.width('100%')}.height('100%')}}

当然,直接在代办列表页使用系统自带的Text基础组件也可以,如下所示:

@Entry
@Component
struct ToDoList {...build() {Row() {Column() {// 直接在使用TextText("代办").fontSize(50)...}.width('100%')}.height('100%')}}

3:分析ToDoItem的组成

ToDoItem相对于标题来说要复杂的多,认真分析其组成,ToDoItem是有一个水平摆放的组件,前面是一个图片,后面是一个普通文本,这是他的外观,同时它具备了一些行为,也就是我们常说的点击事件,在ArkTS中就是指组件状态,这里需要记录ToDoItem的点击的俩种状态:

  • 默认状态:默认情况下这一项高亮显示。
  • 选中状态:这一项背景变成灰色,同时前面图片变种选中状态的图片。

4:ToDoItem组件的实现

下面,我就从ToDoItem组件的外观布局属性配置以及组件状态俩方面来讲解ToDoItem的具体事项

1:配置外观属性与布局

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求,ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式:

  • 常量传递
    例如使用fontSize(50)来配置字体大小。
Text('Hello World').fontSize(50)
  • 变量传递
    在组件内定义了相应的变量后,例如组件内部成员变量size,就可以使用this.size方式使用该变量。
Text('Hello World').fontSize(this.size)
  • 链式调用
    在配置多个属性时,ArkTS提供了链式调用的方式,通过’.'方式连续配置。
Text('Hello World').fontSize(this.size).width(100).height(100)
  • 表达式传递
    属性中还可以传入普通表达式以及三目运算表达式。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)
  • 内置枚举类型
    除此之外,ArkTS中还提供了内置枚举类型,如Color,FontWeight等,例如设置fontColor改变字体颜色为红色,并私有fontWeight为加粗。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200).fontColor(Color.Red).fontWeight(FontWeight.Bold)

对于有多种组件需要进行组合时,容器组件则是描述了这些组件应该如何排列的结果。

ArkUI中的布局容器有很多种,在不同的适用场合选择不同的布局容器实现,ArkTS使用容器组件采用花括号语法,内部放置UI描述。

在这里插入图片描述
这里我们将介绍最基础的两个布局——列布局和行布局。

对于如下每一项的布局,两个元素为横向排列,选择Row布局
在这里插入图片描述
类似下图所示的布局,整体都是从上往下纵向排列,适用的布局方式是Column列布局。
在这里插入图片描述

Column() {Text($r('app.string.page_title'))...ForEach(this.totalTasks,(item) => {TodoItem({content:item})},...)}
2:记录组件状态的改变

实际开发中由于交互,页面的内容可能需要产生变化,以每一个ToDoItem为例,其在完成时的状态与未完成时的展示效果是不一样的。
在这里插入图片描述
声明式UI的特点就是UI是随数据更改而自动刷新的,我们这里定义了一个类型为boolean的变量isComplete,其被@State装饰后,框架内建立了数据和视图之间的绑定,其值的改变影响UI的显示。

@State isComplete : boolean = false;

@State装饰器的作用
在这里插入图片描述
用圆圈和对勾这样两个图片,分别来表示该项是否完成,这部分涉及到内容的切换,需要使用条件渲染if / else语法来进行组件的显示与消失,当判断条件为真时,组件为已完成的状态,反之则为未完成。

if (this.isComplete) {Image($r('app.media.ic_ok')).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
} else {Image($r('app.media.ic_default')).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
}

由于两个Image的实现具有大量重复代码,ArkTS提供了@Builder装饰器,来修饰一个函数,快速生成布局内容,从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数,参数为url,对应要传给Image的图片路径。

@Builder labelIcon(url) {Image(url).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
}

使用时只需要使用this关键字访问@Builder装饰的函数名,即可快速创建布局。

if (this.isComplete) {this.labelIcon($r('app.media.ic_ok'))
} else {this.labelIcon($r('app.media.ic_default'))
}

为了让待办项带给用户的体验更符合已完成的效果,给内容的字体也增加了相应的样式变化,这里使用了三目运算符来根据状态变化修改其透明度和文字样式,如opacity是控制透明度,decoration是文字是否有划线。通过isComplete的值来控制其变化。

Text(this.content)....opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT).decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })

最后,为了实现与用户交互的效果,在组件上添加了onClick点击事件,当用户点击该待办项时,数据isComplete的更改就能够触发UI的更新。

@Component
struct ToDoItem {@State isComplete : boolean = false;@Builder labelIcon(icon) {...}...build() {Row() {if (this.isComplete) {this.labelIcon($r('app.media.ic_ok'))} else {this.labelIcon($r('app.media.ic_default'))}... }....onClick(() => {this.isComplete= !this.isComplete;})}
}

5:循环渲染列表数据实现代办列表功能

上面,只是完成了一个ToDoItem组件的开发,当我们有多条待办数据需要显示在页面时,就需要使用到ForEach循环渲染语法。

假设,我们有五条待办数据需要展示在页面上。

total_Tasks:Array<string> = ['早起晨练','准备早餐','阅读名著','学习ArkTS','看剧放松'
]

ForEach基本使用中,只需要了解要渲染的数据以及要生成的UI内容两个部分,例如这里要渲染的数组为以上的五条待办事项,要渲染的内容是ToDoItem这个自定义组件,也可以是其他内置组件。

ForEach基本使用如下图所示:
在这里插入图片描述
ToDoItem这个自定义组件中,每一个ToDoItem要显示的文本参数content需要外部传入,参数传递使用花括号的形式,用content接受数组内的内容项item。

最终完成的代码及其效果如下。

@Entry
@Component
struct ToDoList {...build() {Row() {Column() {Text(...)...ForEach(this.totalTasks,(item) => {TodoItem({content:item})},...)}.width('100%')}.height('100%')}}

ToDoList页面的最终效果图:
在这里插入图片描述

总结

现在我们明白了ArkTS声明式开发范式的基本组成,这里我用一张图做一个总结概述
ArkTS声明式开发范式:
在这里插入图片描述

  • 装饰器用来装饰类、结构体、方法以及变量,赋予其特殊的含义,如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言, @Component 表示这是个自定义组件; @Entry 则表示这是个入口组件; @State 表示组件中的状态变量,此状态变化会引起 UI 变更。

  • 自定义组件
    可复用的 UI 单元,可组合其它组件,如上述被 @Component 装饰的 struct Hello。

  • UI 描述
    声明式的方式来描述 UI 的结构,如上述 build() 方法内部的代码块。

  • 内置组件
    框架中默认内置的基础和布局组件,可直接被开发者调用,比如示例中的 Column、Text、Divider、Button。

  • 事件方法
    用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。

  • 属性方法
    用于组件属性的配置,统一通过属性方法进行设置,如fontSize()、width()、height()、color() 等,可通过链式调用的方式设置多项属性。

从UI框架的需求角度,ArkTS在TS的类型系统的基础上,做了进一步的扩展:定义了各种装饰器、自定义组件和UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中,除了UI的结构化描述之外,还有一个重要的方面:状态管理。如上述示例中,用 @State 装饰过的变量 myText ,包含了一个基础的状态管理机制,即 myText 的值的变化会自动触发相应的 UI 变更 (Text组件)。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间,爷孙组件之间,也可以是全局范围内的传递,还可以是跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。

总体而言,ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式,结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。

ArkUI完整的开发范式可参考[方舟开发框架概述]。(https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkui-overview-0000001281480754)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/216600.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

持续集成交付CICD:Jenkins使用GitLab共享库实现自动上传前后端项目Nexus制品

目录 一、实验 1.GitLab本地导入前后端项目 2.Jenkins新建前后端项目流水线 3.Sonarqube录入质量阈与质量配置 4.修改GitLab共享库代码 5.Jenkins手动构建前后端项目流水线 6.Nexus查看制品上传情况 7.优化代码获取RELEASE分支 8.优化Jenkins流水线项目名称 一、实验 …

Qt槽函数不响应不执行的一种原因:ui提升导致重名

背景&#xff1a; 一个包含了组件提升的ui&#xff0c;有个按钮的槽函数就是不响应&#xff0c;于是找原因。 分析&#xff1a; 槽函数的对应一是通过connect函数绑定信号&#xff0c;二是on_XXX_signal的命名方式。界面上部件的槽函数通常是第二种。 我反复确认细节&#…

CS144(2023 Spring)Lab 0:networking warmup(环境搭建 webget bytestream)

文章目录 前言其他笔记相关链接 1. Set up GNU/Linux on your computer2. Networking by hand3. Writing a network program using an OS stream socket3.1 Linux配置3.2 C规范3.3 Writing webget3.3.1 实现3.3.2 测试 4. An in-memory reliable byte stream4.1 思路分析4.2 代…

【技巧】导出和导入Typecho的文章数据

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 背景介绍 1、要换服务器了&#xff0c;虽然Typecho和Theme都可以重装&#xff0c;但文章数据由于是存在数据库里的&#xff0c;所以需要额外一些操作才行。 2、在进行下面的数据导入导出之前&#xff0c;新服务器…

微服务的利与弊

一、前言 自从大多数web架构从单体演进到服务拆分&#xff0c;到微服务一统天下的几年来&#xff0c;应该没有web应用不是微服务架构的吧。最开始是阿里的doubble分层架构&#xff0c;到后来的SpringCloud全家桶&#xff0c;还有各个大厂自己定义的一套服务治理框架。微服务无…

项目一 分析并设计学生管理数据库

项目一 分析并设计学生管理数据库 1&#xff0c;做好管理数据库的知识准备 1.1&#xff0c;初识数据库 **1&#xff0c;DBMS&#xff1a;**数据库管理系统(Database Management System)。数据库 是通过DBMS创建和操作的 容器。 **2&#xff0c;DB&#xff1a;**数据库(data…

PR剪辑视频做自媒体添加字幕快速方式(简单好用的pr视频字幕模板)

如何选择合适的字幕添加进短视频呢&#xff1f;首先要先确定增加的视频风格&#xff0c;简约、商务、科技感、炫酷&#xff1b;再确定用途&#xff0c;注释、标记、语音翻译、引用、介绍&#xff1b;最后在相应的模板中挑选几个尝试&#xff0c;悬着一个最切合主题的使用&#…

jemeter,断言:响应断言、Json断言

一、响应断言 接口A请求正常返回值如下&#xff1a; {"status": 10013, "message": "user sign timeout"} 在该接口下创建【响应断言】元件&#xff0c;配置如下&#xff1a; 若断言成功&#xff0c;则查看结果树的接口显示绿色&#xff0c;若…

如何想成为嵌入式工程师?(这些东西您必须知道)

嵌入式的发展怎么样&#xff1f; 嵌入式系统领域一直在迅速发展&#xff0c;伴随着物联网、智能设备、汽车电子、医疗设备等应用的不断增加&#xff0c;对嵌入式技术的需求也在不断扩大。因此&#xff0c;嵌入式领域仍然是一个充满机会的领域&#xff0c;为专业人士提供…

Axure网页端高交互组件库, 下拉菜单文件上传穿梭框日期城市选择器

作品说明 组件数量&#xff1a;共 11 套 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;web端原型设计、桌面端原型设计 作品特色 本作品为「web端组件库」&#xff0c;高保真高交互 (带仿真功能效果)&#xff1b;运用了动态面板、中继…

做数据分析为何要学统计学(6)——什么问题适合使用卡方检验?

卡方检验作为一种非常著名的非参数检验方法&#xff08;不受总体分布因素的限制&#xff09;&#xff0c;在工程试验、临床试验、社会调查等领域被广泛应用。但是也正是因为使用的便捷性&#xff0c;造成时常被误用。本文参阅相关的文献&#xff0c;对卡方检验的适用性进行粗浅…

【力扣】2.两数相加

2.两数相加 这是第二题&#xff0c;还行豁~。 题解&#xff1a; 首先就是对题目的理解。这里你要知道两链表中数字的排列都是逆序的&#xff0c;也就是说示例一中2-4-3他原本的数字应该是342。同理可得下面链表的意思&#xff0c;二者相加所得到的结果也是逆序的&#xff0c;…

一张图片组合一组动作就可以生成毫无违和感的视频!

你敢信&#xff0c;1张人物图片 1张动作动画&#xff0c;就可以生成一段视频。网友直呼&#xff1a;“主播/视频UP主可能快要下岗了&#xff01;” &#xff08;模型视频来源于网络&#xff09; 本周&#xff0c;字节跳动联合新加坡国立大学发布了一款开源项目 MagicAnimate&…

centos7中的管道和重定向

重定向 0 标准输入 1 标准输出 2 标准错误 3 进程在执行的过程中打开的其他文件 & 标准正确和标准错误的混合输出 输出重定向 &g…

hyper Backup套件数据恢复

写在前面 我在去年花费1千多元资金组了一台NAS,容量为4T,阵列为raid 1。**我感觉这是去年做的最有意义的事情!**为什么这么说呢?在11月中旬,我的M.2的硬盘突然间崩掉了,就是的那种莫名其妙的。事情的发展经过是这样的:此M.2是某东制造品牌,是在2023年1月份购买的。使用…

玩转大数据17:数据采集与实时流处理的架构设计

引言 随着大数据技术的不断发展&#xff0c;数据采集与实时流处理成为了许多企业和组织的核心需求。本文将介绍一种数据采集与实时流处理的架构设计&#xff0c;包括数据采集、实时流处理、数据存储和数据分析等方面。 一、数据采集 数据采集是整个架构的基础&#xff0c;它…

浙政钉SDK安装

专有订单SDK&#xff08;jar包&#xff09;下载 专有钉钉门户 (dg-work.cn) Maven依赖 浙政钉 <!-- 浙政钉 --> <dependency><groupId>com.oracel</groupId><artifactId>zwdd-sdk-java</artifactId><version>1.2.0</version…

【C++进阶篇】二叉搜索数

目录 前言&#xff1a; 以后我们要学map&#xff0c;set&#xff0c;AVL&#xff0c;红黑数所以必须要有二叉搜索数做铺垫 1、二叉搜索树概念 2.二叉搜索树操作 1.二叉搜索树的查找 a、从根开始比较&#xff0c;查找&#xff0c;比根大则往右边走查找&#xff0c;比根小则…

Jmeter 压测保姆级入门教程

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

Synchronized 优化

目录 前言 重点 一、 轻量级锁 二、锁膨胀 三、重量锁 四、偏向锁 五、其他优化 我的其他博客 前言 Java synchronized 是一种机制&#xff0c;可以保证多个线程在访问共享资源时的同步性。synchronized 关键字可以用于方法或代码块上&#xff0c;当一个线程获取了这个对…