BEKEN LVGL UI Designer 两轮车仪表盘项目设计示例

两轮车仪表盘项目设计示例

BEKEN LVGL UI Designer工具介绍

BEKEN LVGL UI Designer是由博通集成开发的一款专业的LVGL图形可视化设计工具, 您可以观看视频博通集成UI开发工具“BEKEN LVGL UI Designer”介绍，进一步了解该工具的核心功能。

文档概述

本文档将演示如何使用 BEKEN LVGL UI Designer 创建一个两轮车仪表盘示例项目，并以其中部分UI的设计示例来展示工具的基本操作。

在开始创建项目之前，需要准备好项目的UI原型图及资源（图片、字体）, 以下是示例【首页】的效果图。

---

1. 新建工程

• 1.1 启动应用并创建新项目

  • 打开应用，点击首页【新建项目】
  • 选择项目模板（空白项目）
  

  • 设置项目基本信息

    • 项目名称：dashcam_demo
    • 项目路径: 项目保存位置
    • 屏幕尺寸：480x272
  
  • 点击【创建项目】，项目创建完成后，会跳转到工作台界面。

2. 导入资源

• 2.2 导入资源到项目

点击工具栏中的【资源管理】按钮，在弹出的资源管理弹窗中点击【导入图片】按钮，选择所有项目需要用到的资源，点击【打开】

即可将图片资源都导入项目中

3. 首页设计

• 3.1 页面重命名

进入工作台后，会默认创建一个页面，为了方便后期设计，我们可以对页面进行重命名。在页面区域，双击当前页面的名称，即可进行页面的重命名

• 3.2 页面背景设置

接下来开始根据原型图设计界面，首先给页面添加渐变的背景颜色。因为每个页面的背景背景颜色都是一样的，所以我们可以先创建好自定义颜色，方便统一颜色的使用。

• 3.2.1 创建自定义颜色

点击页面属性面板中背景颜色的自定义颜色图标

在弹出的颜色库弹窗中，点击【我的颜色库】-> 【添加颜色】

在添加颜色弹窗中，输入颜色名称和颜色值，点击保存即可

下图是创建的当前项目背景的渐变色

• 3.2.2 应用自定义颜色

将页面属性面板中的背景【渐变方向】改为VER，点击自定义颜色图标，在弹出的颜色库弹窗中选择刚才创建的颜色，点击确认，即可应用。

分别设置好页面背景的【颜色】和【渐变颜色】，即可看到渐变效果。

• 3.3 设备状态及设置按钮设计

下面开始设计首页的UI。以右上角的设备状态按钮及设置按钮设计为例作为演示。

• 3.3.1 设备状态按钮设计

1.拖入容器组件

在系统组件库中找到容器组件，并拖入到画布中

2.拖入图片组件

在系统组件库中找到图片组件，并拖入到画布中的容器组件中，当组件拖入一个容器组件时，容器组件颜色将变为红色进行提示

3.设置图片

可以通过3中方式设置一个图片组件的图片

• 双击组件树中图片组件的小图标

• 双击画布中的图片组件

• 点击右侧属性面板中的图片路径选择按钮

通过上面3种方式都可以弹出【选择图片资源】弹窗，选中所需的图片，点击确认即可

4.设置容器组件Flex

设置图片组件的图片以后，图标在容器组件中并不是居中显示的，我们可以通过容器的Flex布局来使图标居中

根据下图，设置好容器组件的宽、高，布局类型选择Flex，主轴对齐和轨道对齐都选择CENTER

5.设置容器组件边框

接下来在容器组件的样式面板中找到边框，宽度设置为1，圆角为容器组件高度的一半，即可将按钮边框设置为圆形

• 3.3.2 设置按钮设计

设置按钮UI与设备状态按钮一致，只是图标有区别，我们可以通过自定义组件功能进行制作

1.选中设备状态按钮，点击鼠标右键，出现更多菜单，点击创建自定义组件

2.在弹出的自定义组件弹出中，输入组件内容，点击保存

组件库会自动跳转到自定义组件Tab

3.选择创建的自定义组件，拖入画布中,并修改组件中图片组件的图片路径即可

• 3.4 页面跳转

  接下来实现通过给设备状态按钮添加点击事件跳转到设备状态页面

3.4.1 创建页面

点击页面区域的新增按钮，会自动创建并显示新页面

3.4.2 添加事件

点击页面区域的切换页面按钮，并选择Home页面，回到首页

选中设备状态按钮，点击右侧属性面板的事件Tab栏，点击添加事件

在添加事件面板中，选择刚才创建的页面为目标页面，设置好其它跳转参数，点击右上角保存按钮

即可看到按钮与页面区域有一个连线，代表前按钮点击后将跳转到新页面

4.完成设计

上面的示例中介绍了以下内容：

1. 导入资源
2. 自定义颜色
3. 属性设置
4. 样式设置
5. 自定义组件
6. 新建页面及页面切换
7. 添加事件

通过这些基础功能的结合，我们可以使用不同的组件的组合来完成剩余的UI设计。

接下来我们完成【首页】的整体UI设计

4.1 灯光

左上角的灯光的3个状态，可以通过在容器中使用Flex布局来设置水平排列。转向灯的闪烁效果我们使用【动画图片】组件来设置

4.2 时间

系统组件库中提供了【数字时钟】组件，可以模拟时间的动态变化效果，我们通过这个组件来实现仪表盘上的时间显示

4.3 总里程和今日里程

总里程和今日里程都是纯文本显示，需要注意的是，我们可以通过【文本组】控件来显示两段连续但不同样式文本

4.4 仪表盘

首先我们通过【圆弧】组件来作为仪表盘的背景

再通过【刻度】组件来显示仪表刻度及当前速度

4.5 模式

模式图标我们可以复用前面创建的自定义组件，只需修改其中【图片】组件的图片路径即可

4.6 电量

最后，通过【圆弧】组件来模拟当前电量，即可完成整个【首页】界面的UI设计

5.资源获取

可以通过以下链接获取本示例项目及所有资源。

• 示例项目及资源下载地址