一.前言
GUI Guider作为一个免费的LVGL图形化设计软件，已经在开发中得到广泛应用。然而，GUI Guider在控件功能的设计方面并不全面。基于此，笔者结合正点原子和百问网的LVGL教程，进行补充，从而实现以GUI Guider为主，自己写代码为辅的GUI设计过程。
二.控件篇
复选框部件(lv_checkbox)
1.设置复选框文本
GUI Guider只能动态设置文本
lv_checkbox_set_text(ui->screen_1_cb_1, "checkbox");实际上，在LVGL中，还支持静态设置文本
lv_checkbox_set_text_static(cb2, "Checkbox2");二者区别看函数定义便知
void lv_checkbox_set_text(lv_obj_t * obj, const char * txt)
{
...
strcpy(cb->txt, txt);
...
}
void lv_checkbox_set_text_static(lv_obj_t * obj, const char * txt)
{
...
cb->txt = (char *)txt;
...
}2.设置复选框状态
LVGL添加、清除状态API
void lv_obj_add_state(lv_obj_t * obj, lv_state_t state);
void lv_obj_clear_state(lv_obj_t * obj, lv_state_t state);与复选框相关的状态枚举
enum {
LV_STATE_CHECKED = 0x0001,
LV_STATE_DISABLED = 0x0080,
};两者组合就可以实现复选框默认复选、禁止复选的状态
3.获取复选框状态
LVGL获取状态API
bool lv_obj_has_state(const lv_obj_t * obj, lv_state_t state);下拉列表部件(lv_dropdown)
1.添加选项
/*函数原型*/
void lv_dropdown_set_options(lv_obj_t * obj, const char * options);
void lv_dropdown_add_option(lv_obj_t * obj, const char * option, uint32_t pos);
void lv_dropdown_set_options_static(lv_obj_t * obj, const char * options);方式1
/*动态分配内存，添加a,b,c,c四个选项，选项经过复制后保存*/
lv_dropdown_set_options(lv_ddlist1, "a\nb\nc\nd");
/*添加选项及其下标*/
lv_dropdown_add_option(lv_ddlist1, "e", 0);效果：选项e插到了第一个，而不是覆盖a
方式2
/*静态分配内存，直接使用选项字符串的地址，因此在整个选项存在的声明周期内，不能改变选项字符串的内容*/
lv_dropdown_set_options_static(lv_ddlist2, "a\nb\nc\nd");效果
2.设置默认显示的选项、获取当前选项
/*sel_opt为选项索引，第一个为0，第二个为1*/
void lv_dropdown_set_selected(lv_obj_t * obj, uint16_t sel_opt)/*获取当前选项的索引、内容*/
uint16_t lv_dropdown_get_selected(const lv_obj_t * obj);
void lv_dropdown_get_selected_str(const lv_obj_t * obj, char * buf, uint32_t buf_size);
3.设置列表展开方向以及下拉列表图标
默认
设置左侧展开和下拉图标朝左
lv_dropdown_set_dir(lv_ddlist1, LV_DIR_LEFT);
lv_dropdown_set_symbol(lv_ddlist1, LV_SYMBOL_LEFT);效果
4.设置固定常显文本(该文本可以不是选项，文本不会因为选项的改变而改变)
lv_dropdown_set_text(lv_ddlist1, "Options");效果
标签部件(lv_label)
1.文本设置
/*text字符串中插入'\n'可以实现换行效果*/
void lv_label_set_text(lv_obj_t * obj, const char * text);
void lv_label_set_text_fmt(lv_obj_t * obj, const char * fmt, ...);//此函数不能设置'%f','%lf'的数据，除非先用sprintf再用上面那个函数
void lv_label_set_text_static(lv_obj_t * obj, const char * text);2.重新着色
lv_label_set_text_fmt(lv_label2, "#0000ff Demo# #ff0000 %d#", 16);
lv_label_set_recolor(lv_label2, true);
3.文本长模式
（1）默认情况下
/*宽高根据文本内容自适应，长文本模式为包裹(WRAP)模式*/
lv_label_set_long_mode(lv_label2, LV_LABEL_LONG_WRAP);
lv_obj_set_size(lv_label2, LV_SIZE_CONTENT, LV_SIZE_CONTENT);效果
（2）LV_LABEL_LONG_DOT
lv_label_set_long_mode(lv_label2, LV_LABEL_LONG_DOT);
lv_obj_set_size(lv_label2, 200, LV_SIZE_CONTENT);效果（多余部分显示3个点）
（3）LV_LABEL_LONG_SCROLL
lv_label_set_long_mode(lv_label2, LV_LABEL_LONG_SCROLL);
lv_obj_set_size(lv_label2, 200, LV_SIZE_CONTENT);效果（左右来回滚动，一个方向滚到头后换另一个方向滚）
（4）LV_LABEL_LONG_SCROLL_CIRCULAR
lv_label_set_long_mode(lv_label2, LV_LABEL_LONG_SCROLL_CIRCULAR);
lv_obj_set_size(lv_label2, 200, LV_SIZE_CONTENT);效果（循环滚动，总是朝一个方向滚动）
（5）LV_LABEL_LONG_CLIP
lv_label_set_long_mode(lv_label2, LV_LABEL_LONG_CLIP);
lv_obj_set_size(lv_label2, 200, LV_SIZE_CONTENT);效果（根据设定宽度裁剪，多余部分不显示）
4.设置选择开始、结束索引
void lv_label_set_text_sel_start(lv_obj_t * obj, uint32_t index);
void lv_label_set_text_sel_end(lv_obj_t * obj, uint32_t index);例如
lv_label_set_text_fmt(lv_label2, "ABCDEFGHIJKLMNOPQRSTUVWXYZ");
lv_label_set_text_sel_start(lv_label2, 5);
lv_label_set_text_sel_end(lv_label2, 10);此时直接显示lv_label2，仍然显示的是全部文本，因为以上两个函数仅用于内部跟踪选定文本的范围，而不会直接影响文本的显示。
此时获取文本内容，再将获取的内容进行显示，才会有截取的效果
// 获取选定的文本
const char *full_text = lv_label_get_text(lv_label2);
uint32_t sel_start = lv_label_get_text_selection_start(lv_label2);
uint32_t sel_end = lv_label_get_text_selection_end(lv_label2);
// 截取选定的文本
size_t len = sel_end - sel_start;
char selected_text[len + 1];
strncpy(selected_text, &full_text[sel_start], len);
selected_text[len] = '\0'; // 确保字符串以 null 结尾
// 设置选定的文本
lv_label_set_text(lv_label2, selected_text);效果
5.API
线条部件(lv_line)
坐标系
从上到下增大为y正方向
从左到右增大为x正方向
1.设置连接点并绘制
static lv_point_t line_points[480];
for (int i = 0 ; i < 480 ; i++)
{
line_points[i].x = i;
line_points[i].y = 160 + 160 * sin(i * 2 * 3.1415926 / 480);
}
lv_line_set_points(line1, line_points, 480);
lv_obj_set_size(line1,LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(line1);效果
2.倒Y操作
lv_line_set_y_invert(line1, true);效果
3.API
滚轮部件(lv_roller)
1.添加选项
/*换行符用以分隔选项*/
static const char *roller_map = "a\nb\nc\nd\n";
lv_roller_set_options(roller, roller_map, LV_ROLLER_MODE_INFINITE);
/*LV_ROLLER_MODE_INFINITE，循环模式，拉到最后一个会循环显示第一个*/
/*LV_ROLLER_MODE_NORMAL，正常模式，拉到最后一个就到底了*/2.设置可见选项数量（一次最多显示row_cnt个选项）
void lv_roller_set_visible_row_count(lv_obj_t * obj, uint8_t row_cnt);
3.API
滑块部件(lv_slider)
1.设置范围和当前值
static inline void lv_slider_set_range(lv_obj_t * obj, int32_t min, int32_t max);
static inline void lv_slider_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);2.设置滑块模式
static inline void lv_slider_set_mode(lv_obj_t * obj, lv_slider_mode_t mode)
LV_SLIDER_MODE_RANGE：从设定绘制值开始绘制到当前值
LV_SLIDER_MODE_SYMMETRICAL：从0值开始绘制到当前值
LV_SLIDER_MODE_NORMAL：从滑块的最左侧绘制到当前值
3.设定绘制值
void lv_bar_set_start_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);
4.设置只能通过滑杆改变值（而不能通过单击滑杆部位改变值）
lv_obj_clear_flag(slider1, LV_OBJ_FLAG_ADV_HITTEST);5.API
开关部件(lv_switch)
1.获取开关部件状态
/*state为LV_STATE_CHECKED
返回true为开启，否则为关闭*/
bool lv_obj_has_state(const lv_obj_t * obj, lv_state_t state)
表格部件(lv_table)
1.设置行数、列数
void lv_table_set_col_cnt(lv_obj_t * obj, uint16_t col_cnt);
void lv_table_set_row_cnt(lv_obj_t * obj, uint16_t row_cnt);2.设置表格内容
void lv_table_set_cell_value(lv_obj_t * obj, uint16_t row, uint16_t col, const char * txt);
void lv_table_set_cell_value_fmt(lv_obj_t * obj, uint16_t row, uint16_t col, const char * fmt, ...);//此函数不能设置'%f','%lf'的数据，除非先用sprintf再用上面那个函数
3.设置、获取用户数据（用户数据不会显式在表格上）
void lv_table_set_cell_user_data(lv_obj_t * obj, uint16_t row, uint16_t col, void * user_data);
void * lv_table_get_cell_user_data(lv_obj_t * obj, uint16_t row, uint16_t col);
例如
typedef struct{
int id;
double value;
}UserData;
UserData *data = (UserData *)malloc(sizeof(UserData));
data->id = 567;
data->value = 3.14;
lv_table_set_cell_user_data(table, 0, 0, data);
UserData *getdata = (UserData *)lv_table_get_cell_user_data(table, 0, 0);
lv_obj_t *label1 = lv_label_create(lv_scr_act());
lv_label_set_text_fmt(label1, "User Data id : %d", getdata->id);
lv_obj_set_pos(label1, 0, 0);
lv_obj_t *label2 = lv_label_create(lv_scr_act());
char s[105];
sprintf(s, "User Data value : %.2lf", getdata->value);
lv_label_set_text(label2, s);
lv_obj_set_pos(label2, 150, 0);效果
4.向右合并单元格（一次只能合并当前列和右边第一列，可以链式向右合并，但不能垂直合并）
例如，合并第一行第一列和第二列
lv_table_add_cell_ctrl(table, 0, 0, LV_TABLE_CELL_CTRL_MERGE_RIGHT);若要合并第一行所有列，则链式合并
lv_table_add_cell_ctrl(table, 0, 0, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
lv_table_add_cell_ctrl(table, 0, 1, LV_TABLE_CELL_CTRL_MERGE_RIGHT);
lv_table_add_cell_ctrl(table, 0, 2, LV_TABLE_CELL_CTRL_MERGE_RIGHT);效果
5.API
文本区域部件(lv_textarea)
1.添加字符和文本
void lv_textarea_add_char(lv_obj_t * obj, uint32_t c);
void lv_textarea_add_text(lv_obj_t * obj, const char * txt);2.删除字符
void lv_textarea_del_char(lv_obj_t * obj);//删除光标左侧的字符，相当于backspace
void lv_textarea_del_char_forward(lv_obj_t * obj);//删除光标右侧的字符，相当于delete3.设置占位符文本（仅在无输入内容下显示，起到提示的作用）
void lv_textarea_set_placeholder_text(lv_obj_t * obj, const char * txt);4.移动、设置光标
void lv_textarea_set_cursor_pos(lv_obj_t * obj, int32_t pos);//pos为0时，光标在第一个字符前面
void lv_textarea_cursor_right(lv_obj_t * obj);
void lv_textarea_cursor_left(lv_obj_t * obj);
void lv_textarea_cursor_down(lv_obj_t * obj);
void lv_textarea_cursor_up(lv_obj_t * obj);5.文本区域的单行模式与密码模式
void lv_textarea_set_one_line(lv_obj_t * obj, bool en)//en为true时单行显示
void lv_textarea_set_password_mode(lv_obj_t * obj, bool en);//en为true时为密码模式，输入字符转化为'.'
void lv_textarea_set_password_show_time(lv_obj_t * obj, uint16_t time);//设置输入字符转化为'.'的时间，单位为ms6.限制输入的字符类型以及总文本长度
void lv_textarea_set_accepted_chars(lv_obj_t * obj, const char * list);
void lv_textarea_set_max_length(lv_obj_t * obj, uint32_t num);7.API
色环部件(lv_colorwheel)
1.创建色环
/*第二个参数用来决定knob的颜色是否与当前色环所选择的颜色一致。true则二者一致*/
lv_obj_t * lv_colorwheel_create(lv_obj_t * parent, bool knob_recolor);
2.设置色环的模式
/*
mode的宏有：
LV_COLORWHEEL_MODE_HUE:色相，即所有颜色
LV_COLORWHEEL_MODE_SATURATION:饱和度，白色到设置颜色的变化
LV_COLORWHEEL_MODE_VALUE:数值，黑色到设置颜色的变化
*/
void lv_colorwheel_set_mode(lv_obj_t * obj, lv_colorwheel_mode_t mode);
/*设置特定颜色的函数*/
bool lv_colorwheel_set_rgb(lv_obj_t * obj, lv_color_t color);
例如
lv_obj_t *colorwheel = lv_colorwheel_create(lv_scr_act(), true);
lv_obj_set_size(colorwheel, 100, 100);
lv_obj_center(colorwheel);
lv_obj_update_layout(colorwheel);
lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_HUE);
lv_obj_t *colorwheel1 = lv_colorwheel_create(lv_scr_act(), true);
lv_obj_set_size(colorwheel1, 100, 100);
lv_obj_align(colorwheel1, LV_ALIGN_CENTER, -150, 0);
lv_obj_update_layout(colorwheel1);
lv_colorwheel_set_mode(colorwheel1, LV_COLORWHEEL_MODE_SATURATION);
lv_obj_t *colorwheel2 = lv_colorwheel_create(lv_scr_act(), true);
lv_obj_set_size(colorwheel2, 100, 100);
lv_obj_align(colorwheel2, LV_ALIGN_CENTER, 150, 0);
lv_obj_update_layout(colorwheel2);
lv_colorwheel_set_rgb(colorwheel2, lv_color_make(0, 255, 0));
lv_colorwheel_set_mode(colorwheel2, LV_COLORWHEEL_MODE_VALUE);效果
3.API
图片按钮部件(lv_imgbtn)
1.四种状态解析
LVGL图片按钮共有四种状态，分别是：释放，按下，选中释放，选中按下。四者的关系是
、
如果释放与选中按下，按下与选中释放各选择同一张图片，则可以实现按钮状态切换的功能，如下图所示：
2.设置图片来源
/*其中src_left与src_right设置为NULL，第二个参数用于设置显示改图片时控件的状态*/
void lv_imgbtn_set_src(lv_obj_t * obj, lv_imgbtn_state_t state, const void * src_left,
const void * src_mid, const void * src_right);3.API
键盘部件(lv_keyboard)
1.设置键盘模式
/*默认情况下，可以自由切换键盘模式，但是如果指定特定键盘模式，那么就无法切换*/
void lv_keyboard_set_mode(lv_obj_t * obj, lv_keyboard_mode_t mode);
2.关联键盘与文本区域
void lv_keyboard_set_textarea(lv_obj_t * obj, lv_obj_t * ta);
3.按键弹窗设置
void lv_keyboard_set_popovers(lv_obj_t * obj, bool en);效果
4.自定义键盘布局
lv_keyboard_set_mode(keyboard, LV_KEYBOARD_MODE_USER_1);
const char *kb_map[] = {
"1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "\n",
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "\n",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "\n",
"u", "v", "w", "x", "y", "z", ""
};
// 定义按钮控制信息
const lv_btnmatrix_ctrl_t kb_ctrl_map[] = {
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
LV_BTNMATRIX_CTRL_RECOLOR, // 第一行
};
lv_keyboard_set_map(keyboard, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl_map);kb_map：用于自定义键盘布局，'\n'换行，详见按钮组布局方法
kb_ctrl_map：用于控制按键。此处使用LV_BTNMATRIX_CTRL_RECOLOR效果较好。注意，这里不能在定义键盘名称时附加颜色，例如'#ff0000 a#'，虽然这样可以起到重新着色的效果，但是实际键盘输入是'#ff0000 a#'，如下图
5.API
LED部件(lv_led)
1.API
示例
lv_obj_t *led = lv_led_create(lv_scr_act());
lv_led_set_color(led, lv_color_make(255, 0, 0));
lv_obj_align(led, LV_ALIGN_CENTER, 0, 0);
lv_led_set_brightness(led, 100);
lv_led_on(led);
lv_obj_t *led1 = lv_led_create(lv_scr_act());
lv_led_set_color(led1, lv_color_make(255, 0, 0));
lv_obj_align(led1, LV_ALIGN_CENTER, -50, 0);
lv_led_set_brightness(led1, 100);
lv_led_off(led1);效果
列表(lv_list)
1.添加按钮
/*第2、3个参数可选，不使用则用NULL*/
lv_obj_t * lv_list_add_btn(lv_obj_t * list, const void * icon, const char * txt)
2.添加列表文本
lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt);3.为每个按钮添加回调
btn = lv_list_add_btn(list, LV_SYMBOL_FILE, "New");
lv_obj_add_event_cb(btn, lv_list_New_btn_callback, LV_EVENT_CLICKED, NULL);示例
lv_obj_t *list = lv_list_create(lv_scr_act());
lv_obj_set_width(list, 200);
lv_obj_set_height(list, 150);
lv_obj_center(list);
lv_obj_t *btn;
lv_list_add_text(list, LV_SYMBOL_DRIVE"File");
btn = lv_list_add_btn(list, LV_SYMBOL_FILE, "New");
lv_obj_add_event_cb(btn, lv_list_New_btn_callback, LV_EVENT_CLICKED, NULL);
lv_list_add_text(list, "Operation");
btn = lv_list_add_btn(list, LV_SYMBOL_AUDIO, "Music");
lv_obj_add_event_cb(btn, lv_list_Music_btn_callback, LV_EVENT_CLICKED, NULL);效果
4.API
消息框部件(lv_msgbox)
1.消息框部件的组成
2.创建消息框组件
/*第一个参数设置为NULL，则在显示以后，在关闭消息框之前，不能再点击其他部件;否则就设置为其他父部件*/
lv_obj_t * lv_msgbox_create(lv_obj_t * parent, const char * title, const char * txt, const char * btn_txts[],bool add_close_btn)示例
static const char *btns[] = {"OK", ""};
msgbox = lv_msgbox_create(lv_scr_act(), LV_SYMBOL_WARNING"Notice", "Excessive volume may damage hearing.", btns, true);效果
3.综合示例
lv_obj_t *label, *msgbox, *slider;
static void lv_slider_cb(lv_event_t *e)
{
static uint8_t Lower80 = 1;
lv_obj_t *slider = lv_event_get_current_target(e);
uint16_t SliderValue = lv_slider_get_value(slider);
lv_label_set_text_fmt(label, "Volumn : %d", SliderValue);
if (SliderValue > 80 && Lower80)
{
Lower80 = 0;
lv_obj_clear_flag(msgbox, LV_OBJ_FLAG_HIDDEN);
lv_obj_add_state(slider, LV_STATE_DISABLED);
// lv_obj_add_flag(slider, LV_OBJ_FLAG_EVENT_BUBBLE);
}
else if (SliderValue < 80)
Lower80 = 1;
}
static void lv_msgbox_btn_callback(lv_event_t *e)
{
lv_obj_t *TarMsgbox = lv_event_get_current_target(e);
if (lv_msgbox_get_active_btn(TarMsgbox) == 0)
{
lv_obj_add_flag(TarMsgbox, LV_OBJ_FLAG_HIDDEN);
lv_obj_clear_state(slider, LV_STATE_DISABLED);
// lv_obj_clear_flag(slider, LV_OBJ_FLAG_EVENT_BUBBLE);
}
}
slider = lv_slider_create(lv_scr_act());
lv_slider_set_mode(slider, LV_SLIDER_MODE_NORMAL);
lv_slider_set_range(slider, 0, 100);
lv_obj_set_size(slider, 500, 15);
lv_obj_center(slider);
lv_obj_add_event_cb(slider, lv_slider_cb, LV_EVENT_VALUE_CHANGED, NULL);
label = lv_label_create(lv_scr_act());
lv_label_set_text_fmt(label, "Volumn : %d", lv_slider_get_value(slider));
lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -10);
static const char *btns[] = {"OK", ""};
msgbox = lv_msgbox_create(lv_scr_act(), LV_SYMBOL_WARNING"Notice", "Excessive volume may damage hearing.", btns, true);
lv_obj_add_event_cb(msgbox, lv_msgbox_btn_callback, LV_EVENT_CLICKED, NULL);
lv_obj_add_flag(msgbox, LV_OBJ_FLAG_HIDDEN);
lv_obj_align(msgbox, LV_ALIGN_CENTER, 0, 0);效果
4.API
微调器部件(lv_spinbox)
1.数值格式设置
/*第二个参数表示总位数，第三个参数表示小数点以后的位数，设置为0则忽略小数点*/
void lv_spinbox_set_digit_format(lv_obj_t * obj, uint8_t digit_count, uint8_t separator_position);2.设置编辑的位数
/*pos为0表示编辑右数第一位*/
void lv_spinbox_set_cursor_pos(lv_obj_t * obj, uint8_t pos);3.设置部件的翻转模式（防止超范围）
/*b为true表示使能翻转*/
void lv_spinbox_set_rollover(lv_obj_t * obj, bool b);4.综合示例
lv_obj_t *spinbox, *btInc, *btDec;
static void lv_btn_cb(lv_event_t * e)
{
lv_obj_t *tarBtn = lv_event_get_current_target(e);
static int8_t count = 0;
if (tarBtn == btInc)
{
count++;
lv_spinbox_increment(spinbox);
// lv_spinbox_set_value(spinbox, count);
}
else
{
count--;
lv_spinbox_decrement(spinbox);
// lv_spinbox_set_value(spinbox, count);
}
}
spinbox = lv_spinbox_create(lv_scr_act());
lv_spinbox_set_digit_format(spinbox, 5, 2);
lv_obj_center(spinbox);
lv_obj_set_width(spinbox, 100);
lv_spinbox_set_range(spinbox, -10000, 10000);
lv_spinbox_set_value(spinbox, 0);
lv_spinbox_set_step(spinbox, 1);
btInc = lv_btn_create(lv_scr_act());
btDec = lv_btn_create(lv_scr_act());
lv_obj_align_to(btInc, spinbox, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_align_to(btDec, spinbox, LV_ALIGN_OUT_LEFT_MID, 0, 0);
lv_label_set_text(lv_label_create(btInc), "+");
lv_label_set_text(lv_label_create(btDec), "-");
lv_obj_add_event_cb(btInc, lv_btn_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(btDec, lv_btn_cb, LV_EVENT_CLICKED, NULL);效果
5.API
加载器部件(lv_spinner)
1.API
平铺视图部件(lv_tileview)
1.添加页面
/*注意先是列，再是行，第4个参数一定要根据实际的页面分布来选择，可选宏为
LV_DIR_LEFT
LV_DIR_RIGHT
LV_DIR_TOP
LV_DIR_BOTTOM
LV_DIR_HOR
LV_DIR_VER
LV_DIR_ALL
若tile1在tile2的左边，则添加tile1时应该设置LV_DIR_RIGHT向右滚动
*/
lv_obj_t * lv_tileview_add_tile(lv_obj_t * tv, uint8_t col_id, uint8_t row_id, lv_dir_t dir)举例
lv_obj_t *tileview = lv_tileview_create(lv_scr_act());
lv_obj_t *tile5 = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_BOTTOM);
lv_obj_t *tile1 = lv_tileview_add_tile(tileview, 0, 1, LV_DIR_TOP | LV_DIR_BOTTOM | LV_DIR_RIGHT);
lv_obj_t *tile2 = lv_tileview_add_tile(tileview, 1, 1, LV_DIR_RIGHT | LV_DIR_LEFT);
lv_obj_t *tile3 = lv_tileview_add_tile(tileview, 2, 1, LV_DIR_RIGHT | LV_DIR_LEFT);
lv_obj_t *tile4 = lv_tileview_add_tile(tileview, 3, 1, LV_DIR_LEFT);
lv_obj_t *tile6 = lv_tileview_add_tile(tileview, 0, 2, LV_DIR_TOP);2.切换页面
/*根据行列坐标选择页面，最后一个参数可选宏为LV_ANIM_ON/OFF，选择开机切换页面的动画效果*/
void lv_obj_set_tile_id(lv_obj_t * tv, uint32_t col_id, uint32_t row_id, lv_anim_enable_t anim_en);3.综合示例
页面分布
5
1 2 3 4
6
lv_obj_t *tileview = lv_tileview_create(lv_scr_act());
lv_obj_t *tile5 = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_BOTTOM);
lv_obj_t *tile1 = lv_tileview_add_tile(tileview, 0, 1, LV_DIR_TOP | LV_DIR_BOTTOM | LV_DIR_RIGHT);
lv_obj_t *tile2 = lv_tileview_add_tile(tileview, 1, 1, LV_DIR_RIGHT | LV_DIR_LEFT);
lv_obj_t *tile3 = lv_tileview_add_tile(tileview, 2, 1, LV_DIR_RIGHT | LV_DIR_LEFT);
lv_obj_t *tile4 = lv_tileview_add_tile(tileview, 3, 1, LV_DIR_LEFT);
lv_obj_t *tile6 = lv_tileview_add_tile(tileview, 0, 2, LV_DIR_TOP);
lv_obj_t *label5 = lv_label_create(tile5);
lv_label_set_text(label5, "tile5");
lv_obj_align(label5, LV_ALIGN_CENTER, 0, 0);
lv_obj_t *label1 = lv_label_create(tile1);
lv_label_set_text(label1, "tile1");
lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);
lv_obj_t *label2 = lv_label_create(tile2);
lv_label_set_text(label2, "tile2");
lv_obj_align(label2, LV_ALIGN_CENTER, 0, 0);
lv_obj_t *label3 = lv_label_create(tile3);
lv_label_set_text(label3, "tile3");
lv_obj_align(label3, LV_ALIGN_CENTER, 0, 0);
lv_obj_t *label4 = lv_label_create(tile4);
lv_label_set_text(label4, "tile4");
lv_obj_align(label4, LV_ALIGN_CENTER, 0, 0);
lv_obj_t *label6 = lv_label_create(tile6);
lv_label_set_text(label6, "tile6");
lv_obj_align(label6, LV_ALIGN_CENTER, 0, 0);
lv_obj_set_tile_id(tileview, 0, 2, LV_ANIM_ON);效果
4.API
窗口部件(lv_win)
1.添加标题与按键
/*标题与按键添加在窗口的头部，并且根据调用顺序从左往右依次显示*/
lv_obj_t * lv_win_add_title(lv_obj_t * win, const char * txt);
lv_obj_t * lv_win_add_btn(lv_obj_t * win, const void * icon, lv_coord_t btn_w);举例
lv_obj_t *win = lv_win_create(lv_scr_act(), 50);
lv_obj_set_size(win, 300, 300);
lv_obj_center(win);
lv_win_add_btn(win, LV_SYMBOL_AUDIO, 40);
lv_win_add_title(win, "Tile");
lv_win_add_btn(win, LV_SYMBOL_CALL, 40);效果
2.API
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
