零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践

ArkTS开发实践:

接着上一次零基础快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言介绍继续, 在上一次对于ArkTS的基础知识进行了学习,依照官方的课程计划,还有两个具体的小案例需要来实践实践:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第1张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第2张图片

实践出真知,还是非常有意义的,可以将零碎知识进行一个串连,下面就正式开撸。

实践一:可刷新的排行榜页面

效果:

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第3张图片

大概包含这三个功能:

1、点击右上角可以对列表数据进行刷新;

2、点击靠前的水果行,其样式会生成变化;

3、按back键两次整个app退出;

源码下载:

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第4张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第5张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第6张图片

发现项目编译失败了,报了个这个错:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第7张图片

也不知道为啥报这个错,先按着IDE的提示来处理一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第8张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第9张图片

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

实现:

1、创建项目:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第10张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第11张图片

2、 使用@Link封装标题组件:

如上一节介绍基础时所介绍的,这里的界面实现都会将其封装成一个小小组件的思路来实现,首先先来封装标题组件,也就是这块:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第12张图片

1、新建TitleComponent.ets:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第13张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第14张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第15张图片

此时IDE报红了,是因为对于一个组件,它必须有一个build()方法对UI进行描述,所以定义一下就不会报红了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第16张图片

2、定义标题的框架:

对于标题整个是一个水平的布局,关于布局这块其实在后面会有详细的描述:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第17张图片

但是这块其实也比较好理解,直接照着官方的源码来撸一遍,水平布局容器需要用到Row,如下:

然后咱们给它定义一个宽度,这里需要填满整个手机的宽度,如下设置:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第18张图片

然后再定义一下高度:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第19张图片

这里为了看到框架的效果,先给它加一点背景:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第20张图片

3、让组件显示出来:

接下来咱们来使用一下该组件,运行看一下效果,调界面本来就不是一气呵成的,得根据运行的情况一点点进行调整。这里先将首页的文件名改一个名称,跟官方源码的保持一质:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第21张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第22张图片

整个界面的结构是分为上下三段,第一段就是标题部分,所以可以这样来调用一下咱们封装的标题组件:

运行效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第23张图片

4、代码调整:

在继续往下编写之前先来做点代码上的优化,目前的代码细节跟官方是有区别的,尽量把官方写代码的方式给吸收一下,就是对于这些宽高色值等,目前我全是写死在页面中的:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第24张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第25张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第26张图片

所以学习好的习惯,也将这些用到的值都定义到一个常量文件中统一进行管理:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第27张图片

这个目录是根据官方的源码来创建的,然后将用到的常量都定义到Constants.ets中:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第28张图片

注意要export的,这样就可以直接页面中进行使用了,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第29张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第30张图片

接下来还有两个色值需要提取,其中TitleComponent中的这个是为了看效果,最终会去掉的,所以这里就不用提取它了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第31张图片

接下来这个色值是需要提取的:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第32张图片

同样的道理,这么来提取:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第33张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第34张图片

但是!!!官方不是这么做的,对比一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第35张图片

其中用到了$r语法,不明白,度娘搜一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第36张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第37张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第38张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第39张图片

哦,原来定义的是一个json格式,Android中定义的是一个xml,雷同,如果是字符串,则定义一个string.json,类似于Android的string.xml,所以咱们也来定义一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第40张图片

然后在页面中就可以这样来引用了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第41张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第42张图片

接下来还有一个常量需要定义一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第43张图片

同样的方式:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第44张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第45张图片

但是对比官方的,你会发现它将其定义到了这:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第46张图片

也很好理解,因为这个高度是在组件TitleComponent中使用的,而TitleComponent这个组件未来还会有其它更多的样式属性,统一定义在其中会更加的清晰,也好维护,所以校仿一下,先定义一个class:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第47张图片

然后要想在页面中能够使用到它,需要实例化它并export,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第48张图片

此时就可以这样来使用该常量了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第49张图片

