嵌入式GUI LVGL『Spinbox微调器控件』介绍

Posted 2021-09-06 Wireless_Link

一. LVGL GUI微调器控件的概念

Spinbox 包含一个数字文本，可通过按键或 API 函数增加或减少数字。Spinbox 的下面是修改后的 Text 区域。

二. LVGL GUI微调器小部件和样式

Spinbox 的主要部分被称为 LV_SPINBOX_PART_BG 使用所有典型背景样式属性的矩形背景。它还使用其文本样式属性描述标签的样式。
LV_SPINBOX_PART_CURSOR 是描述光标的虚拟部分。

三. LVGL GUI微调器控件的使用

1. 设置格式(Set format)

用这个函数设置微调器的格式，lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)，其中第二个参数digit_count是整个数字的位数，separator_position是小数点前面的位数，也就是整数位数

用这个函数设置lv_spinbox_set_padding_left(spinbox, cnt)符号(+/-)到数字之间的左间距

我们来写一个程序，创建4个微调器，第一个是默认的，第二个是设置数字总个数为5，整数是2个，第三个设置总个数是6个，整数是4个，第四个默认的，但是符号跟数字之间的间距是10

void lvgl_spinbox_set_format_test(void)
{
    lv_obj_t* spinbox1 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_obj_align(spinbox1, NULL, LV_ALIGN_CENTER, 0, -100);

    lv_obj_t* spinbox2 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_digit_format(spinbox2, 5, 2);
    lv_obj_align(spinbox2, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t* spinbox3 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_digit_format(spinbox3, 6, 4);
    lv_obj_align(spinbox3, NULL, LV_ALIGN_CENTER, 0, 100);

    lv_obj_t* spinbox4 = lv_spinbox_create(lv_scr_act(), NULL);
    lv_obj_align(spinbox4, NULL, LV_ALIGN_CENTER, 0, 200);
    lv_spinbox_set_padding_left(spinbox4, 10);
}

2. 值跟范围(Value and ranges)

用这个函数设置微调器的范围lv_spinbox_set_range(spinbox, min, max)

用这个函数设置微调器的值lv_spinbox_set_value(spinbox, num)

用这两个函数lv_spinbox_increment(spinbox)/lv_spinbox_decrement(spinbox)来增加/减小微调器的值

用这个函数来设置微调器的增幅

例子我们跟Event一起写一个

3. 事件(Events)

除了通用事件，还有以下特殊事件

• LV_EVENT_VALUE_CHANGED sent when the value has changed. (the value is set as event data as int32_t)

• LV_EVENT_INSERT sent by the ancestor Text area but shouldn't be used.

static void lv_spinbox_increment_event_cb(lv_obj_t* btn, lv_event_t e)
{
    if (e == LV_EVENT_SHORT_CLICKED || e == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_increment(spinbox);
    }
}

static void lv_spinbox_decrement_event_cb(lv_obj_t* btn, lv_event_t e)
{
    if (e == LV_EVENT_SHORT_CLICKED || e == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_decrement(spinbox);
    }
}


void lvgl_spinbox_test(void)
{
    spinbox = lv_spinbox_create(lv_scr_act(), NULL);
    lv_spinbox_set_range(spinbox, -1000, 90000);
    lv_spinbox_set_digit_format(spinbox, 5, 2);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_align(spinbox, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_coord_t h = lv_obj_get_height(spinbox);
    lv_obj_t* btn = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_size(btn, h, h);
    lv_obj_align(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
    lv_theme_apply(btn, LV_THEME_SPINBOX_BTN);
    lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_SYMBOL_PLUS);
    lv_obj_set_event_cb(btn, lv_spinbox_increment_event_cb);

    btn = lv_btn_create(lv_scr_act(), btn);
    lv_obj_align(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
    lv_obj_set_event_cb(btn, lv_spinbox_decrement_event_cb);
    lv_obj_set_style_local_value_str(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_SYMBOL_MINUS);
}

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