目录
一、资料
1.学习（文档）资料
2.软件资料
二、绘制UI
1.SquareLine Studio
1）打开软件就是以下界面
2）界面介绍
3）实时预览UI效果
4）设置导出参数
编辑 5）导出文件
三、移植
1、下载demo
1.通过git下载
2.通过压缩包下载
2、测试下载的文件是否可用
3、将UI编辑器绘制的界面移植到桌面模拟器里
1.将从SquareLine Studio导出的ui文件的文件夹，放置到demo工程里
2.改动代码
4、执行编译即可
Ps：
一、资料
1.学习（文档）资料
1）.LVGL官方网址
LVGL - Light and Versatile Embedded Graphics LibraryLVGL is the most popular free and open source embedded graphics library targeting any MCU, MPU and display type to build beautiful UIs. It's boosted by a professional yet affordable drag and drop UI editor, called SquareLine Studio. We also do services like UI design, implementation and consulting.https://lvgl.io/#get-started
2）.LVGL官方介绍文档
Quick overview — LVGL documentationhttps://docs.lvgl.io/master/get-started/quick-overview.html3）.中文文档
欢迎阅读百问网LVGL中文开发手册！ — 百问网LVGL中文教程文档 文档http://lvgl.100ask.net/8.2/index.html
2.软件资料
1）.SquareLine Studio（官方UI编辑器）
https://squareline.io/https://squareline.io/ 需要注意的是这个软件是收费的，但是对于个人用户是免费的，但是有一点小小的限制，工程中不能使用超过5个屏幕和50个控件，但是对于个人开发者来说，这个已经够用了。
2）.Visual Studio 2019版（PC模拟器）
Visual Studio 2019 版本 16.11 发行说明 | Microsoft Learn了解 Visual Studio 2019 v16.11 的最新功能、bug 修复和相关支持。 立即下载。https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes
Visual Studio 2019下载地址和安装教程
VS2019下载地址和安装教程（图解）继 VS2015 和 VS2017 之后，微软于 2019 年 4 月 3 日发布了新版的集成开发环境VS2019。 和 VS2017 相比，VS2019（Visual Studio 2019）更加强大，不仅新增了一键清除代码、利用实时协作开发共享代码http://c.biancheng.net/view/8529.html
二、绘制UI
1.SquareLine Studio
软件有30天的试用期，不需要注册，下载即用。如果后续需要一直使用的情况，需要注册，有唯一的机器码，登录就可以了。
ps：按住滚轮可以实现拖动
1）打开软件就是以下界面
可以打开之前的项目，可以新建，可以选择示例
2）界面介绍
3）实时预览UI效果
可以实现UI随时观看的效果，无需烧到板上才知道效果
4）设置导出参数
一般设置一下两点即可
设置屏幕的高度、宽度、字节数
设置导出的格式是C/C++、python
5）导出文件
第一步：选择导出的内容
无论是UI还是整个工程，选择一个文件夹导出即可
以下是成功后，系统的通知
三、移植
1、下载demo
1.通过git下载
方式一：
拉取仓库的内容
git clone --recursive https://github.com/lvgl/lv_port_win_visual_studio.git
下载完后，你会发现目录LvglPlatform里的子目录 “freetype”、“lv_drivers”、“lvgl”、为空
所以，还需要进入代码根目录，使用git 下载子模块
cd lv_port_win_visual_studio/（根目录不一定是这个名字）
git submodule update --init --recursive
方式二：（推荐）
直接把demo仓库里的所有东西都拉取下来，一步到位
git clone --recurse-submodules https://github.com/lvgl/lv_port_win_visual_studio.git
2.通过压缩包下载
进入链接https://github.com/lvgl/lv_port_win_visual_studio进行下载
值得注意的是：
通过压缩包下载的，目录LvglPlatform里的子目录 “freetype”、“lv_drivers”、“lvgl”依旧为空
还是需要通过git来填充里面的内容，否则工程无法顺利运行。
2、测试下载的文件是否可用
直接双击点开运行文件即可
选择X64，进行调试
编译完成就会弹出来显示界面
3、将UI编辑器绘制的界面移植到桌面模拟器里
1.将从SquareLine Studio导出的ui文件的文件夹，放置到demo工程里
这是ui文件存放的文件夹
将其复制，放到工程文件的某一个文件里面
例如以下这个，记住这个地址
在Visual Studio里将其链接到工程里
将工程里ui文件夹的地址复制并黏贴到此处
在工程里面建一个和存放ui的文件夹，名称一致的筛选器
将UI文件添加进来
2.改动代码
编辑LVGL.Simulator.cpp，将ui.h这个头文件包含进去，并且注释掉原本的示例，调用ui.c里面定义的ui.h里面声明的ui_init函数：
4、执行编译即可
Ps：
后续如果要移植其它的UI：
把ui1里的文件替换
再把打开VS2019，把筛选器里的文件替换一下，就可以了文章来源：https://www.toymoban.com/news/detail-720699.html
就无需再重新关联路径了文章来源地址https://www.toymoban.com/news/detail-720699.html
到了这里，关于LVGL——github的例程进行本地编译的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[LVGL]：MACOS下使用LVGL模拟器](https://imgs.yssmx.com/Uploads/2024/04/859687-1.png)