5、定义左侧的排行榜:

接下来则来定义左侧的排行榜:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第50张图片

先定义返回箭头,这里使用一个svg图,直接从官方源中拷过来:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第51张图片

由于它右边还有一个元素都需要居左,所以这里还是用Row包裹一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第52张图片

它里面先让返回图片显示出来,很显然需要用到图片组件,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第53张图片

 这块就直接用了,用过一次就知道了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第54张图片

其中把图片的大小定义到常量文件中:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第55张图片

此时运行看一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第56张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第57张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第58张图片

关于这个常量的定义我这边就只截类定义中的了,对于export const的就不重复贴了,常量值一样就成,像这种:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第59张图片

此时再运行:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第60张图片

接下来再定义"排行榜"的标题:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第61张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第62张图片

6、使用@State来定义组件属性:

目前对于标题的文案是直接写死在了我们定义的组件里面了,很明显是不合理的,应该标题是由调用方来提供的,所以接下来咱们需要用到@State这上装饰器来定义了,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第63张图片

其中给了一个默认的标题,在string.json定义一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第64张图片

注意了,这个文本定义还需要在多语言中指定一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第65张图片

不然会报错,等于天生就设计成了多语言的结构。此时标题的设计就在使用组件时,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第66张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第67张图片

当然title中也得在string.json中定义,同样也得指定多语言版本:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第68张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第69张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第70张图片

关于这个文本的定义以后就不再提多语言这个事了。

关于@State的装饰器它的含义可以参考零基础快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言介绍,贴一下对它描述的图片回忆一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第71张图片

7、点击返回,退出app:

现在返回按钮还没有给它加点击事件,那在HarmonyOS中是如何添加的呢?如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第72张图片

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

而Activity它是一个Context,对于HarmonyOS来说,类似的,直接参考源码如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第73张图片

此时运行看一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第74张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第75张图片

它是属于Stage模型下的,这块可以参考文档中心进行了解。

8、定义右侧的刷新按钮:

接下来定义右侧的刷新按钮,它的点击事件暂且先不弄,因为需要跟下面列表数据进行一个互动,目前列表还木有弄,同样先导刷新的资源图,然后再显示出来,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第76张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第77张图片

此时运行看一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第78张图片

目前布局不太对,应该将它放到右边,此时就需要用到flext布局了,先定义一下排列方式:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第79张图片

关于它的含义可以参考这篇文章文档中心,有详细说明,然后再定义里面元素的对齐方式:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第80张图片

再看一下效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第81张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第82张图片

运行:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第83张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第84张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第85张图片

此时长这样:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第86张图片

嗯,成功解决,但是还有一个细节,就是高度太小,点击区域也不大,所以这里把高度也定义一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第87张图片

再运行:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第88张图片

完美。

3、封装列表头部样式组件:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第89张图片

1、新建组件:

接下来再来定义一个列表头部样式组件:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第90张图片

关于这个组件的细节就不过多强调了,比较简单。

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的写法需要熟悉一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第91张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第92张图片

另外,定义了两个属性:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第93张图片

这是因为这个值由调用方来进行设值。

3、使用组件:

接下来咱们来到页面中调用一下该组件:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第94张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第95张图片

此时运行看一下效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第96张图片

4、创建ListItemComponent:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第97张图片

接下来再来实现排行榜的列表了,这里先将列表的每一项的布局先准备好。

1、 新建ListItemComponent.ets:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第98张图片

2、定义常量:

这里将需要用到的常量都copy过来,这块就没必要花时间来从0开始定义了:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第99张图片

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)
  }
}

此时咱们来调用它看一下布局的效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第100张图片

目前的值都是在组件中写死的,很显然需要将其改成外部调用传值,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第101张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第102张图片

5、创建RankList:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第103张图片

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

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第104张图片

说白了就是如果想在组件内部来定义布局就可以使用它,下面具体来实现一下,这里就不一字不落的进行说明了,结合源码把关键的流程过一下。

