【LVGL快速入门】LVGL开源框架入门教程之框架使用(UI界面设计)
目录
零.前置篇章
本篇前置文章为
一.UI设计
介绍使用之前，我们要学习一款LVGL官方的UI设计工具SquareLine Studio，使用图形化设计方式设计出我们想要的界面，然后生成对应源文件导入工程使用。
详情参考这篇文章：
另一种非官方工具Gui Guider(恩智浦开发)也可以进行UI设计：
Gui Guider官方下载地址：
个人比较喜欢恩智浦这个工具，界面看着更简洁，而且免费。
二.简单测试
在while前添加以下代码来简单测试是否移植成功：
// 按钮
lv_obj_t *myBtn = lv_btn_create(lv_scr_act()); // 创建按钮; 父对象：当前活动屏幕
lv_obj_set_pos(myBtn, 10, 10); // 设置坐标
lv_obj_set_size(myBtn, 120, 50); // 设置大小
// 按钮上的文本
lv_obj_t *label_btn = lv_label_create(myBtn); // 创建文本标签，父对象：上面的btn按钮
lv_obj_align(label_btn, LV_ALIGN_CENTER, 0, 0); // 对齐于：父对象
lv_label_set_text(label_btn, "Test"); // 设置标签的文本
// 独立的标签
lv_obj_t *myLabel = lv_label_create(lv_scr_act()); // 创建文本标签; 父对象：当前活动屏幕
lv_label_set_text(myLabel, "Hello world!"); // 设置标签的文本
lv_obj_align(myLabel, LV_ALIGN_CENTER, 0, 0); // 对齐于：父对象
lv_obj_align_to(myBtn, myLabel, LV_ALIGN_OUT_TOP_MID, 0, -20); // 对齐于：某对象
可以看到一个Test按钮以及Hello world!
遇到错误或者奇怪的现象可以参考：
三.正式开发
这里笔者使用GUI Guider来做演示。
1.创建工程
Create a new project来创建新工程：
貌似只适配8.3的 框架，next下一步：
选择设备模拟器为模板： 
选择空工程：
根据自己的屏幕选择尺寸，以及自命名工程和保存路径：
单击Create即可创建成功：
2.设计界面
依次单击以下图标可以呼出组件界面：
先添加一个容器覆盖我们的界面：
组件中选择图片，然后导入几张图片：
修缮一下：
选择标签，加点文字：
3.运行测试
点击右上角的三角运行无误后，即可开始移植
4.移植代码
将代码导出至指定路径：
打开我们移植好LVGL的STM32的工程以及工程文件夹，在LVGL文件夹中创建一个guider文件夹，将guider生成的源码src文件夹全部放入（删除生成的main.c）：
工程管理中创建组并添加文件：
魔术棒中添加头文件路径：
打开GUI Guider导出的main.c文件，将main.c中的头文件加入到我们自己工程的头文件中：
//Guider
#include "../generated/gui_guider.h"
#include "../generated/events_init.h"
在main.c主函数上方添加全局变量：
lv_ui guider_ui;
在主函数中调用（LVGL框架初始化之后）：
setup_ui(&guider_ui);
events_init(&guider_ui);
5.错误解决方案
以下是笔者移植时遇到的错误总结：
1.error:#8：missing closing quote
这个错误主要由编码错误引起，在魔术棒->C/C++->Misc Controls中添加：--locale=english
后即可解决
2.画面倒置
烧入成功后发现画面是旋转的或者倒置的话，可以使用LVGL自带的属性进行修改旋转
打开lv_port_disp.c这个文件，找到void lv_port_disp_init(void)这个函数
在lv_disp_drv_register(&disp_drv);前添加堆属性的修改即可
disp_drv.sw_rotate = 1; disp_drv.rotated = LV_DISP_ROT_90;这两句是开启旋转并旋转90度，其他宏如：
LV_DISP_ROT_NONE,LV_DISP_ROT_90,LV_DISP_ROT_180,LV_DISP_ROT_270分别可旋转不同的角度
四.移植成功
哈哈很浪漫的啊！
- 点赞
- 收藏
- 关注作者
评论（0）