5、LVGL控件-滑轮、滑动条、圆弧

Couvrir洪荒猛兽

发布时间 2024.07.01阅读数 74 评论数 0

本篇文章目录导航

♠♠ LVGL控件-滑轮、滑动条、圆弧
♣♣♣♣ 一、LVGL 滑轮部件
♦♦♦♦♦♦♦♦ 1.1 滑轮部件组成部分
♦♦♦♦♦♦♦♦ 1.2 滑轮部件基本API
♦♦♦♦♦♦♦♦ 1.3 实验小演示
♣♣♣♣ 二、LVGL 滑动条部件
♦♦♦♦♦♦♦♦ 2.1 滑动条部件组成部分
♦♦♦♦♦♦♦♦ 2.2 滑动条部件基本API
♦♦♦♦♦♦♦♦ 2.3 实验小演示（亮度调节器）
♦♦♦♦♦♦♦♦ 2.4 实验小演示
♣♣♣♣ 三、LVGL 圆弧部件
♦♦♦♦♦♦♦♦ 3.1 圆弧部件组成部分
♦♦♦♦♦♦♦♦ 3.2 圆弧部件基本API
♦♦♦♦♦♦♦♦ 3.3 实验小演示（调节器）
♦♦♦♦♦♦♦♦ 3.4 实验小演示（动态加载）

LVGL控件-滑轮、滑动条、圆弧

一、LVGL 滑轮部件

滚轮部件常用于多选一的场景，它以滚轮的形式来展现多个选项。类似于下拉列表。

效果图：

1.1 滑轮部件组成部分

主体（LV_PART_MAIN）
选项框（LV_PART_SELECTED）

1.2 滑轮部件基本API

创建滚轮部件：

lv_obj_t *roller = lv_roller_create(parent);

设置选项间隔：

lv_obj_set_style_text_line_space(roller, 30, LV_STATE_DEFAULT);

设置选项内容、滚动模式：

enum{
    LV_ROLLER_MODE_NORMAL,    /* 正常模式 */
    LV_ROLLER_MODE_INFINITE,  /* 无限循环模式，对内存占用较大 */
};

lv_roller_set_options(roller, "a\nb\nc\d", LV_ROLLER_MODE_NORMAL);

设置当前所选项：

lv_roller_set_selected(roller, 3, LV_ANIM_ON);

设置可见行数：

lv_roller_set_visible_row_count(roller, 2);

获取选项内容：

lv_roller_get_selected(roller);                          /* 获取索引 */

char buf[10];
lv_roller_get_selected_str(roller, buf, sizeof(buf));    /* 获取选项文本 */

1.3 实验小演示

设计两个滑轮，一个正常模式，一个无限循环模式。

lv_obj_t *roller1, *roller2;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件类型 */
    lv_obj_t *obj = lv_event_get_target(e);         /* 获取对象 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        char buf[10];
        lv_roller_get_selected_str(obj, buf, sizeof(buf));    /* 获取选项文本 */
        if(obj == roller1)
        {
            printf("The Left Roller:%d %s\n", lv_roller_get_selected(obj), buf);
        }else
        {
            printf("The Right Roller:%d %s\n", lv_roller_get_selected(obj), buf);
        }
    }
}

