加载器部件_lvgl spinner-CSDN博客

本文链接：https://blog.csdn.net/wanghao312/article/details/147123037

以下是 LVGL 8.2 中 加载器部件（Spinner） 的核心 API 函数及用法详解，所有代码均适配 LVGL 8.2 版本。

1. 加载器部件简介

加载器（Spinner）用于表示 等待状态，支持以下特性：

无限旋转动画（默认顺时针）。
自定义圆弧宽度、颜色、旋转速度。
灵活调整尺寸和角度范围。

2. 核心 API 函数

创建加载器

lv_obj_t *spinner = lv_spinner_create(parent, speed, arc_length);

参数	类型	说明
`parent`	`lv_obj_t*`	父容器（如 `lv_scr_act()` 当前屏幕）。
`speed`	`uint32_t`	旋转一周所需时间（单位：毫秒，默认 `1000`）。
`arc_length`	`lv_anim_value_t`	圆弧长度（角度值，默认 `60` 度）。

示例：

lv_obj_t *spinner = lv_spinner_create(lv_scr_act(), 1000, 60);

设置加载器样式

通过 LVGL 的 样式系统 修改加载器外观：

圆弧颜色和宽度

// 前景圆弧（旋转部分）样式（LV_PART_INDICATOR）
lv_obj_set_style_arc_color(spinner, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR);
lv_obj_set_style_arc_width(spinner, 8, LV_PART_INDICATOR);

// 背景圆弧样式（LV_PART_MAIN）
lv_obj_set_style_arc_color(spinner, lv_color_hex(0xE0E0E0), LV_PART_MAIN);
lv_obj_set_style_arc_width(spinner, 8, LV_PART_MAIN);

调整旋转角度

lv_spinner_set_anim_params(spinner, speed, arc_length);
// 示例：设置旋转周期为 2 秒，圆弧长度 90 度
lv_spinner_set_anim_params(spinner, 2000, 90);

设置尺寸

lv_obj_set_size(spinner, 80, 80); // 加载器尺寸（宽高一致为圆形）

控制动画

加载器默认自动播放动画，可通过以下函数控制：

lv_spinner_pause(spinner);   // 暂停动画
lv_spinner_resume(spinner);  // 恢复动画
lv_spinner_delete(spinner);  // 删除加载器

3. 完整示例代码

#include "lvgl.h"

void create_spinner_demo() {
    // 1. 创建加载器
    lv_obj_t *spinner = lv_spinner_create(lv_scr_act(), 1000, 60);
    lv_obj_set_size(spinner, 100, 100);  // 直径 100px
    lv_obj_align(spinner, LV_ALIGN_CENTER, 0, 0);

    // 2. 设置样式
    // 前景圆弧（旋转部分）
    lv_obj_set_style_arc_color(spinner, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR);
    lv_obj_set_style_arc_width(spinner, 10, LV_PART_INDICATOR);
    
    // 背景圆弧
    lv_obj_set_style_arc_color(spinner, lv_color_hex(0xE0E0E0), LV_PART_MAIN);
    lv_obj_set_style_arc_width(spinner, 10, LV_PART_MAIN);
    lv_obj_set_style_arc_opa(spinner, LV_OPA_50, LV_PART_MAIN); // 半透明背景

    // 3. 可选：动态修改参数
    // lv_spinner_set_anim_params(spinner, 2000, 90); // 2秒/圈，圆弧长度 90 度
}

4. 效果说明

蓝色圆弧以 1 秒/圈的速度无限旋转。
背景为浅灰色半透明圆弧。
尺寸为 100x100 像素，居中显示。

5. 常见问题

问题 1：加载器不显示

原因：未设置尺寸或父容器布局错误。

解决：

lv_obj_set_size(spinner, 80, 80); // 必须设置尺寸
lv_obj_center(spinner);           // 确保居中

问题 2：颜色未生效

原因：样式作用域（LV_PART_INDICATOR 或 LV_PART_MAIN）错误。

解决：

// 正确设置前景色
lv_obj_set_style_arc_color(spinner, lv_color_red(), LV_PART_INDICATOR);

问题 3：旋转速度不符合预期

原因：lv_spinner_create 的 speed 参数单位错误。

解决：

lv_spinner_set_anim_params(spinner, 2000, 60); // 2000ms = 2秒/圈

6. 高级用法

与其他部件联动

// 在按钮点击时显示加载器
static void btn_click_cb(lv_event_t *e) {
    lv_obj_t *spinner = lv_spinner_create(lv_scr_act(), 1000, 60);
    lv_obj_center(spinner);
    
    // 3秒后删除加载器
    lv_timer_t *timer = lv_timer_create([](lv_timer_t *t) {
        lv_spinner_delete(t->user_data);
        lv_timer_del(t);
    }, 3000, spinner);
}

自定义旋转方向

// 逆时针旋转
lv_obj_set_style_arc_rotation(spinner, 360, LV_PART_INDICATOR); // 需结合动画参数调整

总结

功能	函数/样式
创建加载器	`lv_spinner_create(parent, speed, arc_length)`
修改动画参数	`lv_spinner_set_anim_params(spinner, speed, arc_length)`
前景圆弧样式	`lv_obj_set_style_arc_color(spinner, color, LV_PART_INDICATOR)`
背景圆弧样式	`lv_obj_set_style_arc_color(spinner, color, LV_PART_MAIN)`
控制动画	`lv_spinner_pause()` / `lv_spinner_resume()`