前言前面通过对中景园官方示例代码和LVGL官方示例代码的移植和修改我大体是对LVGL的开发有了一个概念在我眼里开发LVGL分成三大部分。1.对于整体LVGL的整理就是把要用的留下或者在lv_conf.h里打开还需要注意管理代码文件的位置整理整个工程的框架初始化所有要用到的东西定时器SPI各种引脚被控外设保证在写工程时能思路清晰不会半路因为某个文件没处理好某个外设没有完成处理导致转移注意力我经常因为这样导致进度超慢。2.如果是移植LVGL的代码的话就是要注意触摸部分的代码移植和显示部分的代码移植。理清思路真的很重要3。如果是使用SquareLine开发我觉得设计也很重要上手其实很简单但是设计好看的界面很难。还有需要考虑绑定函数的问题。接下来的工程呢是使用sqlSquareLine来创建自己的LVGL工程了在上一期的基础上更进一步。一、整理上期的代码上期我们移植的是官方的LVGL代码初始化部分我们还能保留因为这是LVGL能动起来的根本但是关于官方给的例程我们就可以注释掉了到时候换成我们自己的代码就可以了。设计界面和导出代码然后我们打开Sql根据自己需求设计画面SQL还是很好用的很好上手网上也是一堆教程这里就略过了。这是我跟着教程设计的一个仪表盘的界面然后导出文件我推荐是导出到一个专门的文件夹方便管理注意因为创建了新的文件夹需要在keil左边的项目目录包上新创建的UI文件夹并且把SQL生成的所以.c文件添加进去还需要在魔术棒添加头文件路径粗略的过一遍代码ui_Screen1.c首先是所以你创建的元件初始化的地方就在这包含了你创建的所以文字图片按钮滑块等等的创建和初始化后续我们绑定函数可能会需要改变文字或者颜色什么的我们就可以在这找找初始化颜色/大小/位置的函数直接搬过去用就好了很方便void ui_Screen1_screen_init(void) { ui_Screen1 lv_obj_create(NULL); lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE); /// Flags ui_Arc1 lv_arc_create(ui_Screen1); lv_obj_set_width(ui_Arc1, 150); lv_obj_set_height(ui_Arc1, 150); lv_obj_set_x(ui_Arc1, -160); lv_obj_set_y(ui_Arc1, -81); lv_obj_set_align(ui_Arc1, LV_ALIGN_CENTER); lv_arc_set_value(ui_Arc1, 50); ui_Button1 lv_btn_create(ui_Screen1); lv_obj_set_width(ui_Button1, 100); lv_obj_set_height(ui_Button1, 50); lv_obj_set_x(ui_Button1, 8); lv_obj_set_y(ui_Button1, -117); lv_obj_set_align(ui_Button1, LV_ALIGN_CENTER); lv_obj_add_flag(ui_Button1, LV_OBJ_FLAG_SCROLL_ON_FOCUS); /// Flags lv_obj_clear_flag(ui_Button1, LV_OBJ_FLAG_SCROLLABLE); /// Flags lv_obj_set_style_bg_color(ui_Button1, lv_color_hex(0xE30202), LV_PART_MAIN | LV_STATE_DEFAULT); lv_obj_set_style_bg_opa(ui_Button1, 255, LV_PART_MAIN | LV_STATE_DEFAULT); ui_Label1 lv_label_create(ui_Screen1); lv_obj_set_width(ui_Label1, LV_SIZE_CONTENT); /// 1 lv_obj_set_height(ui_Label1, LV_SIZE_CONTENT); /// 1 lv_obj_set_x(ui_Label1, 6); lv_obj_set_y(ui_Label1, -119); lv_obj_set_align(ui_Label1, LV_ALIGN_CENTER); lv_label_set_text(ui_Label1, LED); ui_Calendar1 lv_calendar_create(ui_Screen1); lv_obj_t * ui_Calendar1_header lv_calendar_header_arrow_create(ui_Calendar1); lv_obj_set_width(ui_Calendar1, 210); lv_obj_set_height(ui_Calendar1, 211); lv_obj_set_x(ui_Calendar1, 131); lv_obj_set_y(ui_Calendar1, 48); lv_obj_set_align(ui_Calendar1, LV_ALIGN_CENTER); ui_Colorwheel1 lv_colorwheel_create(ui_Screen1, true); lv_obj_set_width(ui_Colorwheel1, 150); lv_obj_set_height(ui_Colorwheel1, 150); lv_obj_set_x(ui_Colorwheel1, -145); lv_obj_set_y(ui_Colorwheel1, 57); lv_obj_set_align(ui_Colorwheel1, LV_ALIGN_CENTER); lv_obj_add_event_cb(ui_Button1, ui_event_Button1, LV_EVENT_ALL, NULL); }ui.c这里我是创建了一个按钮的功能并且给他绑定了一个函数回调所以这里会出现这个事件函数至于ui_init()可以理解成初始化你创建的界面画出你在SQL设置的界面。并且这个函数必须在 lv_port_disp_init();lv_port_indev_init();这2个函数之后调用void ui_event_Button1(lv_event_t * e) { lv_event_code_t event_code lv_event_get_code(e); if(event_code LV_EVENT_CLICKED) { LEDcontrl(e); } } ///////////////////// SCREENS //////////////////// void ui_init(void) { lv_disp_t * dispp lv_disp_get_default(); lv_theme_t * theme lv_theme_default_init(dispp, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED), false, LV_FONT_DEFAULT); lv_disp_set_theme(dispp, theme); ui_Screen1_screen_init(); ui____initial_actions0 lv_obj_create(NULL); lv_disp_load_scr(ui_Screen1); }ui_events.c这个函数就是真正的出发事件时被调用的函数放在这个.c文件里我这里是控制一个引脚翻转电平void LEDcontrl(lv_event_t * e) { HAL_GPIO_TogglePin(LED_GPIO_Port,LED_Pin); // Your code here }ui_helper.cui_helper.c 是 SquareLine Studio 配套 LVGL8.3 自动生成的工具封装文件统一封装控件改值、页面切换、状态控制、动画驱动、文字联动功能。它是界面代码的底层工具库由软件自动调用我们 无需手动修改、手动调用移植时只需要将文件添加进工程参与编译即可结语其实使用SQL开发还是蛮简单的几乎不需要写什么代码但是还是得建立在能看懂代码的基础上接下来我会搞一个较为复杂的LVGL项目看看还有什么值得开发的地方。