void my_gui(void)
{
    /**********************第一个滑轮*************************/
    roller1 = lv_roller_create(lv_scr_act());                               /* 创建滑轮部件 */
    lv_obj_align(roller1, LV_ALIGN_CENTER, -150, 0);

    lv_obj_set_style_text_line_space(roller1, 30, LV_STATE_DEFAULT);        /* 设置选项间隔 */
    lv_roller_set_options(roller1, "a\nb\nc\nd", LV_ROLLER_MODE_NORMAL);    /* 设置正常模式 */
    lv_roller_set_selected(roller1, 0, LV_ANIM_ON);                         /* 设置当前所选项 */
    lv_roller_set_visible_row_count(roller1, 2);                            /* 设置当前可见行数 */

    lv_obj_add_event_cb(roller1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */

    /**********************第二个滑轮*************************/
    roller2 = lv_roller_create(lv_scr_act());                               /* 创建滑轮部件 */
    lv_obj_align(roller2, LV_ALIGN_CENTER, 150, 0);

    lv_obj_set_style_text_line_space(roller2, 30, LV_STATE_DEFAULT);        /* 设置选项间隔 */
    lv_roller_set_options(roller2, "A\nB\nC\nD", LV_ROLLER_MODE_INFINITE);  /* 设置循环模式 */
    lv_roller_set_selected(roller2, 2, LV_ANIM_ON);                         /* 设置当前所选项 */
    lv_roller_set_visible_row_count(roller2, 3);                            /* 设置当前可见行数 */

    lv_obj_add_event_cb(roller2, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */
}

演示图片：
演示视频：LVGL滑轮部件

二、LVGL 滑动条部件

滑块部件常用于调节某个参数的值，它以直线滑动的形式来修改数值。

效果图：

2.1 滑动条部件组成部分

主体（LV_PART_MAIN）
指示器（LV_PART_INDICATOR）
旋钮（LV_PART_KNOB）

2.2 滑动条部件基本API

创建滑块部件：

lv_obj_t *slider = lv_slider_create(parent);

设置大小、当前值、范围值：

lv_obj_set_size(slider, 20, 200);                /* 高度>宽度时，滑块为纵向 */
lv_slider_set_value(slider, 50, LV_ANIM_OFF);    /* 设置当前值 */
lv_slider_set_range(slider, -100, 100);          /* 设置范围值 */

获取当前值：

lv_slider_get_value(slider);

模式设置：

lv_slider_set_mode(slider, LV_SLIDER_MODE_...);

设置、获取左值：

lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);    /* 设置左值 */
lv_slider_get_left_value(slider);                     /* 获取左值 */

2.3 实验小演示（亮度调节器）

设计一个亮度调节器。

lv_obj_t *label;
lv_obj_t *slider;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件类型 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        uint8_t value = lv_slider_get_value(slider) * (255 - 55) * 0.01 + 55;
        lv_label_set_text_fmt(label, "%d%%", lv_slider_get_value(slider));

        /* 设置滑动条背景透明度 */
        lv_obj_set_style_bg_opa(slider, value, LV_PART_INDICATOR);
    }
}

void my_gui(void)
{
    /****************************标签*****************************/
    label = lv_label_create(lv_scr_act());          /* 创建标签 */
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -150);  /* 调整标签位置 */
    lv_label_set_text(label, "0%");                 /* 设置标签文本 */

    /****************************滑动条*****************************/
    slider = lv_slider_create(lv_scr_act());        /* 创建滑动条 */
    lv_obj_center(slider);                          /* 调整滑动条位置 */

    lv_obj_set_size(slider, 20, 200);               /* 高度>宽度时，滑块为纵向 */
    lv_slider_set_value(slider, 0, LV_ANIM_OFF);    /* 设置当前值 */
    lv_slider_set_range(slider, 0, 100);            /* 设置范围值 */

    /* 修改滑动条背景颜色，绿色 */
    lv_obj_set_style_bg_color(slider, lv_color_hex(0x00ff00), LV_PART_INDICATOR);
    /* 设置滑动条背景透明度 */
    lv_obj_set_style_bg_opa(slider, 55, LV_PART_INDICATOR);
    /* 添加改变事件 */
    lv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

演示图片：
演示视频：LVGL滑动条：亮度调节器

2.4 实验小演示

设计一个左右可调的调节器。

lv_obj_t *label;
lv_obj_t *slider;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件类型 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        lv_label_set_text_fmt(label, "%d - %d", lv_slider_get_left_value(slider), lv_slider_get_value(slider));
    }
}

void my_gui(void)
{
    /****************************标签*****************************/
    label = lv_label_create(lv_scr_act());              /* 创建标签 */
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -30);       /* 调整标签位置 */
    lv_label_set_text(label, "20 - 50");                /* 设置标签文本 */

    /****************************滑动条*****************************/
    slider = lv_slider_create(lv_scr_act());            /* 创建滑动条 */
    lv_obj_center(slider);                              /* 调整滑动条位置 */

    lv_obj_set_size(slider, 400, 20);                   /* 高度<宽度时，滑块为横向 */
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);       /* 设置当前值 */
    lv_slider_set_range(slider, 0, 100);                /* 设置范围值 */

    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);   /* 设置模式：范围 */
    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);  /* 设置左值 */

    /* 添加改变事件 */
    lv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

