鸿蒙项目结构
1entry
2├── preview
3├── src
4 ├── main
5 ├── ets # 存放代码文件
6 ├── entryability
7 ├── entrybackupability
8 ├── pages
9 ├── Index.ets
10 ├── resources # 存放资源文件
示例文件Index.ets
1@Entry // Index文件入口
2@Component // 声明以下为组件
3struct Index {
4 @State message: string = 'Hello World';
5
6 build() {
7 RelativeContainer() {
8 Text(this.message) // 系统组件
9 .id('HelloWorld')
10 .fontSize($r('app.float.page_text_font_size'))
11 .fontWeight(FontWeight.Bold)
12 .alignRules({
13 center: { anchor: '__container__', align: VerticalAlign.Center },
14 middle: { anchor: '__container__', align: HorizontalAlign.Center }
15 })
16 .onClick(() => {
17 this.message = 'Welcome';
18 })
19 }
20 .height('100%')
21 .width('100%')
22 }
23}
变量和数据类型
一般变量
| 信息类型 | 数据类型 |
|---|---|
| 文字信息 | 字符串类型（string） |
| 数字信息 | 数字类型（number） |
| 状态信息 | 布尔类型（boolean） |
声明变量：
1let parameter: type = value
数组
数组是一种容器，用来存储多个同类型数据。数组中元素的索引从0开始。
声明数组：
1let array: type[] = [data1,data2,data3,...]
对象
对象可以一次性存储多个不同类型的数据。在HarmonyOS中，使用接口约定对象的结构和类型。
声明对象：
1interface Interface {
2 parameter1: type1
3 parameter2: type2
4 ...
5 parametern: typen
6}
7
8// 约定接口后相应对象中应包含接口中的所有数据类型
9let object: Interface = {
10 parameter1: data1,
11 parameter2: data2,
12 ...
13 parametern: datan
14}
15
16// 访问方法
17fun(object.data1)
函数
普通函数
- 定义函数
1function fun (parameter1: type1, parameter2: type2,...) {
2 ...
3 return value
4}
- 调用函数
1fun(parameter1, parameter2,...)
2
3//可以使用变量接收函数返回值
4let text: string = fun()
箭头函数
1// 定义函数
2let fun = (parameter1: type1, parameter2: type2, ...) => {
3 ...
4 return value
5}
6
7// 调用函数
8fun(parameter1, parameter2)
自定义构建函数
可以将组件的构建函数封装到@Builder中。
1@Entry
2@Component
3struct Index {
4 // 定义自定义构建函数
5 @Builder
6 name (parameterList) {
7 component
8 }
9
10 build() {
11 Column() {
12 // 使用自定义构建函数
13 this.name(parameterList)
14 }
15 }
16}
组件
ArkUI（方舟开发框架）：构建鸿蒙应用界面的框架
组件：界面构建与显示的最小单位
两类基本组件
容器组件：控制布局
1// 写法：组件名() {}
2
3Cloumn() {} // 内容竖排
4Row() {} // 内容横排
build() {} 中只允许存在一个根组件，但组件允许嵌套使用。
内容组件：内容
1// 写法：组件名()
2
3Text('内容') // 文本组件
4Button() // 按钮组件
5Image(url) // 图像组件
6List() // 可滚动组件
通用属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
width |
宽度 | 数值（默认单位vp） |
height |
高度 | 数值（默认单位vp） |
backgroundColor |
背景色 | 色值（内置颜色或16进制色值） |
给组件添加属性：
1struct Index {
2 build() {
3 Column() {
4 Text('text')
5 .width(100) // 宽度设为100vp
6 .height(50) // 高度设为50vp
7 .backgroundColor(Color.Orange) // 背景色设为橙色
8 /*
9 HarmonyOS的满屏尺寸：
10 .width(360)
11 .width('100%')
12 */
13 }
14 }
15}
文本属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
fontsize |
字体大小 | 数值（默认单位fp） |
fontColor |
文本颜色 | 色值（内置颜色或16进制色值） |
fontWeight |
字体粗细 | 100~900 |
示例：
1struct Index {
2 build() {
3 Column() {
4 Text('text')
5 .fontSize(30)
6 .fontColor(Color.Red)
7 .fontWeight(400) // 默认粗细为400
8 }
9 }
10}
图像属性
- 图片路径
1// 本地路径：设图片在entry/src/main/resource/media文件夹中
2Image($r('app.media.xx'))
3
4// 网络路径
5Image(www.example.com)
- 图片样式
可使用通用属性。
内外边距属性
内边距：padding，拉开内容与组件边缘的距离。
外边距：margin，拉开两个组件之间的距离。
1// 四个方向间距相同
2component()
3 .padding(10)
4 .margin(10)
5
6// 间距不同
7component()
8 .padding({top: 10, bottom: 20, left: 30, right: 40})
9 .margin({top: 10, bottom: 20, left: 30, right: 40})
示例：
1struct Index {
2 build() {
3 Column() {
4 Button('登录')
5 .width('100%')
6 .margin(10)
7 Button('注册')
8 .width('100%')
9 }
10 .backgroundColor('#DDDDDD')
11 .padding({
12 top: 10,
13 bottom: 20,
14 left: 30,
15 right: 30
16 })
17 }
18}
边框属性
1component()
2 .border({
3 width: // 粗细
4 color: // 颜色
5 style: // 线条样式
6 radius: // 圆角
7 })
实例：歌曲列表
1@Entry
2@Component
3
4struct Index {
5 build() {
6 Column() {
7 Text('猜你喜欢')
8 .fontColor('#fff')
9 .width('100%')
10 .margin({bottom: 10})
11
12 List() {
13 // 音乐卡片1
14 ListItem() {
15 Row() {
16 // 音乐封面
17 Image($r('app.media.1'))
18 .width(80)
19 .border({radius: 8})
20 .margin({right: 10})
21
22 // 音乐信息
23 Column() {
24 Text('xxx')
25 .fontColor('#F3F3F3')
26 .width('100%')
27 .fontWeight(700)
28 .margin({bottom: 15})
29 Row() {
30 Text('VIP')
31 .fontColor('#9ABE28')
32 .border({
33 width: 1, color: '#9ABE28', radius: 12
34 })
35 .padding({
36 left: 5, right: 5, top: 3, bottom: 3
37 })
38 .margin({right: 10})
39
40 Text('Singer')
41 }
42 .width('100%')
43 }
44 .layoutWeight(1) // 占用所有剩余空间
45
46 // 更多信息
47 Image($r('app.media.ic_more'))
48 .width(24)
49 .fillColor('#FEFEFE')
50
51 }
52 .width('100%')
53 .height(80)
54 .backgroundColor(Color.Pink)
55 .margin({bottom: 10})
56 }
57 }
58 }
59 .width('100%')
60 .height('100%')
61 .backgroundColor('#131313')
62 .padding({left: 10, right: 10})
63 /* 扩充安全区
64 .expandSafeArea(
65 [SafeAreaType.SYSTEM],
66 [SafeAreaType.TOP, SafeAreaType.BOTTOM]
67 )
68 */
69 }
70}
控制结构
分支语句
- if分支语句
1if (condition1) {
2 code
3} else if (condition2) {
4 code
5} else {
6 code
7}
- 条件表达式
1condition ? code1 : code2
2
3/* 等价于
4if (condition) {
5 code1
6} else {
7 code2
8}
9
10可用变量接收：let num: number = a>b ? a : b
11*/
条件渲染
实现满足某个条件再渲染组件的功能。
1if (condition1) {
2 component1()
3} else if (condition2) {
4 component2()
5} else {
6 component3()
7}
循环渲染
1ForEach(array, (item: type, index: number) => {
2 component
3})
4
5// item为数组中的元素，index为数组元素下标
示例：
1let name: string[] = ['text1', 'text2', 'text3']
2
3@Entry
4@Component
5
6struct Index {
7 build() {
8 Column() {
9 ForEach(name, (item: string, index: number) => {
10 Text(item)
11 })
12 }
13 }
14}
状态管理
应用的运行时状态是参数，当参数改变时，UI渲染刷新。
状态变量：使用装饰器修饰，状态变量数据改变会引起UI的渲染刷新。
1component
2 // 为组件添加事件
3 .event(() => {
4 code
5 })
示例：
1// 启用HarmonyOS的V2状态管理
2@ComponentV2
3
4struct Index {
5 @Local num: number = 1
6 // 状态必须设置数据类型
7 // 状态必须设置初始值
8 ...
9 // 定义事件
10 Text(this.num.toString())
11 // 添加点击事件
12 .onClick(() => {
13 this.num ++
14 })
15 ...
16}