用 LVGL 打造苹果风格音量滑块：圆润无球，极简优雅-CSDN博客

本文链接：https://blog.csdn.net/m0_49476241/article/details/147872416

文章目录

在许多现代移动操作系统中，音量调节控件都朝着极简、圆润、无球形 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）和默认值为50
    lv_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` 或手动设置半径