LVGL应用编程入门：从零开始打造炫酷嵌入式界面

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

LVGL应用编程入门：从零开始打造炫酷嵌入式界面

• • 一、什么是LVGL？一个改变嵌入式UI开发的“神奇工具箱”
  • • LVGL的五大超能力：
  • 二、搭建你的第一个LVGL开发环境（超详细步骤）
  • • 准备工作清单：
    • 2.1 安装基础工具（就像装电脑的“驱动程序”）
    • 2.2 获取LVGL SDK（拿到我们的“工具箱”）
    • 2.3 配置PC仿真环境（先在电脑上“模拟运行”）
  • 三、编译运行第一个LVGL程序（激动人心的时刻！）
  • • 3.1 编译PC版本
    • 3.2 运行程序
  • 四、把程序“搬”到开发板上运行
  • • 4.1 安装ADB工具（连接电脑和开发板的“数据线”）
    • 4.2 ADB常用命令（记这几个就够了）
    • 4.3 编译开发板版本
  • 五、SDK目录结构解析（了解我们的“工具箱”内部）
  • 六、学习资源推荐
  • 七、常见问题排错指南
  • 总结
  • • 附录：快速命令备忘单

此系列公众号已更新完

一、什么是LVGL？一个改变嵌入式UI开发的“神奇工具箱”

想象一下，你要为一个智能手表设计一个漂亮的天气界面。没有LVGL之前，你可能需要：

• 用取模软件一个个像素点画图标
• 自己编写按钮点击检测逻辑
• 手动处理触摸屏坐标换算
• 为每个动画效果写复杂的算法

而有了LVGL，这一切都变得简单！

LVGL（Light and Versatile Graphics Library）是一个开源的图形用户界面库，旨在为嵌入式系统和物联网设备提供轻量级、可移植、灵活且易于使用的图形用户界面解决方案。LVGL就像是一个专为嵌入式设备准备的图形界面“万能工具箱”。它把常用的UI组件（按钮、滑块、图表等）都提前做好了，我们直接“拿来用”就行！

LVGL的五大超能力：

二、搭建你的第一个LVGL开发环境（超详细步骤）

准备工作清单：

• ✅ 安装好的VMware虚拟机
• ✅ Ubuntu 18.04系统
• ✅ 一颗不急不躁的心❤️

没有安装上面环境的可以参考我之前文章：https://mp.weixin.qq.com/s/b0Fz-vPzZ4J82dpPAcOfWw

建议也使用上面文章中vscode和ssh访问，修改代码更方便

2.1 安装基础工具（就像装电脑的“驱动程序”）

打开Ubuntu终端，一行命令搞定：

# 安装GCC/G++编译器、Make构建工具、Cmake配置工具
sudo apt-get install gcc g++ make -y

cmake需要自己单独下载，因为命令行下载的版本太老，可以参考我之前的文章里的cmake安装部分：https://mp.weixin.qq.com/s/UMPgEI2DEUOXaplXYANgQg

小白理解：GCC/G++是“翻译官”，把你写的C/C++代码翻译成机器能懂的语言；Make是“建筑工头”，指挥怎么编译项目；CMake是“蓝图设计师”，告诉Make项目结构是什么样的。

2.2 获取LVGL SDK（拿到我们的“工具箱”）

SDK是软件开发工具包，提供开发应用程序所需的库和API。这里也可以理解为是工具箱。本文我演示用的是T113开发板配套的sdk。

方式一：直接下载（推荐给新手）

链接: https://pan.baidu.com/s/1bcIqVQ_b1ZRRGbi9xt7DJw?pwd=vwfh 提取码: vwfh

# 下载后解压
tar -xzvf app_sdk.tar.gz

方式二：如果你有开发板配套的SDK，直接使用即可

2.3 配置PC仿真环境（先在电脑上“模拟运行”）

# 进入SDK目录
cd app_sdk

# 给编译脚本添加执行权限（让它能运行）
chmod 777 build.sh

# 安装SDL2库（这是LVGL在电脑上显示需要的“显示器驱动”）
sudo apt-get install libsdl2-dev -y

三、编译运行第一个LVGL程序（激动人心的时刻！）

3.1 编译PC版本

# 第一次编译需要清理（建立新的编译环境）
./build.sh -clean

# 编译Linux版本
./build.sh -linux

看到这个就成功了！

[100%] Built target demo

3.2 运行程序

./build/app/demo

🎉 恭喜！ 你应该能看到一个长条形的窗口，里面显示了LVGL的演示界面。

四、把程序“搬”到开发板上运行

如果没有开发板，此步骤可跳过，看上面仿真的效果是一样的

4.1 安装ADB工具（连接电脑和开发板的“数据线”）

ADB原本是Android开发工具，现在很多Linux开发板也支持它。

# 安装ADB
sudo apt install adb -y

4.2 ADB常用命令（记这几个就够了）

4.3 编译开发板版本

五、SDK目录结构解析（了解我们的“工具箱”内部）

app_sdk/
├── app/ # 你的代码写在这里！
├── component/ # 各种组件（网络、WiFi、播放器…）
├── lvgl/ # LVGL核心库
├── platform/ # 平台相关代码
│ ├── x86linux/ # PC仿真配置
│ └── t113/ # 开发板配置
└── build.sh # 一键编译脚本

各层分工就像餐厅：

• 应用层（你）：点菜、享受美食
• 组件层（厨师）：提供各种做好的菜品
• 适配层（传菜员）：连接厨房和餐厅
• 系统层（厨房设备）：炉灶、冰箱等
• 硬件层（食材）：最基础的原料

六、学习资源推荐

七、常见问题排错指南

总结

LVGL让嵌入式界面开发从“手工作坊”进入了“工业化生产”时代。通过今天的学习，你已经：

记住：学习嵌入式UI开发就像学游泳，不要一直站在岸上看教程，跳进去写代码才是最快的进步方式！

附录：快速命令备忘单

# 环境安装
sudo apt-get install gcc make cmake libsdl2-dev adb -y

# 编译运行（PC）
./build.sh -clean
./build.sh -linux
./build/app/demo

# 编译运行（开发板）
./build.sh -t113
adb push build/app/demo /user/bin
adb shell
cd /user/bin && ./demo

# 文件传输
adb push 电脑文件 开发板路径
adb pull 开发板文件 电脑路径

此系列公众号已更新完