零底子快速上手HarmonyOS ArkTS开发2---ArkTS开发实践

王柳 · 2024-6-14 21:25:16

ArkTS开发实践：

接着上一次零底子快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言先容继承，在上一次对于ArkTS的底子知识进行了学习，依照官方的课程筹划，还有两个具体的小案例必要来实践实践：

实践出真知，还好坏常有意义的，可以将琐屑知识进行一个勾通，下面就正式开撸。
实践一：可革新的排行榜页面

结果：

先来看一下官方对于此案例的一个实现结果图：

大概包含这三个功能：
1、点击右上角可以对列表数据进行革新；
2、点击靠前的水果行，其样式会天生变化；
3、按back键两次整个app退出；
源码下载：

而这个案例官方提供有源码：

其实这些官议的codelabs的示例源代码都已经上传至gitlee了，可以一次性全部下下来，如下：https://gitee.com/harmonyos/codelabs.git

如许以后假如官方有其它的案例代码只要git pull就可以了，也便于同一管理，这里只观注RankingDemo这个源代码，用IDE打开运行一下，作为学习的一个参考。

发现项目编译失败了，报了个这个错：

也不知道为啥报这个错，先按着IDE的提示来处理惩罚一下：

也就是这个库的版本必要升级一下，升级成功之后，整个项目就编译成功了：

此时咱们可以运行确保都正常。
实现：

1、创建项目：

2、使用@Link封装标题组件：
如上一节先容底子时所先容的，这里的界面实现都会将其封装成一个小小组件的思绪来实现，起首先来封装标题组件，也就是这块：

1、新建TitleComponent.ets：

其中文件的扩展名是.ets，ets它的全称是“extended TypeScript”，然后咱们将它界说成一个组件，由于是第一次自己来界说组件，以是整个都手敲，加深对于ArkTs的一个语感：

此时IDE报红了，是由于对于一个组件，它必须有一个build()方法对UI进行描述，以是界说一下就不会报红了：

2、界说标题的框架：
对于标题整个是一个程度的布局，关于布局这块其实在后面会有详细的描述：

但是这块其实也比较好理解，直接照着官方的源码来撸一遍，程度布局容器必要用到Row，如下：

然后咱们给它界说一个宽度，这里必要填满整个手机的宽度，如下设置：

然后再界说一下高度：

这里为了看到框架的结果，先给它加一点背景：

3、让组件显示出来：
接下来咱们来使用一下该组件，运行看一下结果，调界面本来就不是趁热打铁的，得根据运行的情况一点点进行调整。这里先将首页的文件名改一个名称，跟官方源码的保持一质：

其中注意改了文件名之后，还得修改一下这块的地方，不然页面加载不出来：

整个界面的结构是分为上下三段，第一段就是标题部门，以是可以如许来调用一下咱们封装的标题组件：

运行结果：

4、代码调整：
在继承往下编写之前先来做点代码上的优化，如今的代码细节跟官方是有区别的，尽量把官方写代码的方式给吸取一下，就是对于这些宽高色值等，如今我全是写死在页面中的：

而官方的源码是抽到了一个常量文件中同一进行管理的：

以是学习好的风俗，也将这些用到的值都界说到一个常量文件中同一进行管理：

这个目次是根据官方的源码来创建的，然后将用到的常量都界说到Constants.ets中：

注意要export的，如许就可以直接页面中进利用用了，如下：

接下来还有两个色值必要提取，其中TitleComponent中的这个是为了看结果，最终会去掉的，以是这里就不用提取它了：

接下来这个色值是必要提取的：

同样的原理，这么来提取：

但是！！！官方不是这么做的，对比一下：

其中用到了$r语法，不明确，度娘搜一下：

直接就可以导到官方文档说明上，看一下：

而看一下这个资源文件是在哪创建的?

哦，原来界说的是一个json格式，Android中界说的是一个xml，雷同，假如是字符串，则界说一个string.json，雷同于Android的string.xml，以是咱们也来界说一下：

然后在页面中就可以如许来引用了：

其中有个细节，就是在IDE中按control键【我mac上是设置的这个风格，根据个人的喜好来】可以直接链接到color.json：

接下来还有一个常量必要界说一下：

同样的方式：

但是对比官方的，你会发现它将其界说到了这：

也很好理解，由于这个高度是在组件TitleComponent中使用的，而TitleComponent这个组件未来还会有其它更多的样式属性，同一界说在其中会更加的清晰，也好维护，以是校仿一下，先界说一个class：

然后要想在页面中能够使用到它，必要实例化它并export，如下：

此时就可以如许来使用该常量了：

5、界说左侧的排行榜：
接下来则来界说左侧的排行榜：

先界说返回箭头，这里使用一个svg图，直接从官方源中拷过来：

由于它右边还有一个元素都必要居左，以是这里还是用Row包裹一下：

它内里先让返回图片显示出来，很显然必要用到图片组件，如下：

这块就直接用了，用过一次就知道了：

其中把图片的巨细界说到常量文件中：

此时运行看一下：

