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

微调框 (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)

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

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

数值调整

微调框的数值调整函数有两个,加一个单位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_incrementlvgl.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)

事件

数值更改时会有 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 表示没有小数点。

lvgl.spinbox_set_step

调用 lvgl.spinbox_set_step(spinbox, step)
功能 设置微调框的设置步长
参数
spinbox 指向微调框对象的指针
step 需要设置的设置步长

lvgl.spinbox_set_padding_left

调用 lvgl.spinbox_set_padding_left(spinbox, n)
功能 设置微调框的空格个数
参数
spinbox 指向微调框对象的指针
n 符号位和数值之间空格的个数

lvgl.spinbox_get_value

调用 lvgl.spinbox_get_value(spinbox)
功能 获取微调框的数值
返回 微调框的数值
参数
spinbox 指向微调框对象的指针

lvgl.spinbox_increment

调用 lvgl.spinbox_increment(spinbox)
功能 微调框的数值增加一个单位
参数
spinbox 指向微调框对象的指针

lvgl.spinbox_decrement

调用 lvgl.spinbox_decrement(spinbox)
功能 微调框的数值减小一个单位
参数
spinbox 指向微调框对象的指针
相关推荐
l5317981511 年前
合宙Air724UG LuatOS-Air lvgl字库
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-截屏(Screenshots)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-图片(Gif)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-二维码(Qrcode)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-标签 (Label)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-窗口 (Window)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-表格(Table)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-开关 (Switch)
air724ug
l5317981511 年前
合宙Air724UG LuatOS-Air LVGL API控件-页面 (Page)
air724ug