背景
ArkUI-eTS目前已经能够多种设备运行，同时也为我们提供了越来越丰富的组件和硬件开发能力。本次主要是写一个智能晾晒系统的页面来在DAYU200上面进行运行测试。
eTS入门或获取eTS官方API文档可参照本人另外帖子：ArkUI_eTS手把手入门
开发环境
DevEco Studio for OpenHarmony3.0.0.900
OpenHarmony版本：3.1_Release
开发板：DAYU200 ( 基于openHarmony3.1_Release版本 )
具体开发过程
1.新建工程
创建工程完成后，工程目录如下：
随后，需在“MainAbility”目录下创建“image”目录用于存放部分页面素材资源。 （右击“MainAbility”文件名-“New”-“Directory”-输入“image”进行创建）
创建完成后，工程目录结构如下：(同时我们知道“image”目录和“resources-base-media”均可存放部分素材资源)
2.页面结构设计
主页面结构：
副页面结构：
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
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
......
build() {
Column() {
Tabs() {
TabContent() {
Column() {
Flex() {
Text('天气 : ' + this.weather)
Text('温度 : ' + this.temp + ' ℃')
Text('湿度 : ' + this.humidity + ' RH')
}
Flex() {
Text(this.sub) # 环境情况
}
// 1
Row({ space: 2 }) {
Button() {
Column() {
Text('晾晒状态')
Image($r("app.media.drying"))
}
}
Button() {
Column() {
Text('手动调节')
Image($r("app.media.hand"))
}
}
}
// 2
Row({ space: 2 }) {
Button() {
Column() {
Text('时间统计')
Image($r("app.media.time"))
}
}
Button() {
Column() {
Text('我的设备')
Image($r("app.media.IoT"))
}
}
}
// 3
Row({ space: 2 }) {
Button() {
Column() {
Text('定时提醒')
Image($r("app.media.clock"))
}
}
}
}
}.tabBar({ icon: ("/image/home.png"), text: '首页' })
.backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Cover)
TabContent() {
Column() {
Flex() {
Row({ space: 2 }) {
Image('/image/user.png')
Text(this.user_name)
}
Image('/image/message.png')
}
Flex() {
Flex(){
Row({ space: 2 }) {
Image('/image/mech.png')
Text('我的设备')
}
Image('/image/right.png')
}
Flex(){
Row({ space: 2 }) {
Image('/image/set.png')
Text('设置')
}.width('50%').height(50)
Image('/image/right.png')
}
Flex(){
Row({ space: 2 }) {
Image('/image/change_user.png')
Text('切换用户')
}
Image('/image/right.png')
}.width('90%').height(50).margin({top:10})
Flex(){
Row({ space: 2 }) {
Image('/image/help.png')
Text('反馈与建议')
}
Image('/image/right.png')
}
}
}
}.tabBar({ icon: $r("app.media.me"), text: '个人' })
}
}
}
......
4.完整代码
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
// @ts-nocheck
@Entry
@Component
struct Index {
private controller: TabsController = new TabsController()
private weather: string = '晴'
private temp: number = 20.6
private humidity: number = 30
private sub: string = '适合晒衣'
private user_name: string = 'Cool_breeze'
build() {
Column() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
Text('天气 : ' + this.weather)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
Text('温度 : ' + this.temp + ' ℃')
.fontSize(30)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ top: 5 })
Text('湿度 : ' + this.humidity + ' RH')
.fontSize(30)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({ top: 5 })
}
.height('25%')
.width('85%')
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.sub)
.fontSize(30)
}
.opacity(0.6)
.backgroundColor(Color.White)
.width('90%')
.height(70)
.borderRadius(10)
Row({ space: 2 }) {
Button({ type: ButtonType.Normal }) {
Column() {
Text('晾晒状态')
.fontSize(20)
Image($r("app.media.drying"))
.width(50)
.height(50)
.margin({ top: 10 })
}
}
.height('100%')
.width('48%')
.borderRadius(30)
.backgroundColor(Color.White)
.margin({ right: 15 })
Button({ type: ButtonType.Normal }) {
Column() {
Text('手动调节')
.fontSize(20)
Image($r("app.media.hand"))
.width(50)
.height(50)
.margin({ top: 10 })
}
}
.height('100%')
.width('48%')
.borderRadius(30)
.backgroundColor(Color.White)
}
.width('90%')
.height(180)
.margin({ left: 10, top: 10})
//2
Row({ space: 2 }) {
Button({ type: ButtonType.Normal }) {
Column() {
Text('时间统计')
.fontSize(20)
Image($r("app.media.time"))
.width(50)
.height(50)
.margin({ top: 10 })
}
}
.height('100%')
.width('48%')
.borderRadius(30)
.backgroundColor(Color.White)
.margin({ right: 15 })
Button({ type: ButtonType.Normal }) {
Column() {
Text('我的设备')
.fontSize(20)
Image($r("app.media.IoT"))
.width(50)
.height(50)
.margin({ top: 10 })
}
}
.height('100%')
.width('48%')
.borderRadius(30)
.backgroundColor(Color.White)
}
.width('90%')
.height(180)
.margin({ top: 15, left: '10' })
//3
Row({ space: 2 }) {
Button({ type: ButtonType.Normal }) {
Column() {
Text('定时提醒')
.fontSize(20)
Image($r("app.media.clock"))
.width(50)
.height(50)
.margin({ top: 10 })
}
}
.height('100%')
.width('48%')
.borderRadius(30)
.backgroundColor(Color.White)
.margin({ right: 15 })
}
.width('90%')
.height(180)
.margin({ top: 15, left: '10' })
}
.height('100%')
.width('100%')
}.tabBar({ icon: ("/image/home.png"), text: '首页' })
.backgroundImage('/image/background.jpg', ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Cover)
TabContent() {
Column() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Row({ space: 2 }) {
Image('/image/user.png')
.clip(new Circle({ width: 50, height: 50 }))
.width(50)
.height(50)
.backgroundColor('#dbdb00')
.margin({ left: 5 })
Text(this.user_name)
.fontSize(20)
.margin({ left: 5 })
}.width('50%').height(50)
Image('/image/message.png')
.height(40)
.width(50)
.margin({ right: 5 })
}
.width('90%')
.height(60)
.margin({top:10})
Flex({direction: FlexDirection.Column,alignItems:ItemAlign.Center}) {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
Row({ space: 2 }) {
Image('/image/mech.png')
.width(30)
.height(30)
.margin({ left: 5 })
Text('我的设备')
.fontSize(20)
.margin({ left: 10 })
}.width('50%').height(50)
Image('/image/right.png')
.height(20)
.width(15)
.margin({ right: 5 })
}.width('90%').height(50).margin({top:30})
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
Row({ space: 2 }) {
Image('/image/set.png')
.width(30)
.height(30)
.margin({ left: 5 })
Text('设置')
.fontSize(20)
.margin({ left: 10 })
}.width('50%').height(50)
Image('/image/right.png')
.height(20)
.width(15)
.margin({ right: 5 })
}.width('90%').height(50).margin({top:10})
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
Row({ space: 2 }) {
Image('/image/change_user.png')
.width(30)
.height(30)
.margin({ left: 5 })
Text('切换用户')
.fontSize(20)
.margin({ left: 10 })
}.width('50%').height(50)
Image('/image/right.png')
.height(20)
.width(15)
.margin({ right: 5 })
}.width('90%').height(50).margin({top:10})
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }){
Row({ space: 2 }) {
Image('/image/help.png')
.width(30)
.height(30)
.margin({ left: 5 })
Text('反馈与建议')
.fontSize(20)
.margin({ left: 10 })
}.width('50%').height(50)
Image('/image/right.png')
.height(20)
.width(15)
.margin({ right: 5 })
}.width('90%').height(50).margin({top:10})
}
.height('50%')
.width('100%')
.borderRadius(20)
.margin({top:10})
.backgroundColor(Color.White)
}
.height('100%')
.width('100%')
}.tabBar({ icon: $r("app.media.me"), text: '个人' })
}
.vertical(false)
.barWidth(300)
.barHeight(60)
.backgroundColor('#eeeeee')
.width('100%')
}
.width('100%')
.height('100%')
}
}
5.所用部分素材
背景素材：
6.Previewer预览效果
DAYU200运行效果
gitee地址
演示视频
https://ost.51cto.com/show/14309
后续开发计划
基于此晾晒系统界面和DAYU200开发板，
（1）连接Hi3861智能家居套件获取真实环境数据；
（2）调用天气API，使DAYU200联网后能够实时获取天气预报信息，从而更好的实现晾晒功能；
（3）若DAYU200本身摄像头条件不允许，可连外接摄像头或利用Hi3516 AI Camera开发套件的功能更加智能的实时监控衣物晾晒状态。
（4）同时除了硬件功能完善，也要对软件部分兼容性和功能进行升级，不仅能够将程序运行在DAYU200开发板上，也能够在所有HarmonyOS设备上运行。