演示图片：
演示视频：LVGL滑动条：左右可调的调节器

三、LVGL 圆弧部件

圆弧部件以弧形滑动的形式来调节、显示某个参数的值。
角度和方向：零度位于对象的右侧（3 点钟方向），度数按顺时针方向递增。角度应在[0;360] 范围内。

效果图：

3.1 圆弧部件组成部分

背景弧（LV_PART_MAIN）
前景弧（LV_PART_INDICATOR）
旋钮（LV_PART_KNOB）

3.2 圆弧部件基本API

创建圆弧部件：

lv_obj_t *arc = lv_arc_create(parent);

设置范围值、当前值：

lv_arc_set_range(arc, 0, 200);    /* 设置范围值 */
lv_arc_set_value(arc, 80);        /* 设置当前值(需要在范围值之内) */

设置圆弧角度（不建议使用）：

lv_arc_set_angles(arc, 135, 270);    /* 设置前景狐角度 */
lv_arc_set_bg_angles(arc, 135, 45);  /* 设置背景狐角度 */

设置旋转角度（顺时针旋转）：

lv_arc_set_rotation(arc, 180);

获取当前值：

lv_arc_get_value(arc);
static void event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);
    printf("%d \n", lv_arc_get_value(target));
}

lv_obj_add_event_cb(arc,event_cb, LV_EVENT_VALUE_CHANGED, NULL);

设置模式、圆弧绘制速率：

lv_arc_set_mode(arc, LV_PART_MODE_REVERSE);    /* 设置模式 */
lv_arc_set_change_rate(arc, 90);               /* 绘制速率：90°/s */

3.3 实验小演示（调节器）

设计一个标签、滑动条和圆弧，三个部件进行同步。

lv_obj_t *label, *arc, *slider;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);        /* 获取触发事件类型 */
    lv_obj_t *obj = lv_event_get_target(e);             /* 获取对象 */

    if(obj == arc)
    {
        /* 滑动条设置当前值 */
        lv_slider_set_value(slider, lv_arc_get_value(arc), LV_ANIM_OFF);
        /* 同步标签文本 */
        lv_label_set_text_fmt(label, "%d%%", lv_arc_get_value(arc));
    }else{
        /* 设置当前值(需要在范围值之内) */
        lv_arc_set_value(arc, lv_slider_get_value(slider));
        /* 同步标签文本 */
        lv_label_set_text_fmt(label, "%d%%", lv_slider_get_value(slider));
    }
}

void my_gui(void)
{
    /****************************标签*****************************/
    label = lv_label_create(lv_scr_act());              /* 创建标签 */
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -120);      /* 调整标签位置 */
    lv_label_set_text(label, "50%");                    /* 设置标签文本 */

    /****************************圆弧*******************************/
    arc = lv_arc_create(lv_scr_act());                  /* 创建圆弧部件 */
    lv_obj_center(arc);

    lv_arc_set_range(arc, 0, 100);                      /* 设置范围值 */
    lv_arc_set_value(arc, 50);                          /* 设置当前值(需要在范围值之内) */

    /* 添加改变事件 */
    lv_obj_add_event_cb(arc, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    /****************************滑动条*****************************/
    slider = lv_slider_create(lv_scr_act());            /* 创建滑动条 */
    lv_obj_align(slider, LV_ALIGN_CENTER, 0, -100);     /* 调整滑动条位置 */

    lv_obj_set_size(slider, 400, 10);                   /* 高度<宽度时，滑块为横向 */
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);       /* 设置当前值 */
    lv_slider_set_range(slider, 0, 100);                /* 设置范围值 */

    /* 添加改变事件 */
    lv_obj_add_event_cb(slider, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

演示图片：
演示视频：LVGL圆弧：同步标签、滑动条的调节器

3.4 实验小演示（动态加载）

设计一个正在加载中的页面。

lv_obj_t *arc;
uint8_t bar_value = 0;

static void timer_cb(lv_timer_t *timer)
{
    if(bar_value < 100)
    {
        bar_value++;                                /* 数值自增 */
        lv_arc_set_value(arc, bar_value);           /* 设置当前值(需要在范围值之内) */
    }
}


void my_gui(void)
{
    /****************************圆弧*******************************/
    arc = lv_arc_create(lv_scr_act());              /* 创建圆弧部件 */
    lv_obj_center(arc);

    lv_arc_set_rotation(arc, 270);                  /* 设置旋转角度（顺时针旋转） */
    lv_arc_set_bg_angles(arc, 0, 360);              /* 设置背景狐角度 */

    lv_obj_remove_style(arc, NULL, LV_PART_KNOB);   /* 移除旋钮 */
    lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE); /* 使对象不可点击 */

    lv_arc_set_range(arc, 0, 100);                  /* 设置范围值 */
    lv_arc_set_value(arc, bar_value);               /* 设置当前值(需要在范围值之内) */

    /***************************定时器***************************/
    lv_timer_create(timer_cb, 100, NULL);           /* 初始化定时器 */
}

