用 LVGL 打造苹果风格音量滑块：圆润无球，极简优雅
文章目录
- ✨ 效果预览
- 🔧 实现代码
- 🧠 逐行讲解核心思路
- 1. 创建滑块并设置大小
- 2. 设置取值范围与默认值
- 3. 完全隐藏 knob（小圆球）
- 4. 设置滑块背景条样式（未填充部分）
- 5. 设置滑块填充条样式（已滑动部分）
- 🎨 样式可拓展建议
- 📌 总结
- ✅ 下一步建议
在许多现代移动操作系统中，音量调节控件都朝着极简、圆润、无球形 knob的方向演进，尤其是 Apple 系统中的滑块，极具设计美感。那么在嵌入式 GUI 框架 LVGL 中，如何还原出这样一个高质量的滑块控件呢？
本文将带你逐行解析如何用 LVGL 创建一个仿苹果风格的音量滑块，无 knob 圆球、宽条圆角，视觉舒适，功能完整，非常适合触摸屏应用。
✨ 效果预览
你将实现如下效果：
- 宽度达 300 像素，高度为 20 像素，贴合手指操作；
- 圆角处理，像一个大胶囊；
- 中间没有圆球（knob）；
- 灰白背景 + 白色填充条，风格简洁现代；
- 可设置范围值（0~100）与默认值（50）；
- 纯代码实现，适用于任意嵌入式屏幕。
🔧 实现代码
我们直接来看完整代码，然后逐行讲解它的每一个细节：
#include "lvgl.h"void create_apple_volume_slider(void)
{// 创建滑块对象lv_obj_t *slider = lv_slider_create(lv_scr_act());lv_obj_set_size(slider, 300, 20); // 更宽更高lv_obj_center(slider); // 居中显示// 设置滑块取值范围（0~100）和默认值为50lv_slider_set_range(slider, 0, 100);lv_slider_set_value(slider, 50, LV_ANIM_OFF);// 隐藏 knob（苹果风格中没有小圆球）lv_obj_clear_flag(slider, LV_OBJ_FLAG_CLICK_FOCUSABLE); // 取消点击高亮lv_obj_set_style_bg_opa(slider, LV_OPA_TRANSP, LV_PART_KNOB); // knob 透明lv_obj_set_style_border_width(slider, 0, LV_PART_KNOB); // knob 无边框// 背景条样式（灰色、圆角）lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_MAIN);lv_obj_set_style_bg_color(slider, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_PART_MAIN);lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_MAIN);lv_obj_set_style_pad_all(slider, 0, LV_PART_MAIN);lv_obj_set_style_border_width(slider, 0, LV_PART_MAIN);// 填充区域（已滑动部分）样式（白色、圆角）lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);lv_obj_set_style_bg_color(slider, lv_color_white(), LV_PART_INDICATOR);lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_INDICATOR);lv_obj_set_style_border_width(slider, 0, LV_PART_INDICATOR);
}
🧠 逐行讲解核心思路
1. 创建滑块并设置大小
lv_obj_t *slider = lv_slider_create(lv_scr_act());
lv_obj_set_size(slider, 300, 20);
lv_obj_center(slider);
- 在当前活动屏幕中创建滑块；
- 设置为宽 300、高 20，较为宽大，视觉上更舒适；
- 居中显示。
2. 设置取值范围与默认值
lv_slider_set_range(slider, 0, 100);
lv_slider_set_value(slider, 50, LV_ANIM_OFF);
- 音量范围为 0 到 100；
- 默认值为 50，即滑块指示条居中。
3. 完全隐藏 knob（小圆球）
lv_obj_clear_flag(slider, LV_OBJ_FLAG_CLICK_FOCUSABLE);
lv_obj_set_style_bg_opa(slider, LV_OPA_TRANSP, LV_PART_KNOB);
lv_obj_set_style_border_width(slider, 0, LV_PART_KNOB);
LV_OBJ_FLAG_CLICK_FOCUSABLE会在点击后出现焦点高亮，我们取消它；- 设置 knob 背景透明、无边框，从而彻底隐藏 knob；
- 这一步让滑块看起来只是一个“带进度的长条”。
4. 设置滑块背景条样式（未填充部分）
lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_MAIN);
lv_obj_set_style_bg_color(slider, lv_palette_lighten(LV_PALETTE_GREY, 3), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_MAIN);
lv_obj_set_style_pad_all(slider, 0, LV_PART_MAIN);
lv_obj_set_style_border_width(slider, 0, LV_PART_MAIN);
- 使用
LV_RADIUS_CIRCLE实现胶囊样式； - 设置背景为浅灰色；
- 无 padding、无边框，显得干净利落。
5. 设置滑块填充条样式（已滑动部分）
lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
lv_obj_set_style_bg_color(slider, lv_color_white(), LV_PART_INDICATOR);
lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_INDICATOR);
lv_obj_set_style_border_width(slider, 0, LV_PART_INDICATOR);
- 同样使用圆角；
- 设置颜色为白色（你可以改成蓝色、绿色以符合系统风格）；
- 无边框，统一视觉风格。
代码效果：
🎨 样式可拓展建议
你可以根据系统风格自定义：
| 样式元素 | 示例颜色 |
|---|---|
| 背景条颜色 | lv_palette_lighten(LV_PALETTE_GREY, 3) |
| 进度条颜色 | lv_color_white()、lv_palette_main(...) |
| 圆角风格 | LV_RADIUS_CIRCLE 或手动设置半径 |
📌 总结
通过 LVGL 提供的滑块和样式系统，我们可以非常灵活地创建类似苹果系统的音量滑块，甚至可以做出亮度条、电池控制等类似组件。
这类控件不仅外观现代、交互直观，而且能够在嵌入式设备上高效运行，非常适合用于：
- 音量调节
- 屏幕亮度控制
- 电机占空比设置
- 环境数值微调（如温度、湿度）
✅ 下一步建议
你可以尝试：
- 添加图标（🔊 / 🔇）来增强 UI 表达力；
- 响应滑动值变化，联动硬件（如调节真实音量）；
- 加入动画效果让填充条过渡更丝滑。