1、先来定义列表的声明式UI描述:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第105张图片

里面的代码全是从官方demo中拷的,没啥可说明的。

2、生成列表项:

先来准备列表项的数据,先创建一个实体bean:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第106张图片

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用来获取列表中的数据,当然这个数据目前是本地写死的,未来则有从网络上进行获取的,等学到之后再说,下面准备下数据:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第107张图片

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来进行封装,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第108张图片

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、界面上加载数据:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第109张图片

注意:这里跟官方demo不一样的,少了一个:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第110张图片

那为啥要加它呢?参考文档中心对它的说明:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第111张图片

那目前咱们这个demo场景其实不用加,因为没有对数据进行更新的操作对吧,所以这块的重点是要理解这个装饰器的作用。另外还有一个用到了生命周期函数:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第112张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第113张图片

这里刚好可以做一些数据的初始化工作。

5、ForEach:循环渲染:

接下来就可以遍历生成列表项了,这里就需要使用到ForEach进行循环渲染了,这块可以参考文档中心,关于这块在后面的这章会详细学到的:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第114张图片

下面直接贴出来:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第115张图片

最后记得在这块更改一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第116张图片

运行看一下效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第117张图片

6、使用自定义组件生命周期onBackPress函数:

目前效果跟官方的还是有些区别,没有对界面加点击事件,在继续往下编写之前,先来处理按返回退出app的功能,现在是按了back直接退出了,通常在按back键时会给用户一个确认提示,如果再按就退出,所以接下来看这个效果在鸿蒙里是如何实现的。

1、先来定义两次back的退出间隔时间:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第118张图片

4.5s

2、接下来则根据点击的时间进行判断是否要退出app,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第119张图片

其中缺少的常量都拷贝至官方的源码,这里使用到了显示toast的知识点:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第120张图片

所以需要导致这个:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第121张图片

这块未来还会学习的,先有个感观上的认识,下面运行看一下效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第122张图片

7、处理列表的点击样式变更效果:

接下来则来处理点击列表项会变色的效果,这块其实也比较简单,就需要使用到@State这个装饰器了,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第123张图片

这里因为当点击时,需要让界面根据isChage这个变化而变,所以需要使用@State装饰器了,下面运行看一下效果:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第124张图片

另外咱们对于排名前三的序号的新式变成一个圆圈,加大醒目效果,如下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第125张图片

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第126张图片

运行:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第127张图片

布局有点问题,数字跟名称靠得太近了,这里应该这样改一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第128张图片

再运行:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第129张图片

8、刷新数据处理:

最后还有一个功能,就是点击右上角的刷新按钮,这里会涉及到一些知识点。

1、首页先处理根据变量来改变列表数据源的逻辑:

2、右上角按钮增加点击事件:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第130张图片

3、@Link装饰器:父子双向同步

接下来的问题就是如何让标题组件的状态让父组件RankPage的isSwitchDataSource变量的值进行变化了,这里就需要使用@Link父子双向同步装饰器了,这块官网对它有非常详细的描述,貌似也有点麻烦,可以从这个网址进行学习文档中心,下面直接使用一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第131张图片

然后在父组件中,可以进行绑定,像这样:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第132张图片

关于这块的知识在未来还会进一步学习,下面运行看一下:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第133张图片

跟官方的效果一样~~因为大部分其实都是copy的~~

总结:

至此,关于ArkTs的这个章节的demo就仿照着写了一遍,收获还是非常大的,编程无其它技巧,就是得多练,篇幅有点长,本来还差另一个实例的:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第134张图片

但是想了下,这个就先跳过了,不然目前的学习一直停在这个章节:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第135张图片

后面还有很多新的章节没学,先加速把后面的都整体过一遍再说,所以下篇学习它:

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践_第136张图片

  关注个人公众号,获得实时推送

你可能感兴趣的:(鸿蒙应用开发(2),harmonyos,华为,鸿蒙开发)