图片正常显示，不外必要增加一个左边距，另外把蓝色测试背景给去掉，这些细节就不逐一说明了，没什么技术含量，还占篇幅，可以直接对着源码copy就成了，重点是熟悉其使用方式既可：

关于这个常量的界说我这边就只截类界说中的了，对于export const的就不重复贴了，常量值一样就成，像这种：

此时再运行：

接下来再界说"排行榜"的标题：

其中用到的常量直接从官方源码拷贝既可，接下来运行看一下：

6、使用@State来界说组件属性：
如今对于标题的文案是直接写死在了我们界说的组件内里了，很显着是不公道的，应该标题是由调用方来提供的，以是接下来咱们必要用到@State这上装饰器来界说了，如下：

其中给了一个默认的标题，在string.json界说一下：

注意了，这个文本界说还必要在多语言中指定一下：

不然会报错，即是天生就设计成了多语言的结构。此时标题的设计就在使用组件时，如下：

当然title中也得在string.json中界说，同样也得指定多语言版本：

关于这个文本的界说以后就不再提多语言这个事了。
关于@State的装饰器它的含义可以参考零底子快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言先容，贴一下对它描述的图片回忆一下：

7、点击返回，退出app：
如今返回按钮还没有给它加点击变乱，那在HarmonyOS中是如何添加的呢？如下：

有个前端经验的都知道，那如何让app退出呢？在Android中我们必要来调用Activity的finish对吧？

而Activity它是一个Context，对于HarmonyOS来说，雷同的，直接参考源码如下：

此时运行看一下：

其中这个上下文的知识可以在官网如许搜一下进一步了解一下：

它是属于Stage模型下的，这块可以参考文档中央进行了解。
8、界说右侧的革新按钮：
接下来界说右侧的革新按钮，它的点击变乱临时先不弄，由于必要跟下面列表数据进行一个互动，如今列表还木有弄，同样先导革新的资源图，然后再显示出来，如下：

此时运行看一下：

如今布局不太对，应该将它放到右边，此时就必要用到flext布局了，先界说一下排列方式：

关于它的含义可以参考这篇文章文档中央，有详细说明，然后再界说内里元素的对齐方式：

再看一下结果：

确实是一左一右了，但是，这俩控件没有完全居左和居右，咱们给这两元素加点背景色来看看它所占的区域是一个什么情况：

运行：

哦，那咱们可以把这两个元素的宽度也两等份进行均分一下：

此时长如许：

嗯，成功解决，但是还有一个细节，就是高度太小，点击区域也不大，以是这里把高度也界说一下：

再运行：

完美。
3、封装列表头部样式组件：

1、新建组件：
接下来再来界说一个列表头部样式组件：

关于这个组件的细节就不外多夸大了，比较简朴。
2、界说布局：

import { FontSize, ListHeaderStyle } from '../common/constants/Constants';
@Component
export struct ListHeaderComponent {
paddingValue: Padding | Length = 0;
widthValue: Length = 0;
build() {
Row() {
Text($r('app.string.page_number'))
.fontSize(FontSize.SMALL)
.width(ListHeaderStyle.LAYOUT_WEIGHT_LEFT)
.fontWeight(ListHeaderStyle.FONT_WEIGHT)
.fontColor($r('app.color.font_description'))
Text($r('app.string.page_type'))
.fontSize(FontSize.SMALL)
.width(ListHeaderStyle.LAYOUT_WEIGHT_CENTER)
.fontWeight(ListHeaderStyle.FONT_WEIGHT)
.fontColor($r('app.color.font_description'))
Text($r('app.string.page_vote'))
.fontSize(FontSize.SMALL)
.width(ListHeaderStyle.LAYOUT_WEIGHT_RIGHT)
.fontWeight(ListHeaderStyle.FONT_WEIGHT)
.fontColor($r('app.color.font_description'))
}
.width(this.widthValue)
.padding(this.paddingValue)
}
}

复制代码

其中对于padding的写法必要熟悉一下：

其中宽度采用了百分比来进行设置：

另外，界说了两个属性：

这是由于这个值由调用方来进行设值。
3、使用组件：
接下来咱们来到页面中调用一下该组件：

此时运行看一下结果：

4、创建ListItemComponent：

接下来再来实现排行榜的列表了，这里先将列表的每一项的布局先准备好。
1、新建ListItemComponent.ets：

2、界说常量：
这里将必要用到的常量都copy过来，这块就没必要花时间来从0开始界说了：

3、界说布局：

