移动商城网站开发选择,网页中网站设计规划流程,wordpress文件目录结构,大学生网站制作作业免费下载前言#xff1a;
通过前面ArkTS开发语言#xff08;上#xff09;之TypeScript入门以及ArkTS开发语言#xff08;中#xff09;之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进#xff0c;知道了ArkTS具备了声明式语法和组件化特性#xff0c;今天#xff0c;搭…前言
通过前面ArkTS开发语言上之TypeScript入门以及ArkTS开发语言中之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进知道了ArkTS具备了声明式语法和组件化特性今天搭建一个可刷新的排行榜页面。在排行榜页面中使用循环渲染控制语法来实现列表数据渲染使用Builder创建排行列表布局内容使用装饰器State、Prop、Link来管理组件状态。最后我们点击系统返回按键来学习自定义组件生命周期函数。
基本概念
首先我们先要明白如下几个基本概念方便我们更好的理解ArkTS掌握和理解本demo的知识点。
声明式UI基本概念
应用界面是由一个个页面组成ArkTS是由ArkUI框架提供用于以声明式开发范式开发界面的语言。
声明式UI构建页面的过程其实是组合组件的过程声明式UI的思想主要体现在两个方面
描述UI的呈现结果而不关心过程状态驱动视图更新
类似苹果的SwiftUI中通过组合视图View安卓Jetpack Compose中通过组合Composable函数ArkUI作为HarmonyOS应用开发的UI开发框架其使用ArkTS语言构建自定义组件通过组合自定义组件完成页面的构建。
自定义组件的组成
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(...)},...)}...}
}组件状态管理装饰器和Builder装饰器 组件状态管理装饰器用来管理组件中的状态它们分别是State、Prop、Link。 State装饰的变量是组件内部的状态数据当这些状态数据被修改时将会调用所在组件的build方法进行UI刷新。 Prop与State有相同的语义但初始化方式不同。Prop装饰的变量必须使用其父组件提供的State变量进行初始化允许组件内部修改Prop变量但更改不会通知给父组件即Prop属于单向数据绑定。 Link装饰的变量可以和父组件的State变量建立双向数据绑定需要注意的是Link变量不能在组件内部进行初始化。 Builder装饰的方法用于定义组件的声明式UI描述在一个自定义组件内快速生成多个布局内容。
State、Prop、Link三者关系如图所示 4. 组件生命周期函数 自定义组件的生命周期函数用于通知用户该自定义组件的生命周期这些回调函数是私有的在运行时由开发框架在特定的时间进行调用不能从应用程序中手动调用这些回调函数。 右图是自定义组件生命周期的简化图示 后期会专门出一期文章讲解自定义组件的生命周期敬请期待。
渲染控制语法 渲染控制分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中还提供了内置枚举类型如ColorFontWeight等例如设置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:Arraystring [早起晨练,准备早餐,阅读名著,学习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)
