一、标签控件
主体 滚动条 选中的文本
1 .创建标签部件
1
| lv_obj_t *label =lv_label_create(lv_scr_act());
|
2. 设置文本的三种方式
1
| lv_label_set_text(label,"hello\n lvgl");
|
- 文本不存储在动态内存，而是在指定的缓冲区中，代码块中只读，修改可能会崩溃(慎用)
1
| lv_label_set_text_static(label,"hello");
|
1
| lv_label_set_text_fmt(label,"Value:%d",50);
|
3.设置文本样式
1
2
3
| lv_obj_set_style_bg_color(label,
lv_color_hex(0xff0000),
LV_STATE_DEFAULT);
|
1
2
3
| lv_obj_set_style_bg_opa(label,
100，
LV_STATE_DEFAULT);
|
1
2
3
| lv_obj_set_style_text_font(label,
&lv_font_montserrat_30,
LV_STATE_DEFAULT);
|
1
2
3
| lv_obj_set_style_text_color(label,
lv_color_hex(0x5084db),
LV_STATE_DEFAULT);
|
单独设置字体颜色
1
| lv_label_set_recolor(label,ture);
|
1
2
| lv_label_set_text(label,"hello #ff0000 lvgl#");
lv_label_set_text_fmt(label, "%s%d%s%s", "www.", 100, "ask", ".net");
|
4. 文本长度
1
2
| lv_label_set_long_mode(label,
LV_LABEL_LONG_SCROLL);
|
1
2
3
4
5
6
7
| enum {
LV_LABEL_LONG_WRAP,
LV_LABEL_LONG_DOT,
LV_LABEL_LONG_SCROLL,
LV_LABEL_LONG_SCROLL_CIRCULAR,
LV_LABEL_LONG_CLIP,
};
|
二、按钮部件
按钮部件相比基础对象，没有新增功能
1
| lv_obj_t *btn = lv_btn_create(lv_scr_act());
|
1
2
3
| lv_obj_set_size(btn,100,50);
lv_obj_set_align(btn,LV_ALIGN_CENTER);
lv_obj_set_style_bg_color(btn,lv_color_hex(0xde4d3e),LV_STATE_PRESSED);
|
1
2
3
4
5
| lv_obj_add_flag(btn,LV_OBJ_FLAG_CHECKABLE);
lv_obj_add_event_cb(btn,
event_cb,
LV_EVENT_VALUE_CHANGED,
NULL);
|
三、开关部件
开关部件常用于控制某个功能的开启或关闭，可以直接显示被控对象的状态
主体（关闭时显示） LV_PART_MAIN
手柄 LV_PART_KNOB
指示器（开启时显示）LV_PART_INDICATOR
1
2
| lv_obj_t *switch1 = lv_switch_create(lv_scr_act());
lv_obj_set_style_bg_color(switch1,lv_color_hex(0xdf5345),LV_STATE_CHECKED|LV_PART_INDICATOR);
|
1
2
| lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);
|
1
| lv_obj_has_state(switch1, LV_STATE_CHECKED)
|
四、复选框
主体
勾选框
1
| lv_obj_t *checkbox = lv_checkbox_create (parent );
|
1
2
| lv_checkbox_set_text( checkbox, "remember the password" );
lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT );
|
1
2
| lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);
|
1
| lv_obj_has_state(checkbox, LV_STATE_CHECKED);
|
五、进度条部件
常用于显示当前任务的进度
主体
指示器
- xxxxxxxxxx12 1static void event_cb(lv_event_t* e)2{3 lv_obj_t *target = lv_event_get_target(e);//获取触发事件的部件4 if(target == target_obj) //判断触发事件的部件5 {6 printf(“父对象触发事件\r\n”); //执行相应操作7 }8 else if(target == child_obj)9 {10 printf(“子对象触发事件\r\n”); 11 }12}c
1
| lv_obj_t *bar = lv_bar_create ( parent );
|
1
2
| lv_obj_set_size( bar, 400, 20 );
lv_bar_set_value( bar, 50, LV_ANIM_ON );
|
1
2
| lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT );
|
1
2
| lv_bar_set_mode( bar, LV_BAR_MODE_RANGE );
lv_bar_set_start_value( bar, -50, LV_ANIM_OFF );
|
1
2
3
4
5
| enum {
LV_BAR_MODE_NORMAL,
LV_BAR_MODE_SYMMETRICAL,
LV_BAR_MODE_RANGE
};
|
六、加载器部件
常用于提示当前任务正在加载
主体
指示器
手柄（指示器的起点）
1
| lv_obj_t *spinner = lv_spinner_create( parent, spin_time, arc_length );
|
1
2
| lv_obj_set_style_arc_color( spinner, lv_color_hex(0x4a9f00), LV_PART_MAIN );
lv_obj_set_style_arc_color( spinner, lv_color_hex(0x83bd55), LV_PART_INDICATOR );
|
1
2
| lv_obj_set_style_arc_width( spinner, 30, LV_PART_MAIN );
lv_obj_set_style_arc_width( spinner, 30, LV_PART_INDICATOR );
|
七、LED部件
常用于指示控制对象的状态
1
| lv_obj_t *led = lv_led_create( parent );
|
1
2
| lv_led_set_color( led, lv_color_hex(0xff0000) )；
lv_led_set_brightness( led, 0 );
|
1
2
3
| lv_led_on( led );
lv_led_off( led );
lv_led_toggle( led );
|
八、列表部件
常用于多选一的场景，默认会展现多个选项
主体
滚动条
1
| lv_obj_t *list = lv_list_create( parent );
|
1
| lv_list_add_text( list, “Settings" );
|
1
| lv_obj_t *btn= lv_list_add_btn( list, LV_SYMBOL_WIFI, “WLAN");
|
1
| lv_list_get_btn_text( list, list_btn );
|
1
2
3
4
5
6
| lv_obj_t *list_btn = lv_event_get_target(e)
{
lv_obj_t *list_btn = lv_event_get_target(e);
lv_label_set_text(list_label,lv_list_get_btn_text(list,list_btn));
lv_obj_add_state(list_btn,LV_STATE_FOCUS_KEY);
}
|
九、下拉列表部件
按钮
列表
1
| lv_obj_t *dd = lv_dropdown_create( parent );
|
1
2
3
| lv_dropdown_set_options( dd, "a\nb\nc\nd");
lv_dropdown_set_options_static( dd, "a\nb\nc\nd ");
lv_dropdown_add_option( dd, "e", 4);
|
1
| lv_dropdown_set_selected( dd, 1);
|
1
2
3
4
| lv_dropdown_get_selected( dd);
char buf[10];
lv_dropdown_get_selected_str( dd, buf, sizeof(buf));
|
1
2
| lv_dropdown_set_dir(dd, LV_DIR_RIGHT);
lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);
|
十、滚轮部件
常用于多选一的场景，它以滚轮的形式来展现多个选项
主体
选项框
1
| lv_obj_t *roller= lv_roller_create( parent )；
|
1
2
| lv_obj_set_style_text_line_space(roller, 30,
LV_STATE_DEFAULT);
|
1
| lv_roller_set_options(roller, “a\nb\nc\nd”, LV_ROLLER_MODE_NORMAL);
|
1
| lv_roller_set_selected(roller, 3, LV_ANIM_ON);
|
1
| lv_roller_set_visible_row_count(roller, 2);
|
1
2
3
4
| lv_roller_get_selected(roller);
char buf[10];
lv_roller_get_selected_str(roller, buf, sizeof(buf));
|
十一、滑块部件
常用于调节某个参数的值，它以直线滑动的形式来修改数值
主体
指示器
旋钮
1
| lv_obj_t *slider = lv_slider_create( parent );
|
1
| lv_obj_set_size(slider, 20, 200);
|
1
| lv_slider_get_value(slider);
|
1
| lv_slider_set_mode(slider, LV_SLIDER_MODE_...);
|
1
2
| lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);
lv_slider_get_left_value(slider);
|
十二、圆弧部件
以弧形滑动的形式来调节、显示某个参数的值
背景弧
前景弧
旋钮
1
| lv_obj_t *arc = lv_arc_create( parent );
|
1
| lv_arc_set_value(arc, 80);
|
1
2
| lv_arc_set_angles(arc, 135, 270);
lv_arc_set_bg_angles(arc, 135, 45);
|
1
| lv_arc_set_rotation(arc, 180);
|
1
2
| lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);
lv_arc_set_change_rate(arc, 90);
|
十三 、线条部件
线条部件能够在一组坐标点之间依次绘制直线
主体
1
| lv_obj_t *line = lv_line_create( parent );
|
1
2
| static lv_point_t line_points[] = { {15, 5}, {25, 20}, {5, 20}, {15, 5} };
lv_line_set_points(line, line_points, 4);
|
1
2
| lv_obj_set_style_line_width(line, 8, LV_PART_MAIN);
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);
|
1
| lv_line_set_y_invert(line, true);
|
十四、图片部件
用于图片显示、功能界面优化、背景优化等
主体
1
| lv_obj_t *img = lv_img_create( parent );
|
- 设置图片源
- 图片来源：C语言数组、Bin文件、LVGL内置字体图标
1
2
| LV_IMG_DECLARE(img_bird);
lv_img_set_src(img, &img_bird);
|
1
2
| lv_img_set_offset_x(img, 100);
lv_img_set_offset_y(img, 20);
|
1
2
3
| lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN);
lv_coloc_make(R,G,B);
lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);
|
1
2
3
| lv_img_set_zoom(img, 512);
lv_img_set_angle(img, 900);
|
1
2
| lv_obj_update_layout(img);
lv_img_set_pivot(img, 0, 0);
|
十五、色环部件
在UI设计中，色环部件一般用作颜色选择器
1
2
| lv_obj_t *cw = lv_colorwheel_create( parent,
knob_recolor );
|
1
| lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));
|
1
| lv_colorwheel_get_rgb(cw);
|
1
2
| lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE);
lv_colorwheel_set_mode_fixed(cw, true);
|
十六、按钮矩阵部件
可以在不同的行和列中显示多个轻量级按钮
主体
按钮
1
| lv_obj_t *btnm = lv_btnmatrix_create(parent);
|
1
2
| static const char *map[] = { "btn1", "\n", "btn2", "btn3", "" };
lv_btnmatrix_set_map(btnm, map);
|
1
| lv_btnmatrix_set_btn_width(btnm, id, width);
|
1
2
| lv_btnmatrix_get_selected_btn(btnm);
lv_btnmatrix_get_btn_text(btnm, id);
|
1
2
3
| lv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);
lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);
lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...);
|
1
2
3
4
5
6
| enum {
LV_BTNMATRIX_CTRL_HIDDEN,
LV_BTNMATRIX_CTRL_DISABLED,
LV_BTNMATRIX_CTRL_CHECKABLE,
LV_BTNMATRIX_CTRL_RECOLOR,
};
|
1
| lv_btnmatrix_set_one_checked(btnm, true);
|
十七、文本区域部件
即文本输入框，用户可以在其中输入文本内容
主体
滚动条
所选文本
光标
占位符
1
2
| lv_obj_t *ta = lv_textarea_create(parent);
|
1
2
3
4
| lv_textarea_add_char(ta, 'A');
lv_textarea_add_text(ta, "BCDEF");
lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());
lv_keyboard_set_textarea(keyboard, ta);
|
1
| lv_textarea_set_cursor_pos(ta, 0);
|
1
2
| lv_textarea_del_char(ta);
lv_textarea_del_char_forward(ta);
|
1
2
| lv_textarea_set_one_line(ta, true);
lv_textarea_set_password_mode(ta, true);
|
1
2
| lv_textarea_set_accepted_chars(ta,"0123456789");
lv_textarea_set_max_length(ta,6);
|
1
| lv_textarea_set_placeholder_text(ta, "password");
|
1
| const char *txt = lv_textarea_get_text(ta);
|
1
| strcmp(const char *s1,const char *s2);
|
十八、键盘部件
可用于输入文本内容，其本质上就是一个特殊的按钮矩阵
主体
按钮
1
| lv_obj_t *kb = lv_keyboard_create(parent);
|
1
2
| lv_obj_t *ta = lv_textarea_create(lv_scr_act());
lv_keyboard_set_textarea(kb, ta);
|
1
| lv_keyboard_set_popovers(kb, true);
|
1
| lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);
|
十九、图片按钮部件
类似于按钮部件，不同的是，用户可以在其中设置图片
主体
1
| lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);
|
1
2
| lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_mid, src_right);
lv_obj_set_size(imgbtn, 64 * 3, 64);
|
1
| lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);
|
二十、选项卡部件
主体
按钮
1
| lv_obj_t *tabview = lv_tabview_create(parent, LV_DIR_..., tab_size);
|
1
2
| lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");
|
1
| lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);
|
二十一、平铺视图部件
可以实现不同方向的页面切换，用户可以在页面中添加内容
主体
滚动条
1
| lv_obj_t *tileview = lv_tileview_create( parent );
|
1
2
| lv_obj_t *tile1 = lv_tileview_add_tile( tileview, 0, 0, LV_DIR_RIGHT );
lv_obj_t *tile2 = lv_tileview_add_tile( tileview, 1, 0, LV_DIR_LEFT );
|
1
2
3
| lv_obj_update_layout( tileview );
lv_obj_set_tile( tileview, tile2, LV_ANIM_OFF );
lv_obj_set_tile_id( tileview, 1, 0, LV_ANIM_OFF );
|
二十二、窗口部件
可以作为一个容器，展示不同功能的页面
1
| lv_obj_t *win = lv_win_create(parent, header_height);
|
1
2
| lv_obj_t *title = lv_win_add_title(win, "Setting");
lv_obj_t *btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 20)
|
1
2
| lv_obj_t *content = lv_win_get_content(win);
lv_obj_t *label = lv_label_create(content);
|
二十三、消息框部件
消息框部件可以实现弹窗提示，常用于消息通知、确定操作等
主体
标题
关闭按钮
按钮矩阵
1
2
3
| static const char *btns[] = { "Continue", "Close", "" };
lv_obj_t *msgbox = lv_msgbox_create( lv_scr_act(), "Notice", "Do you want to continue?", btns, true );
|
1
| lv_msgbox_close(msgbox);
|
1
2
3
| lv_obj_t *target = lv_event_get_current_target(e);
lv_msgbox_get_active_btn(target);
lv_msgbox_get_active_btn_text(target);
|
二十四、微调器部件
微调器部件本质上就是一个数字文本，常用于精确调节某个参数的值
主体
光标
1
| lv_obj_t *spinbox = lv_spinbox_create(parent);
|
1
| lv_spinbox_increment(spinbox);
|
1
2
| lv_spinbox_set_step(spinbox, 200);
lv_spinbox_set_range(spinbox, -1000, 1000);
|
1
| lv_spinbox_set_value(spinbox, 400)
|
1
2
| lv_spinbox_set_digit_format(spinbox, 4, 2);
lv_spinbox_set_pos(spinbox, 3);
|
1
| lv_spinbox_get_value(spinbox);
|
二十五、表格部件
有一个个单元格组成，它的单元格中只能存放文本形式的内容
主体
单元格
1
| lv_obj_t *table = lv_table_create(parent);
|
1
2
| lv_table_set_row_cnt(table,2);
lv_table_set_col_cnt(table,2);
|
1
2
| lv_table_set_cell_value(table, 0, 0, "123");
lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100 );
|
