LVGL教程：进度条bar控件系统学习手册

让进度“看得见”：深入掌握 LVGL 中的bar控件，打造流畅嵌入式 UI

你有没有遇到过这样的场景？

设备正在升级固件，屏幕却一片死寂；
电池快没电了，用户只能靠突然关机才意识到；
文件传输中，进度条“卡”在 80%，到底是卡住了还是慢？

这些问题的背后，其实是状态反馈缺失。而在现代嵌入式开发中，一个简单却关键的控件——进度条（bar），正是解决这类问题的核心工具。

今天我们就来系统性地拆解 LVGL 中的lv_bar控件。它不只是“画一条会动的横线”，而是一个集数据映射、样式控制、动画过渡和交互响应于一体的完整 UI 组件。掌握它，不仅能让你的界面更专业，更能建立起对 LVGL 整体架构的直观理解。

为什么是lv_bar？从“手动绘图”到“智能控件”的跨越

在没有图形库的时代，开发者想要显示进度，往往得自己算坐标、清旧区域、画新矩形，还得处理刷新时机。比如：

// 伪代码：手动绘制进度 draw_rect(10, 10, progress * 2, 20, BLUE); // 每次都要重算位置和尺寸

这种方式不仅代码冗长，而且一旦要加圆角、渐变色或动画，复杂度就指数级上升。

而lv_bar的出现，就是为了解放开发者。它把“值 → 视觉”的转换过程封装成一个对象，你只需要告诉它：“我现在是 65%”，剩下的——怎么画、怎么动、怎么换颜色——全由 LVGL 自动完成。

它到底能做什么？

  • ✅自动映射数值范围：设置[0~100]，输入75，指示器自动占满 75% 长度；
  • ✅支持平滑动画：值变化时不是瞬间跳变，而是缓缓移动过去；
  • ✅双向填充模式：可用于音量条、温度偏差等中心对称场景；
  • ✅完全样式自由：背景/指示器独立配色、圆角、阴影、渐变……随心所欲；
  • ✅低内存占用：无需帧缓冲也能工作，适合资源紧张的 MCU；
  • ✅可交互：支持触摸拖动，既是显示器也是调节器。

换句话说，lv_bar不只是一个“输出控件”，它已经具备了现代 UI 元素的所有特质：声明式编程 + 响应式更新 + 视觉表现力。

从零开始：创建你的第一个带动画进度条

我们先来看一段最典型的使用代码，然后逐行解析其背后的逻辑。

#include "lvgl.h" lv_obj_t* create_progress_bar(lv_obj_t* parent) { lv_obj_t* bar = lv_bar_create(parent); lv_obj_set_size(bar, 200, 20); lv_obj_align(bar, LV_ALIGN_CENTER, 0, 0); lv_bar_set_range(bar, 0, 100); lv_bar_set_value(bar, 40, LV_ANIM_OFF); static lv_style_t style_bg, style_ind; lv_style_init(&style_bg); lv_style_init(&style_ind); lv_style_set_bg_color(&style_bg, lv_color_hex(0x808080)); lv_style_set_radius(&style_bg, 10); lv_style_set_bg_opa(&style_bg, LV_OPA_COVER); lv_style_set_bg_color(&style_ind, lv_color_hex(0x007FFF)); lv_style_set_radius(&style_ind, 10); lv_style_set_bg_opa(&style_ind, LV_OPA_COVER); lv_obj_add_style(bar, &style_bg, LV_PART_MAIN); lv_obj_add_style(bar, &style_ind, LV_PART_INDICATOR); return bar; }

这段代码干了五件事：

1. 创建对象并布局

lv_obj_t* bar = lv_bar_create(parent); lv_obj_set_size(bar, 200, 20); lv_obj_align(bar, LV_ALIGN_CENTER, 0, 0);

这是 LVGL 的标准操作流程：创建 → 设大小 → 定位置。所有控件都遵循这一范式。这里我们将进度条设为宽 200px、高 20px，并居中显示。

💡 小技巧：如果你希望进度条宽度随父容器自适应，可以用lv_pct(90)表示父容器宽度的 90%。

2. 设置值范围与初始值

lv_bar_set_range(bar, 0, 100); lv_bar_set_value(bar, 40, LV_ANIM_OFF);

这一步定义了“语义”。默认情况下，LVGL 的bar范围就是0~100，但你可以改成0~255（对应 PWM 占空比）、-40~85（温度），只要逻辑清晰即可。

