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

本篇文章目录导航

♠♠ 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);

点击5、LVGL控件-滑轮、滑动条、圆弧——古月居可查看全文