Harmony ArkTS语言

  随着华为宣布鸿蒙后续的版本不再兼容Android应用之后，对于现在的开发环境来说有一些冲击，一部分人想做鸿蒙应用开发，另一部分人觉得鸿蒙现在就想替换安卓还为之尚早，不管怎么说，学习是没有错的，哪怕是作为知识储备也是好的，今天就简单说一下鸿蒙应用开发支持的主流语言 ArkTS。

前言

  说到ArkTS就得说一下DevEco Studio的演变过程，在我写一篇关于鸿蒙的文章时，DevEco Studio才刚推出不久，当时所支持的语言是Java、JS、C++等，在后续的版本中逐渐去掉了Java，C++，最终使用到了ArkTS，那么我们下面来了解一下ArkTS的由来。

正文

  ArkTS是HarmonyOS主力应用开发语言，它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用，如果你之前接触过Flutter的Dart、Kotlin的Compose，那么你对于这个ArkTS的使用应该问题不大。

  ArkTS的构成如下图所示

  JavaScript、TypeScript和 ArkTS的关系：

• JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
• TypeScript是JavaScript的一个超集，它扩展了JavaScript的语法，通过在JavaScript的基础上添加静态类型定义构建而成，是一个开源的编程语言。
• ArkTS基于TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。

一、声明式UI

  声明式UI有两个特征分别是：声明式描述和状态驱动视图更新，那么怎么体现这一点呢？我们结合代码来说明，首先打开DevEco Studio，这里我使用的版本是DevEco Studio 3.1.1 Release，创建工程。

点击Next。

输入项目名称和包名，这里会说明使用的方式和语言及SDK版本和使用的设备类型，修改好之后点击Finish，完成项目的创建。

完成创建之后我们就可以看到index.ets的代码如图所示，下面我们对这段代码进行一个解析：

• 装饰器，用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言， @Component 表示这是个自定义组件； @Entry 则表示这是个入口组件； @State 表示组件中的状态变量，此状态变化会引起 UI 变更。
• 自定义组件，可复用的 UI 单元，可组合其它组件，如上述被 @Component 装饰的 struct Index。
• UI 描述，声明式的方式来描述 UI 的结构，如上述 build() 方法内部的代码块。
• 内置组件，框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的 Row、Column、Text。
• 事件方法，用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，比如为组件添加onClick()。
• 属性方法，用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。

下面我们预览看一下，点击右侧边栏的Previewer，等待一小会。

下面我们修改index.ets中的代码，然后Ctrl + S保存一下，右侧的预览画面就会更新。

预览更新后

点击Test按钮之后

  这里我们添加了一个按钮，同时添加了点击事件，事件中修改了message的值，而message是由@State修饰的，那么就会出发UI刷新，刷新后，Text组件所显示的内容就会从Hello World变成Hello ArkTS，这就是声明式UI的另一特征：状态驱动视图更新。

二、数据列表

  上面的示例比较简单，下面我们做一个有点难度的示例，该示例源于鸿蒙学堂官网，感兴趣的可以去学习。

① 创建ArkTS文件

  首先我们在ets目录下创建一个model目录，model目录下创建一个RankData.ets文件，代码如下所示：

export class RankData {
  id: number | string
  name: Resource
  vote: string

  constructor(id: number | string, name: Resource, vote: string) {
    this.id = id;
    this.name = name;
    this.vote = vote;
  }
}
1
2
3
4
5
6
7
8
9
10
11

  这里的代码简单说明一下，export 表示可以在其他模块中使用，这里的含义就在于我们将RankData反正model目录下，如果我们pages下要使用这个RankData，则RankData本身就需要支持调用才行，因此需要export进行修饰，调用的地方则使用import作为插入。

而id属性的定义是一个联合类型，这属于TypeScript的基础数据类型，表示取值可以为多种类型中的一种。number表示数字，string就是字符串，Resource就表示资源，比如string.app_name这种方式。构造函数就没有什么好说的了，就是属性赋值而已。