import { FontSize, FontWeight, ItemStyle, WEIGHT } from '../common/constants/Constants'
@Component
export struct ListItemComponent {
build() {
Row() {
Text("1")
.lineHeight(ItemStyle.TEXT_LAYOUT_SIZE)
.textAlign(TextAlign.Center)
.width(ItemStyle.TEXT_LAYOUT_SIZE)
.fontWeight(FontWeight.BOLD)
.fontSize(FontSize.SMALL)
.width(ItemStyle.LAYOUT_WEIGHT_LEFT)
Text("苹果")
.width(ItemStyle.LAYOUT_WEIGHT_CENTER)
.fontWeight(FontWeight.BOLDER)
.fontSize(FontSize.MIDDLE)
.fontColor(ItemStyle.COLOR_BLACK)
Text("1111")
.width(ItemStyle.LAYOUT_WEIGHT_RIGHT)
.fontWeight(FontWeight.BOLD)
.fontSize(FontSize.SMALL)
.fontColor(ItemStyle.COLOR_BLACK)
}
.height(ItemStyle.BAR_HEIGHT)
.width(WEIGHT)
}
}

复制代码

此时咱们来调用它看一下布局的结果：

如今的值都是在组件中写死的，很显然必要将其改成外部调用传值，如下：

此时调用时就可以来向该组件动态传值了：

5、创建RankList：

接下来则来处理惩罚列表显示的逻辑，根据官方的说明，会使用@Builder描述排行列表布局内容，其中@Builder装饰器它的意义回忆一下：

说白了就是假如想在组件内部来界说布局就可以使用它，下面具体来实现一下，这里就不一字不落的进行说明了，结合源码把关键的流程过一下。
1、先来界说列表的声明式UI描述：

内里的代码全是从官方demo中拷的，没啥可说明的。
2、天生列表项：
先来准备列表项的数据，先创建一个实体bean：

export class RankData {
name: Resource;
vote: string; // Number of votes
id: string;
constructor(id: string, name: Resource, vote: string) {
this.id = id;
this.name = name;
this.vote = vote;
}
}

复制代码

然后再发起一个model用来获取列表中的数据，当然这个数据如今是本地写死的，未来则有从网络上进行获取的，等学到之后再说，下面准备下数据：

import { RankData } from '../common/bean/RankData';
/*
* the Mock file instead of network data.
*/
export { rankData1, rankData2 }
const rankData1: RankData[] = [
new RankData('1', $r('app.string.fruit_apple'), '12080'),
new RankData('2', $r('app.string.fruit_grapes'), '10320'),
new RankData('3', $r('app.string.fruit_watermelon'), '9801'),
new RankData('4', $r('app.string.fruit_banana'), '8431'),
new RankData('5', $r('app.string.fruit_pineapple'), '7546'),
new RankData('6', $r('app.string.fruit_durian'), '7431'),
new RankData('7', $r('app.string.fruit_red_grape'), '7187'),
new RankData('8', $r('app.string.fruit_pears'), '7003'),
new RankData('9', $r('app.string.fruit_carambola'), '6794'),
new RankData('10', $r('app.string.fruit_guava'), '6721')
];
const rankData2: RankData[] = [
new RankData('11', $r('app.string.fruit_watermelon'), '8836'),
new RankData('12', $r('app.string.fruit_apple'), '8521'),
new RankData('13', $r('app.string.fruit_banana'), '8431'),
new RankData('14', $r('app.string.fruit_grapes'), '7909'),
new RankData('15', $r('app.string.fruit_red_grape'), '7547'),
new RankData('16', $r('app.string.fruit_pears'), '7433'),
new RankData('17', $r('app.string.fruit_pineapple'), '7186'),
new RankData('18', $r('app.string.fruit_durian'), '7023'),
new RankData('19', $r('app.string.fruit_guava'), '6794'),
new RankData('20', $r('app.string.fruit_carambola'), '6721')
];

复制代码

其中的文本资源文件直接从官方的源码中进行拷贝，这里就不详述了。
3、准备viewmodel：
对于界面上的数据调用通过viewmodel来进行封装，如下：

import { RankData } from '../common/bean/RankData';
import { rankData1, rankData2 } from '../model/DataModel';
export class RankViewModel {
// Load data from the rankData1 of the Mock file.
loadRankDataSource1(): RankData[] {
return rankData1;
}
// Load data from the rankData2 of the Mock file,but rankData2 is different from rankData1.
loadRankDataSource2(): RankData[] {
return rankData2;
}
}

复制代码

4、界面上加载数据：

注意：这里跟官方demo不一样的，少了一个：

那为啥要加它呢？参考文档中央对它的说明：

那如今咱们这个demo场景其实不用加，由于没有对数据进行更新的操作对吧，以是这块的重点是要理解这个装饰器的作用。另外还有一个用到了生命周期函数：

这里刚好可以做一些数据的初始化工作。
5、ForEach：循环渲染：
接下来就可以遍历天生列表项了，这里就必要使用到ForEach进行循环渲染了，这块可以参考文档中央，关于这块在后面的这章会详细学到的：

下面直接贴出来：

最跋文得在这块更改一下：

运行看一下结果：

6、使用自界说组件生命周期onBackPress函数：
如今结果跟官方的还是有些区别，没有对界面加点击变乱，在继承往下编写之前，先来处理惩罚按返回退出app的功能，如今是按了back直接退出了，通常在按back键时会给用户一个确认提示，假如再按就退出，以是接下来看这个结果在鸿蒙里是如何实现的。
1、先来界说两次back的退出间隔时间：