图片分析代码：
演示视频：LVGL圆弧：动态加载（正在加载中）

总结

在本篇中，主要对滑动的部件进行了一个归纳，分别对滑轮、滑动条、圆弧设计了几个市面上通用的模型小实验，方便用户开发时进行复制粘贴。

LVGL

原创文章作者：Couvrir洪荒猛兽。如若转载，请注明出处：古月居 https://www.guyuehome.com/47339

打赏 0

上一篇：4、LVGL控件-环形加载器、LED、列表、下拉列表

下一篇：6、LVGL控件-线条、图片、按钮矩阵

5、LVGL控件-滑轮、滑动条、圆弧

Couvrir洪荒猛兽

本篇文章目录导航

LVGL控件-滑轮、滑动条、圆弧

一、LVGL 滑轮部件

1.1 滑轮部件组成部分

1.2 滑轮部件基本API

1.3 实验小演示

二、LVGL 滑动条部件

2.1 滑动条部件组成部分

2.2 滑动条部件基本API

2.3 实验小演示（亮度调节器）

2.4 实验小演示

三、LVGL 圆弧部件

3.1 圆弧部件组成部分

3.2 圆弧部件基本API

3.3 实验小演示（调节器）

3.4 实验小演示（动态加载）

总结

为你推荐

Python从入门到放弃——List

精选《STM32 HAL库》RCC 相关系列函数详尽解析—— HAL_RCC_OscConfig()

Python从入门到放弃——while循环

精选STM32智能家居小助手

网络通信（二）数据类型和相关的库函数

《STM32 HAL库》RCC 相关系列函数详尽解析——SystemClock_Config() & HAL_RCC_ClockConfig()

评论（0）

关于作者

Couvrir洪荒猛兽

25

0

321

4

精选linux内核模块

精选STM32F429 Discovery开发板应用：实现USB虚拟串口（VPC）

STM32F429 Discovery开发板应用：使用FreeRTOS队列+DMA双缓存实现串口数据接收

相关推荐

《STM32 HAL库》GPIO初始化系列函数详尽解析

精选1、LVGL基础对象（lv_obj）

基于STM32的传送带系统

精选【proteus经典实战】16X192点阵程序

精选网络通信(一)——Socket

精选《STM32 HAL库》CAN通信系列函数详尽解析——HAL_CAN_Init（）

热门泡泡

30积分 失眠，聊聊自己搞ROS的心得体会吧

ros学习路线

30积分 TF_REPEATED_DATA ignoring data错误

各位大佬，有什么ROS定位算法推荐吗

5积分 想买能用ROS2的开发套件。或者开发板

5积分 ros中启动gazebo时报错

TA的专栏

STM32 LVGL图形库

专栏导航

给作者打赏

忘记密码

修改头像

添加你感兴趣的标签

举报类型（必选）

举报详情（选填）

30积分失眠，聊聊自己搞ROS的心得体会吧

5积分想买能用ROS2的开发套件。或者开发板