② 添加资源

  我们看到和ets目录平级的是resources，该目录下毫无疑问就是资源目录，目录下有三个文件夹，base属于基础资源目录里面可以放置文字、颜色、音频、配置文件等，en_US就是英文下的文字资源，zh_CN就是中文下的文字资源，三个目录下的文字资源文件都是json格式的，下面我们修改base/element/string.json和en_US/element/string.json中的代码：

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "page_type",
      "value": "variety"
    },
    {
      "name": "page_number",
      "value": "ranking"
    },
    {
      "name": "page_vote",
      "value": "vote"
    },
    {
      "name": "prompt_text",
      "value": "Press again to exit the app"
    },
    {
      "name": "title",
      "value": "Ranking List"
    },
    {
      "name": "title_default",
      "value": " "
    },
    {
      "name": "fruit_watermelon",
      "value": "watermelon"
    },
    {
      "name": "fruit_apple",
      "value": "apple"
    },
    {
      "name": "fruit_banana",
      "value": "banana"
    },
    {
      "name": "fruit_grapes",
      "value": "grapes"
    },
    {
      "name": "fruit_red_grape",
      "value": "grape"
    },
    {
      "name": "fruit_pears",
      "value": "pears"
    },
    {
      "name": "fruit_pineapple",
      "value": "pineapple"
    },
    {
      "name": "fruit_durian",
      "value": "durian"
    },
    {
      "name": "fruit_guava",
      "value": "guava"
    },
    {
      "name": "fruit_carambola",
      "value": "carambola"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

再修改zh_CN/element/string.json中的代码：

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "page_type",
      "value": "种类"
    },
    {
      "name": "page_number",
      "value": "排名"
    },
    {
      "name": "page_vote",
      "value": "得票数"
    },
    {
      "name": "prompt_text",
      "value": "再按一次退出程序"
    },
    {
      "name": "title",
      "value": "排行榜"
    },
    {
      "name": "title_default",
      "value": " "
    },
    {
      "name": "fruit_watermelon",
      "value": "西瓜"
    },
    {
      "name": "fruit_apple",
      "value": "苹果"
    },
    {
      "name": "fruit_banana",
      "value": "香蕉"
    },
    {
      "name": "fruit_grapes",
      "value": "葡萄"
    },
    {
      "name": "fruit_red_grape",
      "value": "红提"
    },
    {
      "name": "fruit_pears",
      "value": "梨子"
    },
    {
      "name": "fruit_pineapple",
      "value": "菠萝"
    },
    {
      "name": "fruit_durian",
      "value": "榴莲"
    },
    {
      "name": "fruit_guava",
      "value": "番石榴"
    },
    {
      "name": "fruit_carambola",
      "value": "杨桃"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

下面我们制造一些假数据，在model包下新建一个DataModel.ets文件，代码如下所示：

import { RankData } from './RankData'

export {rankData1, rankData2}

const rankData1: RankData[] = [
  new RankData(1, $r('app.string.fruit_apple'), "10000"),
  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')
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

  这里我们首先导入RankData，然后创建了两个数组，数组中通过RankData构建函数进行bean的构建，注意这里的id，我可以使用number也可以使用string，同时资源的引用是 $r，r就表示resource，使用app.string引用文字资源，你还可以app.color等一些方式引用其他类型资源，构建了两个数组，然后导出这两个数组在其他文件中使用。

  现在有了模拟数据之后，我们可以再创建一个类去提供模拟数据，在model包下新建一个RankViewModel.ets文件，代码如下所示：

import { RankData } from './RankData';
import { rankData1, rankData2 } from './DataModel';

export class RankViewModel {

  loadRankDataSource1(): RankData[] {
    return rankData1;
  }

  loadRankDataSource2(): RankData[] {
    return rankData2;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

  这里导入了RankData和DataModel，通过在RankViewModel中进行返回数据得到具体的数据数组。这个其实和Android的MVI架构差不多，下面我们再添加一些colors资源，在后面的样式上会用到，修改base/element/color.json文件，代码如下所示：

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "white",
      "value": "#FFFFFF"
    },
    {
      "name": "rank_first_gradient_start",
      "value": "#FFFF9A"
    },
    {
      "name": "rank_first_gradient_end",
      "value": "#CCA538"
    },
    {
      "name": "rank_first_border",
      "value": "#9E8A24"
    },
    {
      "name": "rank_first_text",
      "value": "#9E8A24"
    },
    {
      "name": "rank_secondary_gradient_start",
      "value": "#B8B8B8"
    },
    {
      "name": "rank_secondary_gradient_end",
      "value": "#9C9C9C"
    },
    {
      "name": "rank_secondary_border",
      "value": "#7E7E7E"
    },
    {
      "name": "rank_secondary_text",
      "value": "#FFFFFF"
    },
    {
      "name": "rank_third_gradient_start",
      "value": "#B9A185"
    },
    {
      "name": "rank_third_gradient_end",
      "value": "#AE8659"
    },
    {
      "name": "rank_third_border",
      "value": "#775C3E"
    },
    {
      "name": "rank_third_text",
      "value": "#FFFFFF"
    },
    {
      "name": "rank_view_color_holder",
      "value": "#FFFFFF"
    },
    {
      "name": "item_color",
      "value": "#007DFF"
    },
    {
      "name": "item_color_black",
      "value": "#182431"
    },
    {
      "name": "background",
      "value": "#F1F3F5"
    },
    {
      "name": "font_description",
      "value": "#989A9C"
    },
    {
      "name": "circle_text_background",
      "value": "#007dff"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

除此之外还有三个图标，你可以在我的源码中获取，放在resources/base/media下

  其中icon.png是创建工程时自带的图标，如果你觉得Project模式下文件过多，你可以切换为Ohos模式。

这样看起来比较简洁，只不过你需要熟悉文件结构才行。

③ 样式

  在进行鸿蒙应用开发时，通常会将样式和代码进行分离，这一点是很常见了，我们在ets目录下新建一个constants文件夹，该目录下新建一个Constants.ets文件，代码如下：

/**
 * 字体大小
 */
export enum FontSize {
  SMALL = 14,
  MIDDLE = 16,
  LARGE = 20,
};

/**
 * 字体粗细
 */
export enum FontWeight {
  BOLD = '400',
  BOLDER = '500',
};

/**
 * 权重是组件大小的全局默认值。
 */
export const WEIGHT = '100%';

/**
 * Toast 出现的时间
 */
export const TIME = 1000;

/**
 * App退出的间隔时间
 */
export const APP_EXIT_INTERVAL: number = 4500;

/**
 * 页面TAG
 */
export const TAG: string = 'Index';

/**
 * 标题内容
 */
export const TITLE: Resource = $r('app.string.title');

class style {
  RANK_PADDING: number = 15;        // 排名填充
  CONTENT_WIDTH: string = '90%';    // 内容的宽度
  BORDER_RADIUS: number = 20;       // 边界半径
  STROKE_WIDTH: number = 1;         // 描边宽度
  HEADER_MARGIN_TOP: number = 20;   // 距离上边距
  HEADER_MARGIN_BOTTOM: number = 15;// 距离下边距
  LIST_HEIGHT: string = '65%';      // List高度
}

/**
 * 页面样式
 */
export const Style: style = {
  RANK_PADDING: 15,
  CONTENT_WIDTH: '90%',
  BORDER_RADIUS: 20,
  STROKE_WIDTH: 1,
  HEADER_MARGIN_TOP: 20,
  HEADER_MARGIN_BOTTOM: 15,
  LIST_HEIGHT: '65%'
};

class listHeaderStyle {
  FONT_WEIGHT: number = 400;            // 字体粗细
  LAYOUT_WEIGHT_LEFT: string = '30%';   // 左边的布局权重
  LAYOUT_WEIGHT_CENTER: string = '50%'; // 中间的布局权重
  LAYOUT_WEIGHT_RIGHT: string = '20%';  // 右边的布局权重
}

/**
 * 列表标题样式
 */
export const ListHeaderStyle: listHeaderStyle = {
  FONT_WEIGHT: 400,
  LAYOUT_WEIGHT_LEFT: '30%',
  LAYOUT_WEIGHT_CENTER: '50%',
  LAYOUT_WEIGHT_RIGHT: '20%',
};

class itemStyle {
  TEXT_LAYOUT_SIZE: number = 24;          // 文本的行高
  CIRCLE_TEXT_BORDER_RADIUS: number = 24; // 圆形文本的边框半径
  CIRCLE_TEXT_SIZE: number = 24;          // 圆圈文本的大小
  CIRCLE_TEXT_COLOR_STOP_1: number = 0.5; // 渐变色比例1
  CIRCLE_TEXT_COLOR_STOP_2: number = 1.0; // 渐变色比例2
  BAR_HEIGHT: number = 48;                // item高度
  LAYOUT_WEIGHT_LEFT: string = '30%';     // 左边的布局权重
  LAYOUT_WEIGHT_CENTER: string = '50%';   // 中间的布局权重
  LAYOUT_WEIGHT_RIGHT: string = '20%';    // 右边的布局权重
  BORDER_WIDTH: number = 1;               // 边框宽度
  COLOR_BLUE: Resource = $r('app.color.item_color');     // 文字蓝色
  COLOR_BLACK: Resource = $r('app.color.item_color_black');    // 文字黑色
}

/**
 * 列表Item样式
 */
export const ItemStyle: itemStyle = {
  TEXT_LAYOUT_SIZE: 24,
  CIRCLE_TEXT_BORDER_RADIUS: 24,
  CIRCLE_TEXT_SIZE: 24,
  CIRCLE_TEXT_COLOR_STOP_1: 0.5,
  CIRCLE_TEXT_COLOR_STOP_2: 1.0,
  BAR_HEIGHT: 48,
  LAYOUT_WEIGHT_LEFT: '30%',
  LAYOUT_WEIGHT_CENTER: '50%',
  LAYOUT_WEIGHT_RIGHT: '20%',
  BORDER_WIDTH: 1,
  COLOR_BLUE: $r('app.color.item_color'),
  COLOR_BLACK: $r('app.color.item_color_black')
};

class titleBarStyle {
  IMAGE_BACK_SIZE: number = 21;         // 后退按钮的图像大小
  IMAGE_BACK_MARGIN_RIGHT: number = 18; // 后退按钮的右边距
  IMAGE_LOADING_SIZE: number = 22;      // 刷新按钮的图像大小
  BAR_HEIGHT: number = 47;              // 标题栏的高度
  BAR_MARGIN_HORIZONTAL: number = 26;   // 标题组件的水平边距
  BAR_MARGIN_TOP: number = 10;          // 标题组件的上边距
  WEIGHT: string = '50%';               // 行布局的权重
}

/**
 * 标题栏样式
 */
export const TitleBarStyle: titleBarStyle = {
  IMAGE_BACK_SIZE: 21,
  IMAGE_BACK_MARGIN_RIGHT: 18,
  IMAGE_LOADING_SIZE: 22,
  BAR_HEIGHT: 47,
  BAR_MARGIN_HORIZONTAL: 26,
  BAR_MARGIN_TOP: 10,
  WEIGHT: '50%',
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

  这里的代码乍一看很多，不好理解，其实我们分析一下就知道是写什么属性，首先我们定义了页面字体大小和粗细的枚举类型，用于设置标题文字和其他文字，然后就是页面的权重、退出App的提示时间等、接着就是定义页面样式、标题栏样式、列表头样式、列表Item样式，通过注释你可以你知道每一个样式是什么意思，熟能生巧，你现在觉得不适应是因为不熟悉的缘故。

④ 组件

  在ArkTS中组件是一个比较重要的知识点，组件也分为三个类型，基础组件、容器组件和自定义组件。

• 基础组件，比如Text、Button、Image、TextInput等。
• 容器组件，比如Column、Row、Stack、List等。
• 自定义组件，则是根据实际的功能需求，由开发者自己组合使用基础组件和容器组件变成新的功能组件。比如页面的标题栏，左侧是返回按钮，中间是标题文字，可能还会有副标题，右侧是功能按钮，这种就是自定义组件。

⑤ 标题组件

  下面我们来自定义一个组件，做一个标题栏组件，效果如下图所示：

首先我们在ets目录下新建一个view文件夹，该目录下新建一个TitleComponent.ets文件，代码如下：

/**
 * 自定义页面标题组件
 */
import AppContext from '@ohos.app.ability.common'
import { FontSize, TitleBarStyle, WEIGHT } from '../constants/Constants'

@Component
export struct TitleComponent {
  @Link isRefreshData: boolean //是否刷新数据

  @State title: Resource = $r('app.string.title_default')

  build() {
    Row() {
      Row() {
        //返回图标
        Image($r('app.media.ic_public_back'))
          .height(TitleBarStyle.IMAGE_BACK_SIZE)
          .width(TitleBarStyle.IMAGE_BACK_SIZE)
          .margin({ right: TitleBarStyle.IMAGE_BACK_MARGIN_RIGHT })
          .onClick(() => {
            let handler = getContext(this) as AppContext.UIAbilityContext
            handler.terminateSelf() //杀死程序
          })
        //标题文字
        Text(this.title)
          .fontSize(FontSize.LARGE)
      }
      .width(TitleBarStyle.WEIGHT)
      .height(WEIGHT)
      .justifyContent(FlexAlign.Start) //内容左对齐

      Row() {
        //刷新图标
        Image($r('app.media.loading'))
          .height(TitleBarStyle.IMAGE_LOADING_SIZE)
          .width(TitleBarStyle.IMAGE_LOADING_SIZE)
          .onClick(() => {
            this.isRefreshData = !this.isRefreshData //修改刷新状态
          })
      }
      .width(TitleBarStyle.WEIGHT)
      .height(WEIGHT)
      .justifyContent(FlexAlign.End) //内容右对齐
    }
    .width(WEIGHT)
    .padding({ left: TitleBarStyle.BAR_MARGIN_HORIZONTAL,
      right: TitleBarStyle.BAR_MARGIN_HORIZONTAL })
    .margin({ top: TitleBarStyle.BAR_MARGIN_TOP })
    .height(TitleBarStyle.BAR_HEIGHT)
    .justifyContent(FlexAlign.SpaceAround)  // 占满剩余空间
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

  下面我们来分析一下这些代码，首先我们导入一些需要用到的样式和App上下文，因为点击返回键需要退出App，然后就是通过@Component装饰的struct表示TitleComponent结构体具有组件化能力，能够成为一个独立的组件。

  然后我们使用到了@Link 修饰isRefreshData，作为刷新数据的标识，但是在标题组件中并没有对此变量进行初始化，需要父组件在创建标题组件时对isRefreshData进行赋值，在DevEco Studio中如果你对一个修饰符或者一个API不了解，你可以将鼠标放在上面，例如将鼠标放在@Link上面，会出现一个弹窗。

我们点击Show in API Reference，编辑器右侧就会出现API的说明。

  这个功能还是很Nice的，好了，我们接着来看，isRefreshData变量在点击刷新图标时会进行更改，通过@Link装饰的变量可以和父组件的@State变量建立双向数据绑定，就会将对应该的值传递到父组件，父组件会更新UI，更新UI的时候根据状态切换渲染的数据源。同时定义了一个title，其实我们可以简单的来看，你就把isRefreshData，title当成标题组件的两个参数，父组件要使用子组件，则必须要传两个值进来。自定义组件必须定义build()方法，在其中进行UI描述。

  接下来就是一个Row表示横向布局，Row里面放了两个Row，第一个左对齐，装载返回图标和标题，第二个Row放刷新图标，标题组件就介绍完了，下面我们可以将它装载的父组件中使用了，修改Index.ets中的代码，如下所示：

import { TITLE, WEIGHT } from '../constants/Constants';
import { TitleComponent } from '../view/TitleComponent';

@Entry
@Component
struct Index {
  // 是否切换RankList的数据
  @State isSwitchDataSource: boolean = true

  build() {
    Column() {
      TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
    }
    .backgroundColor($r('app.color.background'))
    .height(WEIGHT)
    .width(WEIGHT)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  这里我们就是在Index父组件中进行使用标题组件，通过 $ 操作符来创建引用，使子组件中isRefreshData和父组件中的isSwitchDataSource建立双向数据绑定，当isRefreshData值变化时，父组件Index中的isSwitchDataSource值也会随着改变，修改代码之后保存一下，然后可以看到预览页面发生了变化

⑥ 列表头组件

下面我们来写列表头组件，在view包下新建一个ListHeaderComponent.ets文件，里面的代码如下所示：

/**
 * 列表头自定义组件
 */
import { FontSize, ListHeaderStyle } from '../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)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

  这里的代码就相对来说简单很多了，就是三个文字描述，就没有什么好说的，下面我们直接在Index.ets中使用，

import { Style, TITLE, WEIGHT } from '../constants/Constants';
import { ListHeaderComponent } from '../view/ListHeaderComponent';
import { TitleComponent } from '../view/TitleComponent';

@Entry
@Component
struct Index {

  // 是否切换RankList的数据
  @State isSwitchDataSource: boolean = true

  build() {
    Column() {
      //标题栏
      TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
      //列表头
      ListHeaderComponent({
        paddingValue: {
          left: Style.RANK_PADDING,
          right: Style.RANK_PADDING
        },
        widthValue: Style.CONTENT_WIDTH
      })
        .margin({
          top: Style.HEADER_MARGIN_TOP,
          bottom: Style.HEADER_MARGIN_BOTTOM
        })
    }
    .backgroundColor($r('app.color.background'))
    .height(WEIGHT)
    .width(WEIGHT)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

然后保存一下再看预览效果：

⑦ 列表Item组件

最后我们来看列表item组件，在view包下新建一个ListItemComponent.ets文件，代码如下所示：

import { FontSize, FontWeight, ItemStyle, WEIGHT } from '../constants/Constants';
/**
 * 列表Item组件
 */
@Component
export struct ListItemComponent {
  index: number;
  name: Resource;
  vote: string;
  // 是否切换数据源
  isSwitchDataSource: boolean = false;
  // 是否改变文字选中文字颜色
  @State isChange: boolean = false;

  build() {
    Row() {
      //排名
      Column() {
        if (this.isRenderCircleText()) {
          //渲染
          if (this.index !== undefined) {
            this.CircleText(this.index);
          }
        } else {
          //不渲染
          Text(this.index?.toString())
            .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE)
            .textAlign(TextAlign.Center)
            .width(ItemStyle.TEXT_LAYOUT_SIZE)
            .fontWeight(FontWeight.BOLD)
            .fontSize(FontSize.SMALL)
        }
      }
      .width(ItemStyle.LAYOUT_WEIGHT_LEFT)
      .alignItems(HorizontalAlign.Start)
      //种类
      Text(this.name)
        .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
        .fontWeight(FontWeight.BOLDER)
        .fontSize(FontSize.MIDDLE)
        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK) //根据选中状态修改文字颜色
      //得票数
      Text(this.vote)
        .width(ItemStyle.LAYOUT_WEIGHT_RIGHT)
        .fontWeight(FontWeight.BOLD)
        .fontSize(FontSize.SMALL)
        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK) //根据选中状态修改文字颜色
    }
    .height(ItemStyle.BAR_HEIGHT)
    .width(WEIGHT)
    .onClick(() => { //item 点击事件
      this.isChange = !this.isChange;
    })
  }


  /**
   * 圆形背景文字
   * @param index
   */
  @Builder CircleText(index: number) {
    Row() {
      Text(index.toString())
        .fontWeight(FontWeight.BOLD)
        .fontSize(FontSize.SMALL)
        .fontColor(Color.White);
    }
    .justifyContent(FlexAlign.Center)
    .borderRadius(ItemStyle.CIRCLE_TEXT_BORDER_RADIUS)
    .size({ width: ItemStyle.CIRCLE_TEXT_SIZE,
      height: ItemStyle.CIRCLE_TEXT_SIZE })
    .backgroundColor($r('app.color.circle_text_background'))
  }

  /**
   * 是否渲染圆圈文本
   * @returns
   */
  isRenderCircleText(): boolean {
    // 列表中第三个元素的渲染圆圈文本
    return this.index === 1 || this.index === 2 || this.index === 3;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

  这个列表Item组件里面的代码比较多，我们来分析一下，首先导入的样式就没有什么好说的，然后我们看ListItemComponent组件里面定义的5个参数，前三个是Item显示的内容，而isChange是用来控制item中种类和得票数点击效果的，然后看到build()方法里面，首先是横向布局，然后处理第一个数据，排名，因为我们希望前3个数据标注一下，所以在ListItemComponent组件中写了一个isRenderCircleText()函数，用于判断是否需要进行样式渲染，这里你会看到这里index判断的是1、2和3，但是下标是从0开始的，因此在传index进来的时候，index就是+1的，你不会看到那个排行榜从0开始，然后就是写了一个CircleText()函数，通过这个函数传递index进去创建一个圆形背景，白色文字的样式UI。再往下走就是种类、得票数的渲染，在设置fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)中对isChange 进行判断从而设置不同的文字颜色，最后就是当前item的点击事件，在点击事件中，更改isChange的值，因为是@State装饰的，所以会触发UI更新，从而修改文字颜色，那么相信列表Item组件你都了解了，下面我们回到Index父组件。

⑧ 组件生命周期

  在父组件使用子组件之前我们再来了解一些关于组建的知识点，通过@Entry装饰的自定义组件用作页面的默认入口组件，加载页面是，将首先创建并呈现@Entry装饰的自定义组件，比如当前的Index，一个页面有且仅能有一个@Entry，这一点很重要，只有被@Entry修饰的组件或者其子组件才会在页面上显示，为什么要说这么多呢？

  这是因为@Entry和@Component所修饰的组件的生命周期有所不同。

  通过@Component所修饰组件，生命周期如下图所示：

  这是自定义组件创建到销毁的过程，在这个过程中系统提供了生命周期回调函数：aboutToAppear()和aboutToDisappear()，用于通知开发者该自定义组件所处的阶段，aboutToAppear()在创建自定义组件实例后到执行起build()函数之前执行，你可以在aboutToAppear()函数中对UI需要展示的数据进行初始化或者申请定时器资源等操作，这样在后续build()函数中可以使用这些数据和资源来进行UI展示。可以在aboutToDisappear()函数中释放不再使用的资源，避免资源泄露。

  还需要注意一点，由于这些回调函数是私有的，系统会在特定的时间下自动调用，是无法手动调用这些回调函数的。

  通过@Entry所修饰的页面入口组件，生命周期如下图所示：

  可以看到相对于自定义组件，页面入口组件多了onPageShow()、onBackPress()和onPageHide()三个生命周期函数，当用户从手机桌面打开应用，应用进入前台时页面显示，触发onPageShow()函数，当用户点击home键回到桌面时，应用进入后台时，页面消失，触发onPageHide()函数，而当通过系统方式执行返回操作时，触发onBackPress()函数。这里提到了生命周期，是因为下面我们需要用到生命周期。

⑨ 渲染列表数据

我们回到Index.ets，然后修改一些代码，修改后如下所示：

import promptAction from '@ohos.promptAction';
import { APP_EXIT_INTERVAL, Style, TIME, TITLE, WEIGHT } from '../constants/Constants';
import { RankData } from '../model/RankData';
import { RankViewModel } from '../model/RankViewModel';
import { ListHeaderComponent } from '../view/ListHeaderComponent';
import { ListItemComponent } from '../view/ListItemComponent';
import { TitleComponent } from '../view/TitleComponent';

let rankModel: RankViewModel = new RankViewModel()

@Entry
@Component
struct Index {
  @State dataSource1: RankData[] = []
  @State dataSource2: RankData[] = []
  // 是否切换RankList的数据
  @State isSwitchDataSource: boolean = true
  // 记录点击系统导航返回按钮的时间
  private clickBackTimeRecord: number = 0;

  /**
   * 是否显示Toast
   * @returns
   */
  isShowToast(): boolean {
    return new Date().getTime() - this.clickBackTimeRecord > APP_EXIT_INTERVAL
  }

  /**
   * 页面显示回调 - 生命周期
   */
  aboutToAppear() {
    this.dataSource1 = rankModel.loadRankDataSource1()
    this.dataSource2 = rankModel.loadRankDataSource2()
  }

  /**
   * 页面返回回调
   * @returns
   */
  onBackPress() {
    if (this.isShowToast()) {
      promptAction.showToast({
        message: $r('app.string.prompt_text'), duration: TIME
      })
      this.clickBackTimeRecord = new Date().getTime();
      return false
    }
    return false
  }

  build() {
    Column() {
      //标题栏
      TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
      //列表头
      ListHeaderComponent({
        paddingValue: {
          left: Style.RANK_PADDING,
          right: Style.RANK_PADDING
        },
        widthValue: Style.CONTENT_WIDTH
      })
        .margin({
          top: Style.HEADER_MARGIN_TOP,
          bottom: Style.HEADER_MARGIN_BOTTOM
        })
      //列表
      this.RankList(Style.CONTENT_WIDTH)
    }
    .backgroundColor($r('app.color.background'))
    .height(WEIGHT)
    .width(WEIGHT)
  }

  /**
   * 配置列表
   * @param widthValue
   */
  @Builder RankList(widthValue: Length) {
    Column() {
      List() {
        ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2,
          (item: RankData, index?: number) => {
            ListItem() {
              // 加载Item
              ListItemComponent({ index: (Number(index) + 1), name: item.name, vote: item.vote })
            }
          }, (item: RankData) => JSON.stringify(item))
      }
      .width(WEIGHT)
      .height(Style.LIST_HEIGHT)
      .divider({ strokeWidth: Style.STROKE_WIDTH})
    }
    .padding({
      left: Style.RANK_PADDING,
      right: Style.RANK_PADDING
    })
    .borderRadius(Style.BORDER_RADIUS)
    .width(widthValue)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

  下面我们进行解析，首先是初始化一个rankModel，这里我们前面写好的一个类，用于提供数据源，然后在Index中，创建两个数组，在回调函数aboutToAppear()中进行初始化，然后在onBackPress()回调函数中，处理是否需要显示退出应用时的Toast，return false表示系统处理返回事件，return true表示用户自己处理。接下来最重要的就是我们在Index中增加了RankList()函数，函数中就是通过List()组件装载ListItem()，ForEach遍历当前的数据源，再通过调用ListItemComponent()组件，构建每一个列表Item，注意这里index + 1，所以0，1，2就变成了1，2，3，列表就写好了。最后在build()函数中调用RankList()函数，即可完成整个页面功能。下面我们运行一下，看看效果。

⑩ 单选

  在上面的处理中我们是通过改变Item的状态来达到选中之后的文字颜色改变，当选了其他的Item之后，之前的Item并没有什么变化，那么如果我想做单选的效果呢？

  从UI上来看，单选我们首先要记录一个选中位置，然后在点击Item的时候更新选中位置，修改文字颜色，同时要更新整个列表，更新列表的时候自然也会更新Item，那么这里就需要使用到@Link来装饰选中位置，下面我们修改一下列表Item组件中的代码：

  首先增加一个属性，然后根据值匹配当前Item的Index来设置文字颜色，并在点击Item的时候对选中位置重新赋值。

然后回到Index，这里我们增加一个selectedIndex，

再构建Item时，将这个值传进去

  这样就实现了单选功能，我就不贴动图了，因为没有真机，这个动图制作起来太麻烦了，你保存一下，在预览效果中也可以测试出来。

三、源码

如果对你有所帮助的话，不妨 Star 或 Fork，山高水长，后会有期~

源码地址：MyApplication