使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第三十二讲)

这一期讲解lvgl中微调框控件的基本使用，微调框（Spinbox）包含一个以十进制数形式显示的整数，该整数可能具有固定的小数点位置以及可配置的数位数量。其数值可以通过按键或应用程序编程接口（API）函数来增加或减少。在底层，微调框是一个:ref:lv_textarea（文本输入框），其行为经过扩展，以便能够在可配置的约束条件下查看和修改数值。

1.设置格式

（1）lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)；

该函数用来设置微调器的格式，参数二是整个数字的位数，参数三是整数位数。

（2）lv_spinbox_set_padding_left(spinbox, cnt)该函数用来设置符号(+/-)到数字之间的间距。

2.值跟范围

（1）Lv_spinbox_set_value(spinbox,num);用来设置微调器的值。

（2）lv_spinbox_set_range(spinbox,min,max);用来设置微调器的范围。

（3）lv_spinbox_increment(spinbox);用来增加值

（4）lv_spinbox_decrement(spinbox);用来减少值

3.事件

除了通用事件外还有特殊事件lv_EVENT_VALUE_CHANGE在值更改时发送。

4.代码实现

以下是代码的实现：

//Write codes screen_1_spinbox_1

//微调框主体的创建

ui->screen_1_spinbox_1 = lv_spinbox_create(ui->screen_1);

//位置

lv_obj_set_pos(ui->screen_1_spinbox_1, 191, 205);

//大小

lv_obj_set_width(ui->screen_1_spinbox_1, 70);

lv_obj_set_height(ui->screen_1_spinbox_1, 40);

//5位数字，3位小数

lv_spinbox_set_digit_format(ui->screen_1_spinbox_1, 5, 3);

//设置数字范围

lv_spinbox_set_range(ui->screen_1_spinbox_1, -99999, 99999);

lv_coord_t screen_1_spinbox_1_h = lv_obj_get_height(ui->screen_1_spinbox_1);

//加号按钮

ui->screen_1_spinbox_1_btn = lv_btn_create(ui->screen_1);

lv_obj_set_size(ui->screen_1_spinbox_1_btn, screen_1_spinbox_1_h, screen_1_spinbox_1_h);

lv_obj_align_to(ui->screen_1_spinbox_1_btn, ui->screen_1_spinbox_1, LV_ALIGN_OUT_RIGHT_MID, 5, 0);

lv_obj_set_style_bg_img_src(ui->screen_1_spinbox_1_btn, LV_SYMBOL_PLUS, 0);

lv_obj_add_event_cb(ui->screen_1_spinbox_1_btn, lv_screen_1_spinbox_1_increment_event_cb, LV_EVENT_ALL, NULL);

//减号按键

ui->screen_1_spinbox_1_btn_minus = lv_btn_create(ui->screen_1);

lv_obj_set_size(ui->screen_1_spinbox_1_btn_minus, screen_1_spinbox_1_h, screen_1_spinbox_1_h);

lv_obj_align_to(ui->screen_1_spinbox_1_btn_minus, ui->screen_1_spinbox_1, LV_ALIGN_OUT_LEFT_MID, -5, 0);

lv_obj_set_style_bg_img_src(ui->screen_1_spinbox_1_btn_minus, LV_SYMBOL_MINUS, 0);

lv_obj_add_event_cb(ui->screen_1_spinbox_1_btn_minus, lv_screen_1_spinbox_1_decrement_event_cb, LV_EVENT_ALL, NULL);

lv_obj_set_pos(ui->screen_1_spinbox_1, 191, 205);

复制代码

//Write style for screen_1_spinbox_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//背景白色，2像素蓝色边框，黑色字体，圆角5像素，内边距每边各10像素

lv_obj_set_style_bg_opa(ui->screen_1_spinbox_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_bg_color(ui->screen_1_spinbox_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_bg_grad_dir(ui->screen_1_spinbox_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_border_width(ui->screen_1_spinbox_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_border_opa(ui->screen_1_spinbox_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_border_color(ui->screen_1_spinbox_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_border_side(ui->screen_1_spinbox_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_top(ui->screen_1_spinbox_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_right(ui->screen_1_spinbox_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_bottom(ui->screen_1_spinbox_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_left(ui->screen_1_spinbox_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_text_color(ui->screen_1_spinbox_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_text_font(ui->screen_1_spinbox_1, &lv_font_montserratMedium_12, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_text_opa(ui->screen_1_spinbox_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_text_letter_space(ui->screen_1_spinbox_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_radius(ui->screen_1_spinbox_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_shadow_width(ui->screen_1_spinbox_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

复制代码

//Write style for screen_1_spinbox_1, Part: LV_PART_CURSOR, State: LV_STATE_DEFAULT.
//光标样式

//文字白色

lv_obj_set_style_text_color(ui->screen_1_spinbox_1, lv_color_hex(0xffffff), LV_PART_CURSOR|LV_STATE_DEFAULT);

lv_obj_set_style_text_font(ui->screen_1_spinbox_1, &lv_font_montserratMedium_12, LV_PART_CURSOR|LV_STATE_DEFAULT);

lv_obj_set_style_text_opa(ui->screen_1_spinbox_1, 255, LV_PART_CURSOR|LV_STATE_DEFAULT);

lv_obj_set_style_bg_opa(ui->screen_1_spinbox_1, 255, LV_PART_CURSOR|LV_STATE_DEFAULT);

//背景蓝色

lv_obj_set_style_bg_color(ui->screen_1_spinbox_1, lv_color_hex(0x2195f6), LV_PART_CURSOR|LV_STATE_DEFAULT);

lv_obj_set_style_bg_grad_dir(ui->screen_1_spinbox_1, LV_GRAD_DIR_NONE, LV_PART_CURSOR|LV_STATE_DEFAULT);

复制代码

//Write style state: LV_STATE_DEFAULT for &style_screen_1_spinbox_1_extra_btns_main_default
//按钮样式

static lv_style_t style_screen_1_spinbox_1_extra_btns_main_default;

ui_init_style(&style_screen_1_spinbox_1_extra_btns_main_default);

//文字白色

lv_style_set_text_color(&style_screen_1_spinbox_1_extra_btns_main_default, lv_color_hex(0xffffff));

lv_style_set_text_font(&style_screen_1_spinbox_1_extra_btns_main_default, &lv_font_montserratMedium_12);

lv_style_set_text_opa(&style_screen_1_spinbox_1_extra_btns_main_default, 255);

lv_style_set_bg_opa(&style_screen_1_spinbox_1_extra_btns_main_default, 255);

//背景蓝色

lv_style_set_bg_color(&style_screen_1_spinbox_1_extra_btns_main_default, lv_color_hex(0x2195f6));

lv_style_set_bg_grad_dir(&style_screen_1_spinbox_1_extra_btns_main_default, LV_GRAD_DIR_NONE);

lv_style_set_border_width(&style_screen_1_spinbox_1_extra_btns_main_default, 0);

//5像素圆角

lv_style_set_radius(&style_screen_1_spinbox_1_extra_btns_main_default, 5);

lv_style_set_shadow_width(&style_screen_1_spinbox_1_extra_btns_main_default, 0);

lv_obj_add_style(ui->screen_1_spinbox_1_btn, &style_screen_1_spinbox_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_add_style(ui->screen_1_spinbox_1_btn_minus, &style_screen_1_spinbox_1_extra_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

本文章由威三学社出品

对课程感兴趣可以私信联系