LV_ANIM_OFF表示初始化时不启用动画，避免首次加载时“弹出来”的突兀感。

3. 定义样式结构

static lv_style_t style_bg, style_ind; lv_style_init(&style_bg); lv_style_init(&style_ind);

注意这里用了static—— 因为样式对象可以被多个控件复用，声明为静态变量可避免重复初始化，节省内存。

4. 配置视觉属性

lv_style_set_bg_color(&style_bg, lv_color_hex(0x808080)); lv_style_set_radius(&style_bg, 10);

每一条lv_style_set_xxx()都是在给样式“打补丁”。你可以只改颜色，也可以加上边框、阴影、渐变（通过bg_grad相关 API）。圆角设为 10px 后，整个进度条看起来更加柔和现代。

5. 应用到控件的不同部分

lv_obj_add_style(bar, &style_bg, LV_PART_MAIN); lv_obj_add_style(bar, &style_ind, LV_PART_INDICATOR);

这是 LVGL 的精髓之一：部件（Part）分离设计。LV_PART_MAIN是整个控件的背景区域，LV_PART_INDICATOR是动态填充的部分。两者可以拥有完全不同的样式，互不干扰。

实时更新？别让频繁刷新拖垮系统！

有了进度条，接下来自然是要动态更新它的值。比如在 OTA 下载中：

void update_progress_bar(lv_obj_t* bar, int new_value) { lv_bar_set_value(bar, new_value, LV_ANIM_ON); }

很简单对吧？但如果你在一个高速循环里每收到一个字节就调一次这个函数，可能会发现界面卡顿甚至崩溃。

为什么会卡？

因为每次set_value都会触发重绘请求，LVGL 会在下一帧进行渲染。如果更新太频繁，会导致：
- 渲染任务堆积；
- 帧率下降；
- 动画反而变得不连贯。

如何优化？

✅ 方法一：节流更新（Throttling）

限制更新频率，例如每 50ms 最多更新一次：

static uint32_t last_update = 0; void safe_update_bar(lv_obj_t* bar, int value) { uint32_t now = millis(); if (now - last_update > 50) { lv_bar_set_value(bar, value, LV_ANIM_ON); last_update = now; } }

这样即使底层事件很密集，UI 层也不会过载。

✅ 方法二：合理设置动画时间

默认动画时间可能太短（如 200ms），导致看起来“闪”。可以通过主题或样式统一调整：

lv_anim_enable_default(true); // 确保全局动画开启 lv_obj_set_style_transition_time(bar, 300, LV_PART_INDICATOR); // 动画持续300ms

较长的动画能让用户感知更平滑的变化过程，也降低了对高频更新的依赖。

进阶玩法：不只是“从左到右”

双向模式：做音频均衡器或温差指示器

有些场景下，我们需要以中间为基准向两边扩展。比如：

  • 音频立体声平衡调节；
  • 实际温度 vs 设定温度的偏差；
  • 心理测评中的倾向分布。

这时就可以启用对称模式：

lv_bar_set_mode(bar, LV_BAR_MODE_SYMMETRICAL); lv_bar_set_range(bar, -100, 100); // 中心为0 lv_bar_set_value(bar, -30, LV_ANIM_ON); // 左侧填充30%

在这个模式下：
- 负值 → 向左填充；
- 正值 → 向右填充；
- 指示器始终以中心为起点伸缩。

是不是瞬间就有了专业仪表的感觉？

样式进阶：做出“呼吸感”的进度条

想让进度条更有生命力？试试加个轻微的脉动效果。虽然bar本身不支持内置脉动动画，但我们可以通过定时改变透明度来模拟：

void pulse_indicator(lv_timer_t* timer) { static bool expanding = true; static uint8_t opa = 150; if (expanding) opa += 5; else opa -= 5; if (opa >= 220) expanding = false; if (opa <= 100) expanding = true; lv_obj_set_style_bg_opa(timer->user_data, opa, LV_PART_INDICATOR); } // 启动脉动 lv_timer_t* pulse_tmr = lv_timer_create(pulse_indicator, 50, bar); lv_timer_ready(pulse_tmr); // 立即执行一次

这种细节上的微创新，往往能让产品脱颖而出。

主题切换：一键实现“白天/黑夜”模式

很多产品需要支持夜间模式。如果每个控件都硬编码颜色，那维护起来简直是噩梦。

