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

一. 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);
}

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

猜你喜欢

转载自blog.csdn.net/XiaoXiaoPengBo/article/details/114064631