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语法糖
希望通过本教程，各位开发者可以对以上基础组件具有更深刻的认识。
后面的计划：
一键启动
硬件交互
动画交互
加密资产交易平台旗下Trust Wallet将新增支持恒星币XLM
编码器常见故障有哪些？
小米6最新消息：发布时间确定，性能残暴！
吱一声就知道你是谁,深度学习识别短片段说话人
你觉得什么是边缘计算
OpenHarmony DaYu200开发板示例 鸿蒙智联汽车【1.0】
助力高级光刻技术：存储和运输EUV掩模面临的挑战
dfrobot树莓派通用电源适配器简介
OmniShield：为行动、汽车或物联网应用提供更高安全性
FPGA实现视频广播接收系统方案
模数转换器系统受电源影响的4种保护措施
深度学习的图原理
联想Z5s、荣耀Play和360 N7 Pro对比 你完美的购机指南
BOE透明屏的显示技术怎么样？
国内智能成套装备领军者——利元亨“闯关”科创板
波峰焊机该如何使用才能省电又省锡
iPhone季度产量预期被下调至5000万部
一次性无菌注射针针尖韧性测试仪
三星S8最新消息：将采用铜管散热方式防爆炸！
印制电路板基本原则
智慧出行。
智能汽车是集环境感知、规划决策、多等级辅助驾驶等功能于一体的智能网联综合系统，它集中运用了计算机、现代传感、信息融合、通讯、人工智能及自动控制等技术，是典型的高新技术综合体。简单的说，智能汽车的出现将逐步放松车、手、眼，让开车，用车变得简单。这样的产品对有本儿不敢上路的人来说或许是大大的福音。
在北方冬天有点冷，这个时候，去车里，温度很低，给人一种不舒服的感觉，那么有没有一种可能，就是可以通过手机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语法糖
希望通过本教程，各位开发者可以对以上基础组件具有更深刻的认识。
后面的计划：
一键启动
硬件交互
动画交互
加密资产交易平台旗下Trust Wallet将新增支持恒星币XLM
编码器常见故障有哪些？
小米6最新消息：发布时间确定，性能残暴！
吱一声就知道你是谁,深度学习识别短片段说话人
你觉得什么是边缘计算
OpenHarmony DaYu200开发板示例 鸿蒙智联汽车【1.0】
助力高级光刻技术：存储和运输EUV掩模面临的挑战
dfrobot树莓派通用电源适配器简介
OmniShield：为行动、汽车或物联网应用提供更高安全性
FPGA实现视频广播接收系统方案
模数转换器系统受电源影响的4种保护措施
深度学习的图原理
联想Z5s、荣耀Play和360 N7 Pro对比 你完美的购机指南
BOE透明屏的显示技术怎么样？
国内智能成套装备领军者——利元亨“闯关”科创板
波峰焊机该如何使用才能省电又省锡
iPhone季度产量预期被下调至5000万部
一次性无菌注射针针尖韧性测试仪
三星S8最新消息：将采用铜管散热方式防爆炸！
印制电路板基本原则