OpenHarmony DaYu200開發板示例 鴻蒙智聯汽車【1.0】
應用場景：
智慧出行。
智能汽車是集環境感知、規劃決策、多等級輔助駕駛等功能于一體的智能網聯綜合系統，它集中運用了計算機、現代傳感、信息融合、通訊、人工智能及自動控制等技術，是典型的高新技術綜合體。簡單的說，智能汽車的出現將逐步放松車、手、眼，讓開車，用車變得簡單。這樣的產品對有本兒不敢上路的人來說或許是大大的福音。
在北方冬天有點冷，這個時候，去車里，溫度很低，給人一種不舒服的感覺，那么有沒有一種可能，就是可以通過手機App，實現對車內的一些情況的監測，答案是有的，今天做的這個App，就是這樣一個App。
我要實現的功能主要有
用戶可以解鎖任何車門，
檢查電池狀態，
控制空調溫度，
檢查輪胎的氣壓。
在開始之前大家可以先預覽一下我完成之后的效果。如下圖所示：
是不是很炫酷呢？
搭建OpenHarmony環境
完成本篇Codelab我們首先要完成開發環境的搭建，本示例以DaYu200開發板為例，參照以下步驟進行：
獲取OpenHarmony系統版本：標準系統解決方案（二進制）
以3.0版本為例：
搭建燒錄環境
完成DevEco Device Tool的安裝
完成Dayu200開發板的燒錄
搭建開發環境
開始前請參考工具準備 ，完成DevEco Studio的安裝和開發環境配置。
開發環境配置完成后，請參考使用工程向導 創建工程（模板選擇“Empty Ability”），選擇eTS語言開發。
工程創建完成后，選擇使用真機進行調測 。
相關概念
容器組件
Column
Row
Stack
基礎組件
Text
Button
Image
Navigation
通用
邊框設置
尺寸設置
點擊控制
布局約束
背景設置
點擊事件
TS語法糖
好的接下來我將詳細講解如何制作
開發教學
創建好的 eTS工程目錄
新建工程的ETS目錄如下圖所示。
各個文件夾和文件的作用：
index.ets：用于描述UI布局、樣式、事件交互和頁面邏輯。
app.ets：用于全局應用邏輯和應用生命周期管理。
pages：用于存放所有組件頁面。
resources：用于存放資源配置文件。
接下來開始正文。
我們的主要操作都是在在pages目錄中，然后我將用不到10分鐘的時間，帶大家實現這個功能。
拆解
根據設計圖，我們可以分為內容展示區和菜單。
針對這一點，我們可以用Navigation組件作為Page頁面的根容器，通過屬性設置來展示頁面的標題、工具欄、菜單。
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
)
具體布局
具體布局設計到一些細節的地方，例如間隔，邊框，當前組件尺寸設置等一些特殊情況，基本上就是嵌套，一層一層去實現。
代碼結構
編碼
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
;
// 選項卡下標，默認為第一個
@
State
hideToolBar
:
boolean
=
false
;
@
State
hideTitleBar
:
boolean
=
true
;
private
imageArray
:
string
[]
=
[
'app.media.Lock'
,
'app.media.Charge'
,
'app.media.Temp'
,
'app.media.Tyre'
,];
// 數據源
?
@
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
}) {
//根據索引展示對應內容?
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
(
"跟著堅果學OpenHarmony"
)
.
toolBar
(
this
.
toolbarWidget
())
//自定義底部菜單欄
.
hideToolBar
(
this
.
hideToolBar
)
.
hideTitleBar
(
this
.
hideTitleBar
)
.
menus
([
{
value
:
"關"
,
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%"
)
?
}
?
?
}
}
?
效果演示：
空調頁
@
Entry
@
Component
export
default
struct
Temp
{
//空調頁
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
(
"當前溫度"
).
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%"
)
?
}
?
?
}
}
?
效果演示：
輪胎參數
/**
* 輪胎詳細信息
*/
@
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
})
?
}
}
效果演示：
恭喜你
在本文中，通過實現智聯汽車App示例，我主要為大家講解了如下ArkUI（基于TS擴展的類Web開發范式）組件
容器組件
Column
Row
Stack
基礎組件
Text
TextInput
Button
Image
Navigation
通用
邊框設置
尺寸設置
點擊控制
布局約束
背景設置
點擊事件
TS語法糖
希望通過本教程，各位開發者可以對以上基礎組件具有更深刻的認識。
后面的計劃：
一鍵啟動
硬件交互
動畫交互
-
開發板
+關注
關注
25文章
5622瀏覽量
103613 -
智能汽車
+關注
關注
30文章
3070瀏覽量
108296 -
智慧出行
+關注
關注
0文章
115瀏覽量
7880 -
HarmonyOS
+關注
關注
80文章
2148瀏覽量
32537 -
OpenHarmony
+關注
關注
29文章
3847瀏覽量
18377 -
鴻蒙智聯
+關注
關注
0文章
29瀏覽量
584
發布評論請先 登錄
如何實現DAYU200開發板使能Panfrost驅動并且支持OpenHarmony呢
基于潤和DAYU200開發套件的OpenHarmony分布式音樂播放器
【每日精選】開源鴻蒙系統DAYU200教程及Tina Wi-Fi模組移植
OpenHarmony 3.1 Release初體驗 潤和DAYU200開發套件
潤和DAYU200領跑OpenHarmony富設備產業化！
【潤和軟件DAYU200開發板體驗】潤和軟件DAYU200開發板開箱篇
【潤和軟件DAYU200開發板體驗】終于Helloworld！！
【潤和軟件DAYU200開發板體驗】移植speexdsp到OpenHarmony標準系統功能演示
OpenHarmony Dev-Board-SIG專場：DAYU200開源計劃—代碼上Master需要的材料
DAYU200開發版升級openHarmony3.1 release版本
潤和軟件開發板DAYU200 支持富設備開發 OpenHarmony開發者都選它
【潤和軟件DAYU200開發板體驗】潤和軟件DAYU200開發板開箱篇
喜大普奔！DAYU200能打電話了—OpenHarmony 3.1新特性！
潤和軟件DAYU200的OpenHarmony賦能之旅
工商網監
評論