LVGL 提供了强大的主题系统（Theme），让我们可以集中管理视觉风格。

void apply_night_theme() { static lv_theme_t theme_night; lv_theme_default_init( &theme_night, lv_palette_main(LV_PALETTE_BLUE), // 主色调 lv_palette_main(LV_PALETTE_RED), // 强调色 false, // 是否深色模式 LV_FONT_DEFAULT ); lv_theme_apply(&theme_night); }

只要你在创建控件时没有使用lv_style_set_bg_color(..., fixed_color)强制锁定颜色，那么当主题切换时，bar的背景和指示器就会自动继承新的调色板。

⚠️ 注意：如果你用了static lv_style_t并显式设置了颜色，则需手动重新应用样式才能生效。

实战建议：这些坑我替你踩过了

❌ 坑点一：忘记初始化样式

常见错误写法：

lv_style_t style; // 栈上分配，未 init lv_style_set_bg_color(&style, lv_color_black()); lv_obj_add_style(bar, &style, LV_PART_MAIN); // ❌ 未初始化，行为未定义！

正确做法是：

static lv_style_t style; lv_style_init(&style); // 必须调用！ lv_style_set_bg_color(&style, lv_color_black());

否则可能导致花屏、崩溃或样式不生效。

❌ 坑点二：多个 bar 复用同一个 style 对象却想有不同的颜色

lv_style_set_bg_color(&style_ind, color_A); // 第一个 bar lv_obj_add_style(bar1, &style_ind, LV_PART_INDICATOR); lv_style_set_bg_color(&style_ind, color_B); // 修改了同一个对象！ lv_obj_add_style(bar2, &style_ind, LV_PART_INDICATOR); // bar1 的颜色也被改了！

解决方案：
- 每个不同颜色的 bar 使用独立的lv_style_t；
- 或者使用主题机制自动分配颜色。

✅ 秘籍：批量创建多个进度条？封装 + 复用

当你有多个相似进度条（如 CPU、内存、网络使用率）时，建议封装通用函数：

lv_obj_t* create_status_bar(lv_obj_t* parent, int x_ofs) { lv_obj_t* bar = lv_bar_create(parent); lv_obj_set_size(bar, 100, 12); lv_obj_align(bar, LV_ALIGN_TOP_LEFT, 20 + x_ofs, 50); lv_bar_set_range(bar, 0, 100); lv_bar_set_value(bar, 0, LV_ANIM_OFF); // 复用已初始化的样式 extern const lv_style_t style_bg, style_ind; lv_obj_add_style(bar, &style_bg, LV_PART_MAIN); lv_obj_add_style(bar, &style_ind, LV_PART_INDICATOR); return bar; }

将样式定义为全局常量，可在多个控件间安全共享，极大减少内存开销。

它不只是进度条，更是数据与用户的桥梁

回过头看，lv_bar的价值远不止“显示百分比”。

在系统架构中，它是连接后台逻辑和前台体验的关键节点：

[传感器数据] → [MCU处理] → [状态变量] → [lv_bar_set_value()] → [用户看见]

每一次值的更新，都是系统在向用户说：“我还活着，正在努力。”

而良好的动画、合理的颜色对比、清晰的单位标注（配合lv_label显示 “65%”），都在无声地传递一种信任感：这个设备是可靠的、可控的、值得信赖的。

写在最后：从小控件窥见大世界

学习lv_bar的过程，其实也是在学习 LVGL 的核心思想：

  • 对象模型：一切皆lv_obj_t，可嵌套、可定位、可绑定事件；
  • 样式系统：样式与结构分离，支持细粒度定制；
  • 部件机制：PART_MAIN、PART_INDICATOR让复合控件易于管理；
  • 动画引擎：无需手动插值，一句LV_ANIM_ON解决流畅过渡；
  • 事件驱动：可监听值变化，实现双向交互。

掌握了bar，你就已经走通了 LVGL 开发的基本路径。下一步无论是学slider、chart还是自定义控件，都会轻松许多。

所以别小看这一根小小的进度条——
它是你通往专业级嵌入式 GUI 的第一块踏脚石。

如果你正在做智能手表、工控面板、IoT 设备，不妨现在就去试着加一个带动画的进度条吧。
也许就是这一点点“看得见的努力”，让用户觉得你的产品“真的不一样”。

欢迎在评论区分享你的bar使用经验：你是怎么配色的？有没有做过环形进度条？遇到了哪些坑？我们一起交流进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1167576.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AssetStudio完整教程：轻松掌握Unity游戏资源提取技巧

AssetStudio完整教程：轻松掌握Unity游戏资源提取技巧

AssetStudio完整教程&#xff1a;轻松掌握Unity游戏资源提取技巧 【免费下载链接】AssetStudio AssetStudio is an independent tool for exploring, extracting and exporting assets. 项目地址: https://gitcode.com/gh_mirrors/ass/AssetStudio AssetStudio作为一款专…
阅读更多...
XXMI启动器终极指南：5分钟快速掌握多游戏模组管理

XXMI启动器终极指南：5分钟快速掌握多游戏模组管理

XXMI启动器终极指南&#xff1a;5分钟快速掌握多游戏模组管理 【免费下载链接】XXMI-Launcher Modding platform for GI, HSR, WW and ZZZ 项目地址: https://gitcode.com/gh_mirrors/xx/XXMI-Launcher 想要一次性管理所有热门游戏的模组却不知从何开始&#xff1f;XXMI…
阅读更多...
猫抓资源捕获工具：网页媒体下载的终极解决方案

猫抓资源捕获工具：网页媒体下载的终极解决方案

猫抓资源捕获工具&#xff1a;网页媒体下载的终极解决方案 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为无法下载网页视频而烦恼吗&#xff1f;这款专业的资源捕获工具能够帮你轻松获取各类网…
阅读更多...
AdGuard Home终极配置指南：打造纯净无广告网络环境

AdGuard Home终极配置指南：打造纯净无广告网络环境

AdGuard Home终极配置指南&#xff1a;打造纯净无广告网络环境 【免费下载链接】AdGuardHomeRules 高达百万级规则&#xff01;由我原创&整理的 AdGuardHomeRules ADH广告拦截过滤规则&#xff01;打造全网最强最全规则集 项目地址: https://gitcode.com/gh_mirrors/ad/A…
阅读更多...
浏览器资源嗅探工具实战指南：轻松捕获网页媒体资源的完整教程

浏览器资源嗅探工具实战指南：轻松捕获网页媒体资源的完整教程

浏览器资源嗅探工具实战指南&#xff1a;轻松捕获网页媒体资源的完整教程 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为无法下载网页视频而烦恼吗&#xff1f;浏览器资源嗅探工具正是你需要的…
阅读更多...
LeagueAkari英雄联盟辅助工具：新手必备的智能游戏助手指南

LeagueAkari英雄联盟辅助工具：新手必备的智能游戏助手指南

LeagueAkari英雄联盟辅助工具&#xff1a;新手必备的智能游戏助手指南 【免费下载链接】LeagueAkari ✨兴趣使然的&#xff0c;功能全面的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/LeagueAkari 还在…
阅读更多...
如何破解微信小程序的加密外壳？wxappUnpacker深度探秘指南

如何破解微信小程序的加密外壳？wxappUnpacker深度探秘指南

如何破解微信小程序的加密外壳&#xff1f;wxappUnpacker深度探秘指南 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 你有没有想过&#xff0c;微信小程序背后隐藏着什么秘密&#xff1f;当你在手机上流畅使用各种小…
阅读更多...
DLSS Swapper完全指南：游戏DLSS版本管理的终极解决方案

DLSS Swapper完全指南：游戏DLSS版本管理的终极解决方案

DLSS Swapper完全指南&#xff1a;游戏DLSS版本管理的终极解决方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 想要轻松管理游戏中的DLSS版本&#xff0c;提升画面表现和运行效率吗&#xff1f;DLSS Swapper正是您…
阅读更多...
效果惊艳！RexUniNLU指代消解案例展示

效果惊艳！RexUniNLU指代消解案例展示

效果惊艳&#xff01;RexUniNLU指代消解案例展示 1. 引言&#xff1a;通用自然语言理解的新范式 在信息抽取&#xff08;Information Extraction, IE&#xff09;任务中&#xff0c;指代消解&#xff08;Coreference Resolution&#xff09;是一项关键但长期被忽视的技术环节。…
阅读更多...
BooruDatasetTagManager完全指南：AI图像标签管理的终极解决方案

BooruDatasetTagManager完全指南：AI图像标签管理的终极解决方案

BooruDatasetTagManager完全指南&#xff1a;AI图像标签管理的终极解决方案 【免费下载链接】BooruDatasetTagManager 项目地址: https://gitcode.com/gh_mirrors/bo/BooruDatasetTagManager 在AI绘画和内容创作日益普及的今天&#xff0c;如何高效管理海量图片标签成为…
阅读更多...
孩子视力下降有信号！别等高度近视才追悔莫及

孩子视力下降有信号！别等高度近视才追悔莫及

作为家长&#xff0c;你是否总觉得孩子的视力下降是“突然发生”的&#xff1f;其实不然&#xff0c;近视的发展是一个循序渐进的过程&#xff0c;在真正出现视力模糊、检查出近视度数之前&#xff0c;孩子的身体早已发出了诸多预警信号。如果能及时捕捉这些信号并采取科学干预…
阅读更多...
5分钟搞定英雄联盟智能辅助：LeagueAkari完全配置手册

5分钟搞定英雄联盟智能辅助：LeagueAkari完全配置手册

5分钟搞定英雄联盟智能辅助&#xff1a;LeagueAkari完全配置手册 【免费下载链接】LeagueAkari ✨兴趣使然的&#xff0c;功能全面的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/LeagueAkari 还在为英雄…
阅读更多...
Switch控制器PC适配完全指南：从入门到精通

Switch控制器PC适配完全指南：从入门到精通

Switch控制器PC适配完全指南&#xff1a;从入门到精通 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://gitcode.com/gh_mirrors/…
阅读更多...
Windows终极PDF处理方案：快速部署完整指南

Windows终极PDF处理方案：快速部署完整指南

Windows终极PDF处理方案&#xff1a;快速部署完整指南 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 还在为复杂的PDF工具配置而烦恼吗&#xff1…
阅读更多...
青少年近视：别让“再等等”拖成终身遗憾

青少年近视：别让“再等等”拖成终身遗憾

在青少年视力健康问题上&#xff0c;很多家长都抱着这样的想法&#xff1a;孩子只是看东西有点模糊&#xff0c;说不定是假性近视&#xff0c;再等等就好了。可正是这个“再等等”&#xff0c;让无数孩子的视力问题从轻微的视物不清&#xff0c;发展成难以逆转的真性近视&#…
阅读更多...
Switch控制器PC适配完全指南：BetterJoy深度配置与性能优化终极教程

Switch控制器PC适配完全指南：BetterJoy深度配置与性能优化终极教程

Switch控制器PC适配完全指南&#xff1a;BetterJoy深度配置与性能优化终极教程 【免费下载链接】BetterJoy Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput 项目地址: https://…
阅读更多...
如何快速掌握DownKyi：B站视频下载与处理的完整指南

如何快速掌握DownKyi：B站视频下载与处理的完整指南

如何快速掌握DownKyi&#xff1a;B站视频下载与处理的完整指南 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#xff…
阅读更多...
一键部署AI画质增强：Super Resolution镜像开箱即用体验

一键部署AI画质增强：Super Resolution镜像开箱即用体验

一键部署AI画质增强&#xff1a;Super Resolution镜像开箱即用体验 1. 技术背景与应用价值 在数字内容爆炸式增长的今天&#xff0c;图像质量直接影响用户体验。无论是社交媒体分享、电商平台展示&#xff0c;还是老照片修复、监控图像分析&#xff0c;高清画质都成为刚需。然…
阅读更多...
为什么Hunyuan MT1.8B总失败？术语干预部署教程入门必看

为什么Hunyuan MT1.8B总失败？术语干预部署教程入门必看

为什么Hunyuan MT1.8B总失败&#xff1f;术语干预部署教程入门必看 近年来&#xff0c;轻量级多语言翻译模型成为边缘设备和低资源场景下的研究热点。腾讯混元推出的 HY-MT1.5-1.8B 模型凭借“手机端可运行、速度快、效果强”的宣传迅速引发关注。然而&#xff0c;许多开发者在…
阅读更多...
如何高效实现民汉互译？HY-MT1.5-7B大模型镜像一键启动全解析

如何高效实现民汉互译？HY-MT1.5-7B大模型镜像一键启动全解析

如何高效实现民汉互译&#xff1f;HY-MT1.5-7B大模型镜像一键启动全解析 1. 背景与需求&#xff1a;多语言翻译的现实挑战 在全球化背景下&#xff0c;跨语言信息流通已成为政府服务、教育普及和企业出海的关键环节。尤其在中国&#xff0c;支持汉语与少数民族语言之间的高质…
阅读更多...
最新文章

Copyright @ 2022~2023