无硬件学LVGL：基于Web模拟器+MiroPython速通GUI开发—控件篇

万德福 發表於 2026-4-19 20:22:00

无硬件学LVGL：基于Web模拟器+MiroPython速通GUI开发—控件篇

很多想入坑嵌入式 GUI 开发的朋友，估计都跟我当初一样，刚听说 LVGL 的时候两眼放光 —— 这玩意儿功能强、跨平台，能做出超精致的交互界面，结果一上手就被门槛卡得没了脾气：买开发板要额外成本，搭编译环境要折腾半天，烧录调试还得对着一堆报错头大，刚燃起的热情没几天就被磨没了。
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202121942-848180648.png">
我当初踩过这些坑后就一直在想：能不能有个更轻松的入门方式？不用额外买硬件，不用折腾复杂环境，打开就能写代码、看效果，先把 LVGL 的核心玩法摸透再说？
所以就有了这个教程：我们直接用 Web 模拟器搭配 MicroPython，从零开始带你吃透 LVGL 的常用控件：从基础的样式设置，到标签、开关、LED、复选框、弧线、滑动条、图表、日历、文本框、键盘这些控件的初始化、样式定制、交互逻辑，再到怎么把它们组合起来做场景化的界面，都会一步步讲清楚。
所有代码都适配了模拟器的运行环境，注释写得明明白白，还附带了效果说明，不管是纯新手想入门，还是想快速上手 LVGL 的开发者，都能跟着走，不用再被硬件和环境劝退，先高效搞定嵌入式图形界面开发的核心技能，后面再上硬件也能轻松衔接。
咱们用的是 LVGL 官方的 Web 模拟器，这里先划个重点：它仅支持 LVGL v9.0 版本，后面所有代码、示例都是基于这个版本写的，别瞎找其他版本，不然很容易出现函数不兼容、效果出不来的问题。
直接复制下面的地址到浏览器打开就行，不用FQ，也不用装插件： 
https://sim.lvgl.io/v9.0/micropython/ports/webassembly
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202117098-1330216943.png">
打开后界面就是截图里的样子：左边是代码编辑器，右上角是实时渲染的界面效果，右下角是 MicroPython 终端。 写好代码点左上角的「Restart」按钮，就能立刻看到运行效果，比在开发板上反复烧录调试爽太多了。
刚打开时编辑器里会自带一个「Hello World」示例，直接点运行，看到界面上弹出带文字的按钮，就说明环境没问题，可以直接开写了。
后面写代码遇到问题时，可以直接去 LVGL v9.0 的官方示例页面找参考，里面有各种控件的基础 Demo，还能跳 GitHub 看源码，对照着改比自己瞎试效率高多了：
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202117881-1163362255.png">
参考代码地址：https://docs.lvgl.io/9.0/examples.html
这部分我没按官方文档那种干巴巴的 API 列表来写，而是顺着「从入门到上手」的逻辑，把 LVGL 里开发者最常用的控件，拆成了一套「能直接跑、能改、能懂」的学习流程，你跟着敲就能看到效果，完全不用对着复杂的底层原理挠头： 
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202119585-1296320716.png">
<ul>
<li>API 快速说明：把 MicroPython 里最常用的函数列成表格，比如怎么创建控件、怎么改位置 / 大小 / 样式、怎么绑定交互事件，不用你自己翻英文文档查；</li>
<li>完整示例代码：给的都是能直接复制到模拟器里跑的完整代码，从初始化到界面渲染都写好了，点一下「Restart」就能看到效果；</li>
<li>新手避坑提醒：把我当初踩过的坑都提前标出来，比如 v9.0 版本和旧版的 API 差异、控件父子对象的坑、样式设置的常见错误，帮你少走弯路。</li>
</ul>
我把目录里的控件分成了 5 类，从最基础的界面元素，到能做交互、能显示数据的复杂控件，循序渐进往上叠加难度：
<ul>
<li>入门基石：先搞懂 LVGL 的核心逻辑
<ul>
<li>Hello World + 按键控件：先跑通第一个界面，搞懂 <code>lv.init()</code> 初始化引擎、获取屏幕对象、控件父子关系这些最基础的规则，学会怎么创建一个按钮、给按钮加文字、甚至给按钮加点击事件；</li>
<li>矩阵按键：学会批量创建按键、自定义按键布局，比如做个简易键盘或者控制按钮组，练熟控件的批量创建和事件绑定。</li>
</ul>
</li>
<li>文本与界面结构：搭好界面的 “骨架”
<ul>
<li>标签（Label）：LVGL 里最基础的文字控件，教你怎么设置文字内容、字体颜色、大小、对齐方式，还有怎么让文字自动换行；</li>
<li>基础对象：讲透 LVGL 里所有控件的 “父类”，学会改控件的背景色、透明度、边框、圆角这些通用样式，后面所有控件都能用得上；</li>
<li>文本框、下拉列表、选项卡、菜单、列表：从简单的文本输入，到能切换页面的选项卡、能展开收起的菜单，一步步教你搭出有结构的界面。</li>
</ul>
</li>
<li>交互与状态反馈：让界面 “动起来”
<ul>
<li>开关（Switch）：做个能点的开关，学会监听开关的开 / 关状态，根据状态改界面或者输出信息；</li>
<li>指示灯 LED：用 LED 控件模拟设备状态，比如亮 / 灭、不同颜色的状态反馈，学会改控件的颜色、亮度样式；</li>
<li>复选框：学会做可勾选的选项，监听勾选状态，实现多选 / 单选的交互逻辑；</li>
<li>滚轮：教你做能滑动的滚轮选择器，比如选时间、选数值，练熟滑动交互的事件处理。</li>
</ul>
</li>
<li>图形与数据可视化：让界面更直观
<ul>
<li>弧线、线段：用基础图形控件画自定义的线条、进度条、仪表盘，学会控制角度、长度、颜色；</li>
<li>滑动条：做个能拖动的滑动条，实时获取滑动条的数值，联动改其他控件的状态，比如调亮度、调音量；</li>
<li>图表、日历：教你用图表显示数据曲线，用日历控件做日期选择，搞定嵌入式里常见的数据可视化场景。</li>
</ul>
</li>
<li>进阶小彩蛋：让界面更丰富
<ul>
<li>虚拟键盘：教你给文本框绑定虚拟键盘，实现嵌入式里的输入交互；</li>
<li>显示图片和动图：教你怎么在界面里加静态图片，甚至动图，让你的界面不再是单调的文字和色块。</li>
</ul>
</li>
</ul>
教程原链接如下所示：https://freakstudio.cn/node/019d25ff-e32b-79c8-9fa8-55a4bb6f4bfe
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202117895-1881155477.png">
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202125385-767534958.png">
<blockquote>
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202119488-2016245786.png">
</blockquote>
<blockquote>
<img src="https://img2024.cnblogs.com/blog/2591203/202604/2591203-20260419202125579-207819968.png">
</blockquote> 
来源：https://www.cnblogs.com/FreakEmbedded/p/19891603

頁: [1]

琼殿技术论坛's Archiver

无硬件学LVGL：基于Web模拟器+MiroPython速通GUI开发—控件篇