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