OpenHarmony DaYu200開發(fā)板示例 鴻蒙智聯(lián)汽車【1.0】
應(yīng)用場(chǎng)景：
智慧出行。
智能汽車是集環(huán)境感知、規(guī)劃決策、多等級(jí)輔助駕駛等功能于一體的智能網(wǎng)聯(lián)綜合系統(tǒng)，它集中運(yùn)用了計(jì)算機(jī)、現(xiàn)代傳感、信息融合、通訊、人工智能及自動(dòng)控制等技術(shù)，是典型的高新技術(shù)綜合體。簡(jiǎn)單的說，智能汽車的出現(xiàn)將逐步放松車、手、眼，讓開車，用車變得簡(jiǎn)單。這樣的產(chǎn)品對(duì)有本兒不敢上路的人來說或許是大大的福音。
在北方冬天有點(diǎn)冷，這個(gè)時(shí)候，去車?yán)铮瑴囟群艿停o人一種不舒服的感覺，那么有沒有一種可能，就是可以通過手機(jī)App，實(shí)現(xiàn)對(duì)車內(nèi)的一些情況的監(jiān)測(cè)，答案是有的，今天做的這個(gè)App，就是這樣一個(gè)App。
我要實(shí)現(xiàn)的功能主要有
用戶可以解鎖任何車門，
檢查電池狀態(tài)，
控制空調(diào)溫度，
檢查輪胎的氣壓。
在開始之前大家可以先預(yù)覽一下我完成之后的效果。如下圖所示：
是不是很炫酷呢？
搭建OpenHarmony環(huán)境
完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以DaYu200開發(fā)板為例，參照以下步驟進(jìn)行：
獲取OpenHarmony系統(tǒng)版本：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）
以3.0版本為例：
搭建燒錄環(huán)境
完成DevEco Device Tool的安裝
完成Dayu200開發(fā)板的燒錄
搭建開發(fā)環(huán)境
開始前請(qǐng)參考工具準(zhǔn)備 ，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
開發(fā)環(huán)境配置完成后，請(qǐng)參考使用工程向?qū)?創(chuàng)建工程（模板選擇“Empty Ability”），選擇eTS語言開發(fā)。
工程創(chuàng)建完成后，選擇使用真機(jī)進(jìn)行調(diào)測(cè) 。
相關(guān)概念
容器組件
Column
Row
Stack
基礎(chǔ)組件
Text
Button
Image
Navigation
通用
邊框設(shè)置
尺寸設(shè)置
點(diǎn)擊控制
布局約束
背景設(shè)置
點(diǎn)擊事件
TS語法糖
好的接下來我將詳細(xì)講解如何制作
開發(fā)教學(xué)
創(chuàng)建好的 eTS工程目錄
新建工程的ETS目錄如下圖所示。
各個(gè)文件夾和文件的作用：
index.ets：用于描述UI布局、樣式、事件交互和頁面邏輯。
app.ets：用于全局應(yīng)用邏輯和應(yīng)用生命周期管理。
pages：用于存放所有組件頁面。
resources：用于存放資源配置文件。
接下來開始正文。
我們的主要操作都是在在pages目錄中，然后我將用不到10分鐘的時(shí)間，帶大家實(shí)現(xiàn)這個(gè)功能。
拆解
根據(jù)設(shè)計(jì)圖，我們可以分為內(nèi)容展示區(qū)和菜單。
針對(duì)這一點(diǎn)，我們可以用Navigation組件作為Page頁面的根容器，通過屬性設(shè)置來展示頁面的標(biāo)題、工具欄、菜單。
Navigation
() {
Column
({
space
:
20
}) {
if
(
this
.
index
==
0
)
DoorLook
()
else
if
(
this
.
index
==
1
)
Battery
()
else
if
(
this
.
index
==
2
)
Temp
()
else
if
(
this
.
index
==
3
)
Tyre
()
}
.
backgroundColor
(
Color
.
Black
)
.
justifyContent
(
FlexAlign
.
SpaceAround
)
.
alignItems
(
HorizontalAlign
.
Center
)
.
justifyContent
(
FlexAlign
.
Center
)
.
size
({
width
:
'100%'
,
height
:
'100%'
})
} .
size
({
width
:
'100%'
,
height
:
'100%'
})
.
toolBar
(
this
.
toolbarWidget
())
.
hideToolBar
(
this
.
hideToolBar
)
.
hideTitleBar
(
this
.
hideTitleBar
)
具體布局
具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如間隔，邊框，當(dāng)前組件尺寸設(shè)置等一些特殊情況，基本上就是嵌套，一層一層去實(shí)現(xiàn)。
代碼結(jié)構(gòu)
編碼
Index.ets
import
Tyre
from
'./tyre_page'
;
import
Temp
from
'./temp_page'
;
import
Battery
from
'./battery_page'
;
import
DoorLook
from
'./door_lock_page'
;
@
Entry
@
Component
struct
ComponentTest
{
@
State
index
:
number
=
0
;
// 選項(xiàng)卡下標(biāo)，默認(rèn)為第一個(gè)
@
State
hideToolBar
:
boolean
=
false
;
@
State
hideTitleBar
:
boolean
=
true
;
private
imageArray
:
string
[]
=
[
'app.media.Lock'
,
'app.media.Charge'
,
'app.media.Temp'
,
'app.media.Tyre'
,];
// 數(shù)據(jù)源
?
@
Builder
toolbarWidget
() {
// 通過builder自定義toolbar
Row
() {
Column
() {
Image
(
this
.
index
==
0
?
$r
(
'app.media.lock'
):
$r
(
'app.media.lock0'
) )
.
size
({
width
:
36
,
height
:
36
}).
margin
({
bottom
:
4
,
top
:
12
})
}
.
alignItems
(
HorizontalAlign
.
Center
)
.
height
(
'100%'
)
.
layoutWeight
(
1
)
.
onClick
(()
=>
{
this
.
index
=
0
;
})
Column
() {
Image
(
this
.
index
==
1
?
$r
(
'app.media.battery'
):
$r
(
"app.media.battery0"
))
.
size
({
width
:
36
,
height
:
36
}).
margin
({
bottom
:
4
,
top
:
12
})
?
}
.
alignItems
(
HorizontalAlign
.
Center
)
.
height
(
'100%'
)
.
layoutWeight
(
1
)
.
onClick
(()
=>
{
this
.
index
=
1
;
})
Column
() {
Image
(
this
.
index
==
2
?
$r
(
'app.media.yytemp'
):
$r
(
'app.media.yytem0'
))
.
size
({
width
:
36
,
height
:
36
}).
margin
({
bottom
:
4
,
top
:
12
})
?
}
.
alignItems
(
HorizontalAlign
.
Center
)
.
height
(
'100%'
)
.
layoutWeight
(
1
)
.
onClick
(()
=>
{
this
.
index
=
2
;
})
Column
() {
Image
(
this
.
index
==
3
?
$r
(
'app.media.tyre'
):
$r
(
'app.media.tyre0'
))
.
size
({
width
:
36
,
height
:
36
}).
margin
({
bottom
:
4
,
top
:
12
})
?
}
.
alignItems
(
HorizontalAlign
.
Center
)
.
height
(
'100%'
)
.
layoutWeight
(
1
)
.
onClick
(()
=>
{
this
.
index
=
3
;
})
}.
backgroundColor
(
Color
.
Black
)
.
width
(
'100%'
)
.
height
(
66
)
}
build
() {
Navigation
() {
Column
({
space
:
20
}) {
//根據(jù)索引展示對(duì)應(yīng)內(nèi)容?
if
(
this
.
index
==
0
)
DoorLook
()
else
if
(
this
.
index
==
1
)
Battery
()
else
if
(
this
.
index
==
2
)
Temp
()
else
if
(
this
.
index
==
3
)
Tyre
()
}
.
backgroundColor
(
Color
.
Black
)
.
justifyContent
(
FlexAlign
.
SpaceAround
)
.
alignItems
(
HorizontalAlign
.
Center
)
.
justifyContent
(
FlexAlign
.
Center
)
.
size
({
width
:
'100%'
,
height
:
'100%'
})
}
.
size
({
width
:
'100%'
,
height
:
'100%'
})
.
title
(
"跟著堅(jiān)果學(xué)OpenHarmony"
)
.
toolBar
(
this
.
toolbarWidget
())
//自定義底部菜單欄
.
hideToolBar
(
this
.
hideToolBar
)
.
hideTitleBar
(
this
.
hideTitleBar
)
.
menus
([
{
value
:
"關(guān)"
,
icon
:
'common/images/door_lock.svg'
,
action
: ()
=>
{
console
.
log
(
"工具欄"
)
}
},
{
value
:
"開"
,
icon
:
'common/images/door_unlock.svg'
,
action
: ()
=>
{
}
}
])
}
}
效果演示：
車鎖頁
@
Entry
@
Component
export
default
struct
DoorLook
{
//車鎖頁
@
State
isRightDoorLock
:
boolean
=
false
;
@
State
isLeftDoorLock
:
boolean
=
false
;
@
State
isBonnetLock
:
boolean
=
false
;
@
State
isTrunkLock
:
boolean
=
false
;
?
build
() {
?
Column
() {
Stack
() {
Image
(
$r
(
"app.media.Car"
))
.
width
(
"100%"
)
.
height
(
"100%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
margin
({
left
:
20
})
Image
(
$r
(
"app.media.door_lock"
))
.
width
(
60
).
height
(
60
).
position
({
x
:
340
,
y
:
50
})
.
onClick
(()
=>
{
})
Image
(
$r
(
"app.media.door_unlock"
)).
width
(
60
).
height
(
60
).
position
({
x
:
50
,
y
:
600
})
Image
(
$r
(
"app.media.door_unlock"
)).
width
(
60
).
height
(
60
).
position
({
x
:
640
,
y
:
600
})
Image
(
$r
(
"app.media.door_unlock"
)).
width
(
60
).
height
(
60
).
position
({
x
:
340
,
y
:
920
})
?
}
?
.
backgroundColor
(
Color
.
Black
)
?
?
.
width
(
"100%"
)
.
height
(
"100%"
)
?
}
?
?
}
}
?
效果演示：
電池頁
@
Entry
@
Component
export
default
struct
Battery
{
//電池頁
build
() {
?
Column
() {
Stack
() {
Image
(
$r
(
"app.media.Car"
))
.
width
(
"100%"
)
.
height
(
"80%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
margin
({
left
:
20
,
top
:
150
,
bottom
:
300
})
?
Text
(
"220 mi"
).
fontColor
(
Color
.
White
).
fontWeight
(
FontWeight
.
Bold
).
fontSize
(
79
).
position
({
x
:
260
,
y
:
20
})
Text
(
"62 %"
).
fontColor
(
Color
.
White
).
fontWeight
(
FontWeight
.
Bold
).
fontSize
(
60
).
position
({
x
:
320
,
y
:
90
})
Text
(
"22 mi /hr"
).
fontColor
(
Color
.
White
).
fontWeight
(
FontWeight
.
Bold
).
fontSize
(
45
).
position
({
x
:
20
,
y
:
1000
})
Text
(
"232 v"
).
fontColor
(
Color
.
White
).
fontWeight
(
FontWeight
.
Bold
).
fontSize
(
45
).
position
({
x
:
550
,
y
:
1000
})
}
?
.
backgroundColor
(
Color
.
Black
)
?
?
.
width
(
"100%"
)
.
height
(
"100%"
)
?
}
?
?
}
}
?
效果演示：
空調(diào)頁
@
Entry
@
Component
export
default
struct
Temp
{
//空調(diào)頁
build
() {
Column
() {
Stack
() {
Image
(
$r
(
"app.media.Car"
))
.
width
(
"100%"
)
.
height
(
"100%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
268
,
y
:
90
})
.
margin
({
left
:
20
})
Image
(
$r
(
"app.media.Hot_glow_4"
))
.
width
(
"90%"
)
.
height
(
"90%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
220
,
y
:
90
})
.
margin
({
left
:
20
})
Text
(
"29"
+
"\u2103"
,).
fontSize
(
90
).
fontColor
(
Color
.
Orange
).
position
({
x
:
90
,
y
:
400
})
Image
(
$r
(
"app.media.arrow_drop_up"
))
.
width
(
60
)
.
height
(
60
)
.
position
({
x
:
120
,
y
:
360
})
Image
(
$r
(
"app.media.arrow_drop_down"
))
.
width
(
60
)
.
height
(
60
)
.
position
({
x
:
120
,
y
:
480
})
Image
(
$r
(
"app.media.cool"
)).
width
(
60
).
height
(
60
).
position
({
x
:
20
,
y
:
40
})
Image
(
$r
(
"app.media.heating"
))
.
width
(
60
)
.
height
(
60
)
.
position
({
x
:
80
,
y
:
90
})
.
borderRadius
(
7
)
.
margin
({
right
:
40
})
Column
() {
Text
(
"當(dāng)前溫度"
).
fontSize
(
32
).
fontColor
(
Color
.
White
).
margin
({
bottom
:
20
})
Row
({
space
:
30
}) {
Column
() {
Text
(
"里面"
).
fontSize
(
32
).
fontColor
(
Color
.
Orange
)
Text
(
"20"
+
"\u2103"
,).
fontSize
(
32
).
fontColor
(
Color
.
White
)
}
Column
() {
Text
(
"外邊"
).
fontSize
(
32
).
fontColor
(
Color
.
Yellow
)
Text
(
"35"
+
"\u2103"
,).
fontSize
(
32
).
fontColor
(
Color
.
White
)
}
}
}.
position
({
x
:
20
,
y
:
800
})
}
.
backgroundColor
(
Color
.
Black
)
.
offset
({
y
:
-
20
})
.
width
(
"100%"
)
.
height
(
"100%"
)
}
}
}
?
效果演示：
輪胎頁
import
{
TyrePsiCard
}
from
'./tyre_psi_card'
?
@
Entry
@
Component
export
default
struct
Tyre
{
//輪胎頁
build
() {
?
Column
() {
Stack
() {
Image
(
$r
(
"app.media.Car"
))
.
width
(
"100%"
)
.
height
(
"80%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
margin
({
left
:
20
})
Image
(
$r
(
"app.media.FL_Tyre"
))
.
width
(
"10%"
)
.
height
(
"10%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
180
,
y
:
700
})
Image
(
$r
(
"app.media.FL_Tyre"
))
.
width
(
"10%"
)
.
height
(
"10%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
500
,
y
:
700
})
Image
(
$r
(
"app.media.FL_Tyre"
))
.
width
(
"10%"
)
.
height
(
"10%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
500
,
y
:
260
})
Image
(
$r
(
"app.media.FL_Tyre"
))
.
width
(
"10%"
)
.
height
(
"10%"
)
.
objectFit
(
ImageFit
.
Contain
)
.
position
({
x
:
180
,
y
:
260
})
TyrePsiCard
({
x
:
60
,
y
:
60
,
boardColor
:
Color
.
Blue
})
TyrePsiCard
({
x
:
380
,
y
:
60
,
boardColor
:
Color
.
Blue
})
TyrePsiCard
({
x
:
60
,
y
:
500
,
boardColor
:
Color
.
Blue
,
isBottomTwoTyre
:
false
})
TyrePsiCard
({
x
:
380
,
y
:
500
,
isBottomTwoTyre
:
false
})
}
.
backgroundColor
(
Color
.
Black
)
.
width
(
"100%"
)
.
height
(
"100%"
)
?
}
?
?
}
}
?
效果演示：
輪胎參數(shù)
/**
* 輪胎詳細(xì)信息
*/
@
Entry
@
Component
export
struct
TyrePsiCard
{
private
text
:
string
=
''
private
x
:
number
=
0
private
y
:
number
=
0
private
boardColor
:
Color
=
Color
.
Red
private
isBottomTwoTyre
:
boolean
=
true
;
?
build
() {
Column
() {
if
(
this
.
isBottomTwoTyre
) {
Text
(
"23.6psi"
,).
fontSize
(
60
)
.
fontColor
(
Color
.
White
).
margin
({
right
:
60
})
Text
(
"56.0\u2103"
).
fontSize
(
36
)
.
fontColor
(
Color
.
Orange
).
margin
({
bottom
:
70
})
Text
(
"Low"
).
fontSize
(
60
)
.
fontColor
(
Color
.
White
)
Text
(
"Pressure"
).
fontSize
(
36
)
.
fontColor
(
Color
.
White
)
}
else
{
Text
(
"Low"
).
fontSize
(
60
).
margin
({
right
:
60
})
.
fontColor
(
Color
.
White
)
Text
(
"Pressure"
).
fontSize
(
36
)
.
fontColor
(
Color
.
White
).
margin
({
bottom
:
70
})
Text
(
"23.6psi"
,).
fontSize
(
60
)
.
fontColor
(
Color
.
White
)
Text
(
"56.0\u2103"
).
fontSize
(
36
)
.
fontColor
(
Color
.
Orange
)
}
?
?
}
.
border
({
width
:
3
,
color
:
this
.
boardColor
})
.
width
(
280
)
.
justifyContent
(
FlexAlign
.
Start
)
.
alignItems
(
HorizontalAlign
.
Start
)
// .padding({ left: 10, bottom: 20, top: 20 })
.
position
({
x
:
this
.
x
,
y
:
this
.
y
})
?
}
}
效果演示：
恭喜你
在本文中，通過實(shí)現(xiàn)智聯(lián)汽車App示例，我主要為大家講解了如下ArkUI（基于TS擴(kuò)展的類Web開發(fā)范式）組件
容器組件
Column
Row
Stack
基礎(chǔ)組件
Text
TextInput
Button
Image
Navigation
通用
邊框設(shè)置
尺寸設(shè)置
點(diǎn)擊控制
布局約束
背景設(shè)置
點(diǎn)擊事件
TS語法糖
希望通過本教程，各位開發(fā)者可以對(duì)以上基礎(chǔ)組件具有更深刻的認(rèn)識(shí)。
后面的計(jì)劃：
一鍵啟動(dòng)
硬件交互
動(dòng)畫交互
-
開發(fā)板
+關(guān)注
關(guān)注
25文章
5032瀏覽量
97375 -
智能汽車
+關(guān)注
關(guān)注
30文章
2843瀏覽量
107247 -
智慧出行
+關(guān)注
關(guān)注
0文章
107瀏覽量
7527 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1973瀏覽量
30143 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3713瀏覽量
16256 -
鴻蒙智聯(lián)
+關(guān)注
關(guān)注
0文章
29瀏覽量
450
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
如何實(shí)現(xiàn)DAYU200開發(fā)板使能Panfrost驅(qū)動(dòng)并且支持OpenHarmony呢
基于潤和DAYU200開發(fā)套件的OpenHarmony分布式音樂播放器
【每日精選】開源鴻蒙系統(tǒng)DAYU200教程及Tina Wi-Fi模組移植
OpenHarmony 3.1 Release初體驗(yàn) 潤和DAYU200開發(fā)套件
潤和DAYU200領(lǐng)跑OpenHarmony富設(shè)備產(chǎn)業(yè)化！
【潤和軟件DAYU200開發(fā)板體驗(yàn)】潤和軟件DAYU200開發(fā)板開箱篇
【潤和軟件DAYU200開發(fā)板體驗(yàn)】終于Helloworld！！
【潤和軟件DAYU200開發(fā)板體驗(yàn)】移植speexdsp到OpenHarmony標(biāo)準(zhǔn)系統(tǒng)功能演示
OpenHarmony 潤和DAYU200開發(fā)板，全新未開封（出）
OpenHarmony Dev-Board-SIG專場(chǎng)：DAYU200開源計(jì)劃—代碼上Master需要的材料
DAYU200開發(fā)版升級(jí)openHarmony3.1 release版本
潤和軟件開發(fā)板DAYU200 支持富設(shè)備開發(fā) OpenHarmony開發(fā)者都選它
【潤和軟件DAYU200開發(fā)板體驗(yàn)】潤和軟件DAYU200開發(fā)板開箱篇
喜大普奔！DAYU200能打電話了—OpenHarmony 3.1新特性！
潤和軟件DAYU200的OpenHarmony賦能之旅
工商網(wǎng)監(jiān)
評(píng)論