合宙Air724UG LuatOS-Air LVGL API控件-微调框 (Spinbox)

news2024/9/25 13:52:02

微调框 (Spinbox)

微调框用于数值调整，有时候我们希望获取一个用户输入的数值，但是又不希望弹出键盘，可以使用微调框。

示例代码

-- 回调函数
function spinbox_increment_event_cb(obj, event)
    if event == lvgl.EVENT_SHORT_CLICKED then
        lvgl.spinbox_increment(spinbox)
    end
end

function spinbox_decrement_event_cb(obj, event)
    if event == lvgl.EVENT_SHORT_CLICKED then
        lvgl.spinbox_decrement(spinbox)
    end
end

-- 创建按钮
function cBt(cont, txt, cb)
    local btn = lvgl.btn_create(cont, nil)
    lvgl.obj_set_event_cb(btn, cb) 
    local label = lvgl.label_create(btn, nil)
    lvgl.label_set_text(label, txt)
end

-- 容器
cont = lvgl.cont_create(lvgl.scr_act(), nil)
lvgl.disp_load_scr(cont)
lvgl.cont_set_fit(cont, lvgl.FIT_TIGHT)
lvgl.obj_align(cont, nil, lvgl.ALIGN_CENTER, 0, 0) 
lvgl.cont_set_layout(cont, lvgl.LAYOUT_CENTER)

-- 按钮一
cBt(cont, "plus", spinbox_increment_event_cb)

-- 微调框
spinbox = lvgl.spinbox_create(cont, nil)
lvgl.spinbox_set_range(spinbox, -1000, 25000)
lvgl.spinbox_set_digit_format(spinbox, 5, 2)
lvgl.spinbox_step_prev(spinbox)

-- 按钮二
cBt(cont, "minus", spinbox_decrement_event_cb)

创建

微调框的创建函数是 spinbox_create，创建也比较简单。

spinbox = lvgl.spinbox_create(cont, nil)

这里有点需要注意，创建的微调框只有这个:

创建微调框.png

增大减小按钮是需要自己通过代码创建的，所以上面的示例代码看起来比较多。示例创建的微调框是这个样子:

示例微调框.png

数值调整

微调框的数值调整函数有两个，加一个单位lvgl.spinbox_increment，减一个单位lvgl.spinbox_decrement。

lvgl.spinbox_increment(spinbox)
lvgl.spinbox_decrement(spinbox)

lvgl.spinbox_set_range 可以设置微调框的数值显示范围，lvgl.spinbox_set_value 可以直接手动设置数值，lvgl.spinbox_set_step 是需要和上面的 lvgl.spinbox_increment，lvgl.spinbox_decrement两个函数配合使用的，增减的步长默认是 1，这个函数还是很有用的，我们可以把步长设置成 7，然后看看 1000 - 7 到底是多少。

lvgl.spinbox_set_range(spinbox, 0, 1000)
lvgl.spinbox_set_value(spinbox, 1000)
lvgl.spinbox_set_digit_format(spinbox, 4, 0)
lvgl.spinbox_set_step(spinbox, 7)

格式

通过函数 lvgl.spinbox_set_digit_format 可以设置微调框的数字显示格式，第一个参数是微调框的显示位数，是总位数。第二个参数是小数点前面的位数，0 表示没有小数点。除了位数显示，还可以在符号和数字之间添加空格 lvgl.spinbox_set_padding_left。

lvgl.spinbox_set_digit_format(spinbox, 8, 4)
lvgl.spinbox_set_padding_left(spinbox, 3)

图片.png

事件

数值更改时会有 lvgl.EVENT_VALUE_CHANGED 消息收到，但是结合一般微调框的使用方法，实际上都是对按钮添加回调，然后通过函数去更改微调框的数值。

API

lvgl.spinbox_create

调用	lvgl.spinbox_create(par, copy)
功能	创建一个微调框对象
返回	指向创建的微调框的指针
参数
par	指向对象的指针, 它将是新键对象的父对象
copy	指向微调框对象的指针, 如果不为 nil, 则将从其复制新对象

lvgl.spinbox_set_range

调用	lvgl.spinbox_set_range(spinbox, min, max)
功能	设置微调框的最小值和最大值
参数
spinbox	指向微调框对象的指针
min	最小值
max	最大值

lvgl.spinbox_set_range

调用	lvgl.spinbox_set_range(spinbox, val)
功能	设置微调框的数值
参数
spinbox	指向微调框对象的指针
val	需要设置的数值

lvgl.spinbox_set_digit_format

调用	lvgl.spinbox_set_digit_format(spinbox, count, pos)
功能	设置微调框数值格式
参数
spinbox	指向微调框对象的指针
count	显示总位数
pos	小数点位置，也可以理解成整数位数，0 表示没有小数点。