嵌入式GUI LVGL『Spinner环形加载器控件』介绍

Posted 2022-01-22 Wireless_Link

一. LVGL GUI环形加载器控件的概念

对象是边界上的旋转弧

二. LVGL GUI环形加载器小部件和样式

微调器使用以下部分：

• LV_SPINNER_PART_BG ：  主要部分
• LV_SPINNER_PART_INDIC ：旋转弧（虚拟部分）

小部件和样式的工作原理与 Arc 相同。阅读其文档以获取详细说明。

三. LVGL GUI环形加载器控件的使用

1. 弧度长度(Arc length)

用这个函数设置旋转弧度lv_spinner_set_arc_length(spinner, deg)，就是转动条的弧度，写个代码验证下

void lvgl_spinner_arc_length_test(void)

    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, 0, -100);
    
    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 100);
    lv_spinner_set_arc_length(preload2,270);

2. 旋转速度(Spinning speed)

用这个函数设置旋转速度lv_spinner_set_spin_time(preload, time_ms)，第二个参数是设置xx毫秒转一圈，写个函数验证下

我写一个程序验证下，写个5ms转一圈，让你花眼！嘿嘿，GIF有丢帧，所以你还花不了

void lvgl_spinner_spin_speed_test(void)

    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, 0, -100);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 100);
    lv_spinner_set_spin_time(preload2, 50);

3. 旋转类型(Spin types)

您可以从更多旋转类型中进行选择：

• LV_SPINNER_TYPE_SPINNING_ARC 旋转弧线，在顶部放慢速度
• LV_SPINNER_TYPE_FILLSPIN_ARC 旋转弧线，在顶部放慢速度，但也可以拉伸弧线
•  LV_SPINNER_TYPE_CONSTANT_ARC 以恒定速度旋转弧

用这个函数设置lv_spinner_set_type(preload, LV_SPINNER_TYPE_...)

搞一个程序，安排

void lvgl_spinner_spin_type_test(void)

    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, -100, 0);
    lv_spinner_set_type(preload1, LV_SPINNER_TYPE_SPINNING_ARC);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_spinner_set_type(preload2, LV_SPINNER_TYPE_FILLSPIN_ARC);

    /*Create a Preloader object*/
    lv_obj_t* preload3 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload3, 100, 100);
    lv_obj_align(preload3, NULL, LV_ALIGN_CENTER, 100, 0);
    lv_spinner_set_type(preload3, LV_SPINNER_TYPE_CONSTANT_ARC);

4. 旋转方向(Spin direction)

用这个函数lv_spinner_set_dir(preload, LV_SPINNER_DIR_FORWARD/BACKWARD)设置旋转方向

void lvgl_spinner_spin_dir_test(void)

    /*Create a Preloader object*/
    lv_obj_t* preload1 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload1, 100, 100);
    lv_obj_align(preload1, NULL, LV_ALIGN_CENTER, -100, 0);
    lv_spinner_set_dir(preload1, LV_SPINNER_DIR_FORWARD);

    /*Create a Preloader object*/
    lv_obj_t* preload2 = lv_spinner_create(lv_scr_act(), NULL);
    lv_obj_set_size(preload2, 100, 100);
    lv_obj_align(preload2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_spinner_set_dir(preload2, LV_SPINNER_DIR_BACKWARD);

好了，完结了，更多精彩继续戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