UI设计详解
本文主要讲解通过UI设计器设计UI界面过程，会对工程创建，界面设计，代码解析分别进行讲解和说明。
# 工程创建
点击新建工程按钮，创建一个新的UI工程，选择工程路径，输入工程名称，选择模块型号这里选择simulator模拟器，lib脚本库选择V2.4.2，core选择LuatOS-HMI_V4002_RDA8910.pac固件版本，屏幕分辨率宽高分别设置位854，480。
# 界面设计
点击UI设计器进行界面设计，进入UI设计器界面，会有一个默认的界面，我们可以删除掉之前控件，添加我们需要的控件。
点击添加组件按钮，添加我们需要的组件，这里我们添加一个背景图片来演示：
图片载入后我们只需要在属性下面添加对应图片的路径，就可以显示图片了，首先需要把资源文件放到本地创建的工程文件下面，LuaIDE会提示是否需要加入，点击确认后会添加到当前工程下面。这里添加背景图片路径后显示效果如下：
按照上面添加图片的方式把我们需要的组件全部添加上去，通过设置组件属性设计出自已想要的效果，下图是添加好所有组件后的显示效果。
界面划分，界面设计主要有标题，状态栏，连接控制，数据发送和数据接收几个部分组成
# 代码解析
设计器完成UI设计后会自动生成代码，UiDesign.lua是界面设计相关的脚本。
在UiDesign.lua脚本中可以查看当前界面已添加的组件，这里主要用到了标签（Label），图片（Img），按钮（Button），下拉菜单（Dropdown），输入文本（Textarea）
```lua
ScreenA =
{
create = nil,
free = nil,
contFather_ScreenA = nil,
LvglButton1 = objectHide(),
LvglImg1 = objectHide(),
LvglImg2 = objectHide(),
LvglImg3 = objectHide(),
LvglImg4 = objectHide(),
LvglLabel1 = objectHide(),
LvglImg5 = objectHide(),
LvglImg6 = objectHide(),
LvglLabel2 = objectHide(),
LvglLabel3 = objectHide(),
LvglButton2 = objectHide(),
LvglButton3 = objectHide(),
LvglLabel4 = objectHide(),
LvglButton4 = objectHide(),
LvglButton5 = objectHide(),
LvglLabel5 = objectHide(),
LvglLabel6 = objectHide(),
LvglDropdown1 = objectHide(),
LvglLabel7 = objectHide(),
LvglTextarea1 = objectHide(),
LvglLabel8 = objectHide(),
LvglTextarea2 = objectHide(),
LvglTextarea3 = objectHide(),
LvglImg7 = objectHide(),
LvglLabel10 = objectHide(),
}
```
添加组件后，会在UiDesign.lua脚本中生成对应代码，已添加背景图片为例，添加背景图片后自动生成的代码如下所示：
```lua
--This is the IMG_PART_MAIN's style of ScreenA.LvglImg1
Style_LvglImg1_1=lvgl.style_t()
lvgl.style_init(Style_LvglImg1_1)
--This is the base code of ScreenA.LvglImg1
ScreenA.LvglImg1.self = lvgl.img_create(ScreenA.contFather_ScreenA, nil)
lvgl.obj_set_click(ScreenA.LvglImg1.self, true)
lvgl.img_set_src(ScreenA.LvglImg1.self, "/lua/bg.png")
lvgl.obj_align(ScreenA.LvglImg1.self, ScreenA.contFather_ScreenA, lvgl.ALIGN_IN_TOP_LEFT, 0, -1)
lvgl.obj_add_style(ScreenA.LvglImg1.self, lvgl.IMG_PART_MAIN, Style_LvglImg1_1)
```
添加组件对应的事件时，如事件类型选择函数类型，输入对应函数名后，会在UiDesign.lua脚本中自动生成注册按键消息回调函数的代码，在UiHandle.lua脚本中生成对应的空函数。已连接按钮为例，自动生成代码如下：
UiDesign.lua脚本的注册按键消息回调函数的代码如下：
```lua
--This is to add callback function for ScreenA.LvglButton3
--This is callBack function of ScreenA.LvglButton3
local handleLvglButton3 = function(obj, e)
ScreenA.LvglButton3.cb(e)
ScreenA.LvglButton3.cb = function(e)
if (e == lvgl.EVENT_CLICKED)then
Connect_CLICKED()
end
end
end
lvgl.obj_set_event_cb(ScreenA.LvglButton3.self, handleLvglButton3)
```
UiHandle.lua是事件处理相关的脚本。UiHandle.lua脚本中生成对应的空函数如下：
```lua
--This function name and notes cannot be modified
--@@funCfg: <Connect_CLICKED, exist>
function Connect_CLICKED()
------------USER CODE DATA--------------
------------USER CODE DATA--------------
end
```
注意：横屏的项目，需要修改2处，才能在模拟器和真机上都可以显示正确的效果，lcd.lua脚本中初始化屏参数，宽和高需要互换一下，这里改为width = 480，height = 854。mian.lua脚本中lvgl初始化前添加屏旋转，如下所示：
```lua
function demo_WindowInit()
lvgl.disp_set_rotation(nil, lvgl.DISP_ROT_270) --屏旋转
lvglUiInitial()
end
```
代码实现逻辑如上所示，其它部分代码实现可以下载源码学习。
## 视频演示
# 其它参考资料
UI设计器详细使用说明点击右侧蓝色设计器 [设计器](https://hmi.wiki.luatos.com/doc/65042949/e6zPC3k9/drjtxz61#nav_16)