笔记主要记录LVGL控件基本的编程使用和相关的程序,并且在程序中对使用到的API函数进行简要注解(有些是个人的理解),以便后续根据实际项目所需直接套用对应的控件代码修改使用;本文主要参考的是正点原子的LVGL相关教程。
LVGL控件的基础知识
(1) C语言编写的LVGL以结构体的形式实现类似C++ “Class”的思想:
图中的子对象也可以作为父对象,如以lv_btn
作为父对象,lv_label
为子对象。
(2) 父子对象的默认关系
- 子对象会随着父对象移动,且移动时相对父对象的位置不变
- 当子对象的位置超出父对象的范围,则子对象超出的部分不会显示
LVGL基础对象
lv_obj_t *obj = lv_obj_create(lv_scr_act());
lv_scr_act()
scr_act_width()
scr_act_height()
LVGL控件的基本属性及相关函数
基本属性 |
作用 |
大小(size) |
宽度和高度设置 |
位置(position) |
设置控件的相对屏幕/父对象的位置,默认以左上角为原点,向下为Y轴,向右为X轴 |
对齐(alignment) |
1.可设置子对象参照父对象对齐;2.一个对象参照另一个对象对齐 |
样式(styles) |
设置控件的外观属性 |
事件(events) |
控件的动作触发回调函数(事件) ,在函数中进行相关的处理操作 |
(1) 大小(size)相关的API函数:
lv_obj_set_width(obj, new_width);
lv_obj_set_height(obj, new_height);
lv_obj_set_size(obj, new_width, new_height);
lv_obj_get_width(lv_scr_act());
lv_obj_get_height(lv_scr_act());
(2) 位置(position)相关的API函数:
lv_obj_set_x(obj, new_x);
lv_obj_set_y(obj, new_y);
lv_obj_set_pos(obj, new_x, new_y);
(3) 对齐(alignment)相关的API函数:
lv_obj_set_align(obj, align);
lv_obj_align(obj, align, x, y);
lv_obj_align_to(obj_to_align, reference_obj, align, x, y);
对齐模式(align)的选择可参考下图中的相对位置;灰色方框内表示父子对象可选的对齐方式,灰色方框外表示非父子对象可选的对齐方式
(4) 样式(styles)相关的API函数:
static lv_style_t style;
lv_obj_t* obj = lv_obj_create(lv_scr_act());
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_color_hex(0xffffff));
lv_obj_set_style_opa(obj,100,LV_STATE_DEFAULT);
lv_obj_set_style_text_font(obj,&lv_font_montserrat_14,LV_STATE_DEFAULT);
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, & style, LV_STATE_DEFAULT);
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff),LV_STATE_DEFAULT);
enum {
LV_STATE_DEFAULT = 0x0000,
LV_STATE_CHECKED = 0x0001,
LV_STATE_FOCUSED = 0x0002,
LV_STATE_FOCUS_KEY = 0x0004,
LV_STATE_EDITED = 0x0008,
LV_STATE_HOVERED = 0x0010,
LV_STATE_PRESSED = 0x0020,
LV_STATE_SCROLLED = 0x0040,
LV_STATE_DISABLED = 0x0080,
…
};
也可以单独设置控件的各个组成部分的样式,例如滑块的组成部分,可单独设置样式。
(5) 事件(events)相关的API函数:
static void event_cb( lv_event_t *e )
{
lv_event_code_t code = lv_event_get_code(e);
if ( code == LV_EVENT_CLICKED )
{
printf(“事件类型: 按下后释放\r\n”);
}
else if ( code == LV_EVENT_LONG_PRESSED)
{
printf(“事件类型:按下(长按)\r\n”);
}
}
static void event_cb( lv_event_t *e )
{
lv_obj_t *target = lv_event_get_target(e);
if ( target == parent_obj )
{
printf(“父对象触发事件 \r\n”);
}
else if ( target == child_obj )
{
printf(“子对象触发事件 \r\n”);
}
}
lv_obj_t* btn = lv_btn_create(lv_scr_act());
lv_obj_add_event_cb(btn,event_cb,LV_EVENT_LONG_PRESSED,NULL);
--------------------------------------------控件的使用---------------------------------------------
(一)标签控件(label)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
滚动条 |
LV_PART_SCROLLBAR |
选中的文本 |
LV_PART_SELECTED |
1. 创建标签
lv_obj_t* label = lv_label_create(parent);
2. 标签文本设置
lv_label_set_text(label, "Text");
lv_label_set_text_static( label,"Text" );
lv_label_set_text_fmt( label, “Value: %d”, 50 ) ;
3. 文本样式设置
lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT);
lv_obj_set_style_opa(label,100,LV_STATE_DEFAULT);
lv_obj_set_style_text_font( label, &lv_font_montserrat_30, LV_STATE_DEFAULT);
lv_obj_set_style_text_color( label, lv_color_hex(0xf7b37b), LV_STATE_DEFAULT);
lv_label_set_recolor( label, true );
lv_label_set_text( label, "hallo #1E90FF lvgl# " );
4. 文本超出部件大小
(1). 若设置了部件大小lv_obj_set_size( )
则文本超出部分会被裁剪掉;若没有限定标签部件大小,则自动扩展为文本大小。
(2).设置长文本模式
lv_label_set_long_mode(label,LV_LABEL_LONG_...);
enum {
LV_LABEL_LONG_WRAP,
LV_LABEL_LONG_DOT,
LV_LABEL_LONG_SCROLL,
LV_LABEL_LONG_SCROLL_CIRCULAR,
LV_LABEL_LONG_CLIP,
};
(二)按钮控件(Button)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
1.按钮创建及样式配置
lv_obj_t *btn;
static void my_event_cb(lv_event_t *e)
{
lv_obj_t *target = lv_event_get_target();
if(target == )
{
}
else if (target ==)
{
}
}
static void Btn_Create()
{
lv_obj_t *btn = lv_btn_create( parent );
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(0xffe1d4), LV_STATE_PRESSED );
lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE );
lv_obj_add_event_cb( btn, my_event_cb, LV_EVENT_VALUE_CHANGED,NULL );
}
(三)开关控件(Switch)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
手柄 |
LV_PART_KNOB |
指示器 |
LV_PART_INDICATOR |
1.开关创建及样式配置
lv_obj_t *switch1;
lv_obj_t *switch2;
static void my_event_cb(lv_event_t *e)
{
lv_obj_t *target = lv_event_get_target();
if(target == )
{
if(lv_obj_has_state(switch1, LV_STATE_CHECKED)==1)
{
lv_obj_clear_state(switch2, LV_STATE_CHECKED);
}
}
else if (target ==)
{
if(lv_obj_has_state(switch2, LV_STATE_CHECKED)==1)
{
lv_obj_clear_state(switch1, LV_STATE_CHECKED);
}
}
}
static void Btn_Create()
{
switch1 = lv_switch_create( parent );
switch2 = lv_switch_create( parent );
lv_obj_set_style_bg_color(switch1,lv_color_hex(0xFF0000),LV_STATE_CHECKED|LV_PART_INDICATOR);
lv_obj_add_event_cb(switch1,my_event_cb,LV_EVENT_VALUE_CHANGED,NULL);
}
2.通过代码设定开关状态
lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);
3.开关状态获取
lv_obj_has_state(switch1, LV_STATE_CHECKED)
(四)复选框控件(CheckBox)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
勾选框 |
LV_PART_INDICATOR |
1.复选框创建及文本设置
lv_obj_t *checkbox;
static void my_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_VALUE_CHANGED)
{
}
else
{
}
}
static void CheckBox_Create()
{
checkbox = lv_checkbox_create (parent );
lv_checkbox_set_text( checkbox, "remember the password" );
lv_obj_set_align(checkbox,LV_ALIGN_CENTER);
lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT );
lv_obj_add_event_cb(checkbox ,my_event_cb,LV_EVENT_VALUE_CHANGED,NULL);
}
2.复选框状态设置
lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);
lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);
3.复选框状态获取
lv_obj_has_state(checkbox, LV_STATE_CHECKED);
(五)进度条控件(Bar)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
指示器 |
LV_PART_INDICATOR |
1.进度条创建
static void CheckBox_Create()
{
lv_obj_t *bar = lv_bar_create ( parent );
lv_obj_set_size( bar, 400, 20 );
lv_obj_set_align(bar,LV_ALIGN_CENTER);
lv_bar_set_range( bar, -100, 100 );
lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT );
lv_bar_set_value( bar, 50, LV_ANIM_ON );
}
2.进度条模式、起始值设置
enum {
LV_BAR_MODE_NORMAL,
LV_BAR_MODE_SYMMETRICAL,
LV_BAR_MODE_RANGE
};
lv_bar_set_mode( bar, LV_BAR_MODE_RANGE );
lv_bar_set_start_value( bar, -50, LV_ANIM_OFF );
3.进度条定时器回调测试
uint16_t val=0;
lv_obj_t *bar;
lv_label_t *label1;
static void my_timer_cb(lv_timer_t *timer)
{
if(val<100)
{
val++;
lv_bar_set_value(bar,val,LV_ANIM_ON);
lv_label_set_text_fmt(label1,"%d %%",lv_bar_get_value(bar));
}
else
{
lv_label_set_text(label1,"Finished");
}
}
void MY_GUI()
{
bar = lv_bar_create(lv_scr_act());
lv_obj_set_align(bar,LV_ALIGN_CENTER);
lv_obj_set_size(bar,200,20);
lv_bar_set_range(bar,0,100);
lv_obj_set_style_opa(bar,50,LV_STATE_SCROLLED );
label1 = lv_label_create(bar);
lv_obj_set_style_text_color(label1,lv_color_hex(0x56121c),LV_STATE_DEFAULT);
lv_label_set_text(label1, "0%");
lv_obj_center(label1);
lv_obj_set_style_anim_time(bar,500,LV_STATE_DEFAULT);
lv_bar_set_mode(bar,LV_BAR_MODE_RANGE);
lv_bar_set_start_value(bar,0,LV_ANIM_OFF);
lv_timer_create(my_timer_cb,50,NULL);
}
–测试效果图–
(六)加载器控件(Spinner)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
指示器 |
LV_PART_INDICATOR |
手柄 |
LV_PART_KNOB |
static void Spinner_Create()
{
lv_obj_t *spinner = lv_spinner_create( lv_scr_act(), 1000, 30 );
lv_obj_align(spinner,LV_ALIGN_CENTER,0,0);
lv_obj_set_size(spinner,50,50);
lv_obj_set_style_arc_color( spinner, lv_color_hex(0x00BFFF), LV_PART_MAIN );
lv_obj_set_style_arc_color( spinner, lv_color_hex(0xFFFACD), LV_PART_INDICATOR );
lv_obj_set_style_arc_width( spinner, 5, LV_PART_MAIN );
lv_obj_set_style_arc_width( spinner, 5., LV_PART_INDICATOR );
}
(七)LED控件(Led)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
- LED部件可进行点击.
1.LED创建
static void Led_Create()
{
lv_obj_t *led= lv_led_create(lv_scr_act());
lv_obj_set_size(led,50,50);
lv_obj_set_align(led,LV_ALIGN_CENTER);
lv_led_set_color( led, lv_color_hex(0x00BFFF) );
lv_led_set_brightness( led, 255 );
}
2.LED状态切换
lv_led_on( led );
lv_led_off( led );
lv_led_toggle( led );
(八)列表条控件(List)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
滚动条 |
LV_PART_SCROLLBAR |
1.列表的创建
lv_obj_t *list;
static void my_event_cb_1(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
printf("%s\n",lv_list_get_btn_text(list,target));
lv_obj_add_state(target,LV_STATE_FOCUS_KEY);
}
void MY_GUI()
{
list = lv_list_create( lv_scr_act() );
lv_list_add_text( list, "Settings" );
lv_obj_t *list_btn = lv_list_add_btn( list, LV_SYMBOL_WIFI, "WLAN");
lv_obj_add_event_cb(list_btn,my_event_cb_1,LV_EVENT_CLICKED,NULL);
lv_obj_t *list_btn1 = lv_list_add_btn( list, LV_SYMBOL_GPS, "GPS");
lv_obj_add_event_cb(list_btn1,my_event_cb_1,LV_EVENT_CLICKED,NULL);
lv_obj_t *list_btn2 = lv_list_add_btn( list, LV_SYMBOL_BATTERY_1, "BATTERY");
lv_obj_add_event_cb(list_btn2,my_event_cb_1,LV_EVENT_CLICKED,NULL);
}
2.LVGL自带的图标
----------------------官网LVGL图标预览–>Overview–>Fonts------------------
(九)下拉列表控件(Dropdown)
组成部分 |
编程对应 |
按钮 |
BUTTON |
列表 |
LIST |
1.下拉列表的创建
static void my_event_cb_2(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
printf("%d",lv_dropdown_get_selected(target));
char buf[10];
lv_dropdown_get_selected_str(target,buf,10);
printf("%s\n",buf);
}
void MY_GUI()
{
lv_obj_t *dd = lv_dropdown_create( lv_scr_act() );
lv_dropdown_set_options( dd, "a\nb\nc\nd");
lv_dropdown_add_option( dd, "e", 4);
lv_dropdown_set_selected(dd, 1);
lv_dropdown_set_dir(dd,LV_DIR_NONE);
lv_dropdown_set_symbol(dd,LV_SYMBOL_BELL);
lv_obj_add_event_cb(dd,my_event_cb_2,LV_EVENT_VALUE_CHANGED,NULL);
}
(十)滚轮控件(Roller)
组成部分 |
编程对应 |
按钮 |
LV_PART_MAIN |
选项框 |
LV_PART_SELECTED |
1.滚轮的创建
static void my_event_cb_3(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
printf("%d",lv_roller_get_selected(target));
char buf[10];
lv_roller_get_selected_str(target,buf,10);
printf("%s\n",buf);
}
void MY_GUI()
{
lv_obj_t *roller = lv_roller_create(lv_scr_act());
lv_obj_set_style_text_line_space(roller,30,LV_STATE_DEFAULT);
lv_roller_set_options(roller,"a\nb\nc\nd",LV_ROLLER_MODE_NORMAL);
lv_roller_set_selected(roller,3,LV_ANIM_OFF);
lv_roller_set_visible_row_count(roller,3);
lv_obj_add_event_cb(roller,my_event_cb_3,LV_EVENT_VALUE_CHANGED,NULL);
}
(十一)滑块控件(Slider)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
指示器 |
LV_PART_INDICATOR |
拖动旋钮 |
LV_PART_KNOB |
1.滑块的创建
static void my_event_cb_4(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_VALUE_CHANGED)
{
printf("Left:%d Right:%d\n",lv_slider_get_left_value(target),lv_slider_get_value(target));
}
}
void MY_GUI()
{
lv_obj_t *slider = lv_slider_create( lv_scr_act() );
lv_obj_center(slider);
lv_obj_set_size(slider, 200, 10);
lv_slider_set_range(slider, -100, 100);
lv_slider_set_mode(slider,LV_SLIDER_MODE_RANGE);
lv_slider_set_value(slider, 50, LV_ANIM_OFF);
lv_slider_set_left_value(slider, -50, LV_ANIM_OFF);
lv_obj_add_event_cb(slider,my_event_cb_4,LV_EVENT_VALUE_CHANGED,NULL);
}
—加粗样式滑块的三种模式图解—
(十二)圆弧控件(Arc)
组成部分 |
编程对应 |
背景弧 |
LV_PART_MAIN |
前景弧(指示器) |
LV_PART_INDICATOR |
拖动旋钮 |
LV_PART_KNOB |
1.圆弧的创建
static void my_event_cb_5(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_VALUE_CHANGED)
{
printf("Value:%d \n",lv_arc_get_value(target));
}
}
void MY_GUI()
{
lv_obj_t *arc = lv_arc_create(lv_scr_act());
lv_obj_center(arc);
lv_arc_set_range(arc,0,200);
lv_arc_set_value(arc,100);
lv_arc_set_bg_angles(arc,135,45);
lv_obj_set_style_arc_color( arc, lv_color_hex(0xEEE9E9), LV_PART_KNOB );
lv_arc_set_mode(arc,LV_ARC_MODE_SYMMETRICAL);
lv_obj_remove_style(arc,NULL,LV_PART_KNOB);
lv_obj_add_event_cb(arc,my_event_cb_5,LV_EVENT_VALUE_CHANGED,NULL);
}
—圆弧角度设置图解—
(十三)线条控件(Line)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
1.线条的创建
static lv_point_t line_points[]={{10,10},{110,20},{100,60},{110,70},{10,80},{10,10}};
void MY_GUI()
{
lv_obj_t *line = lv_line_create(lv_scr_act());
lv_line_set_points(line,line_points,6);
lv_obj_set_style_line_width(line,8,LV_PART_MAIN);
lv_obj_set_style_line_rounded(line,true,LV_PART_MAIN);
}
(十四)图片控件(Img)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
1.图片的创建
LV_IMG_DECLARE(NCHU);
void MY_GUI()
{
lv_obj_t *img = lv_img_create(lv_scr_act());
lv_img_set_src(img,&NCHU);
lv_obj_center(img);
lv_obj_update_layout(img);
lv_img_set_pivot(img, 0, 0);
}
----LVGL图片的数组可以使用LVGL官网TOOL->Image Converter(加载可能有点慢!!!)----
Color format |
含义 |
CF_TRUE_COLOR |
存储RGB颜色 |
CF_TRUE_COLOR_ALPHA |
在RGB的基础上增加了不透明度 |
注:如果使用vscode+ESP_IDF开发ESP32,将生成的图片C数组添加到工程后,要进行full clean,再进行build;否则会出现图片数组未定义的报错!
(十五)色环条控件(colorwheel)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
旋钮 |
LV_PART_KNOB |
1.色环的创建
static lv_obj_t *obj ;
static void my_event_cb_6(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_obj_set_style_bg_color(obj,lv_colorwheel_get_rgb(target),LV_PART_MAIN);
}
void MY_GUI()
{
lv_obj_t *cw = lv_colorwheel_create(lv_scr_act(),false);
lv_obj_center(cw);
lv_obj_set_style_arc_width(cw,20,LV_PART_MAIN);
lv_colorwheel_set_rgb(cw,lv_color_hex(0x00FF00));
lv_obj_add_event_cb(cw,my_event_cb_6,LV_EVENT_VALUE_CHANGED,NULL);
obj = lv_obj_create(lv_scr_act());
lv_obj_center(obj);
lv_obj_set_style_bg_color(obj,lv_colorwheel_get_rgb(cw),LV_PART_MAIN);
lv_colorwheel_set_mode_fixed(cw,LV_COLORWHEEL_MODE_SATURATION);
}
(十六)按钮矩阵控件(Btnmatrix)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
按钮 |
LV_PART_ITEMS |
1.按钮矩阵的创建(示例)
lv_obj_t *label_input;
LV_IMG_DECLARE(user);
static lv_point_t points[]={{0,20},{0,240}};
static const char *map[] = { "1", "2", "3", "\n",
"4", "5", "6", "\n",
"7", "8", "9", "\n",
"#", "0", "%", "" };
static void my_event_cb_7(lv_event_t * e)
{
uint8_t id;
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_PRESSED)
{
id = lv_btnmatrix_get_selected_btn(target);
lv_label_set_text(label_input,lv_btnmatrix_get_btn_text(target,id));
lv_obj_align(label_input,LV_ALIGN_CENTER,0,0);
}
}
void MY_GUI()
{
lv_obj_t *img = lv_img_create(lv_scr_act());
lv_img_set_src(img,&user);
lv_img_set_zoom(img,128);
lv_obj_align(img,LV_ALIGN_CENTER,-140,-60);
lv_obj_set_style_img_recolor(img,lv_color_hex(0xf2f2f2),0);
lv_obj_set_style_img_recolor_opa(img,100,0);
lv_obj_t *label = lv_label_create(lv_scr_act());
lv_label_set_text(label,"USER");
lv_obj_set_style_text_font(label,&lv_font_montserrat_30,LV_PART_MAIN);
lv_obj_set_style_text_align(label,LV_TEXT_ALIGN_CENTER,LV_PART_MAIN);
lv_obj_align_to(label,img,LV_ALIGN_OUT_BOTTOM_MID,0,-20);
lv_obj_t *obj_input = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj_input,160,30);
lv_obj_align_to(obj_input,label,LV_ALIGN_OUT_BOTTOM_MID,0,16);
lv_obj_set_style_bg_color(obj_input,lv_color_hex(0xcccccc),0);
lv_obj_set_style_bg_opa(obj_input,150,0);
lv_obj_set_style_border_width(obj_input,0,0);
lv_obj_set_style_radius(obj_input,20,0);
lv_obj_remove_style(obj_input,NULL,LV_PART_SCROLLBAR);
label_input = lv_label_create(obj_input);
lv_label_set_text(label_input," ");
lv_obj_set_style_text_font(label_input,&lv_font_montserrat_30,LV_PART_MAIN);
lv_obj_set_style_text_align(label_input,LV_TEXT_ALIGN_CENTER,LV_PART_MAIN);
lv_obj_align_to(label_input,img,LV_ALIGN_OUT_BOTTOM_MID,0,10);
lv_obj_t *line = lv_line_create(lv_scr_act());
lv_line_set_points(line,points,2);
lv_obj_align(line,LV_ALIGN_CENTER,0,-20);
lv_obj_set_style_line_color(line,lv_color_hex(0xcdcdcd),0);
lv_obj_t *btnm = lv_btnmatrix_create(lv_scr_act());
lv_obj_set_size(btnm,220,280);
lv_btnmatrix_set_map(btnm, map);
lv_obj_align(btnm,LV_ALIGN_RIGHT_MID,0,0);
lv_obj_set_style_text_font(btnm,&lv_font_montserrat_30,LV_PART_ITEMS);
lv_obj_set_style_border_width(btnm,0,LV_PART_MAIN);
lv_obj_set_style_bg_opa(btnm,0,LV_PART_MAIN);
lv_obj_set_style_bg_opa(btnm,0,LV_PART_ITEMS);
lv_obj_set_style_shadow_opa(btnm,0,LV_PART_ITEMS);
lv_obj_add_event_cb(btnm,my_event_cb_7,LV_EVENT_PRESSED,NULL);
}
效果图
(十七)文本区域控件(Textarea)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
滚动条 |
LV_PART_SCROLLBAR |
所选文本 |
LV_PART_SELECTED |
光标 |
LV_PART_CURSOR |
占位符 |
TEXTAREA_PLACEHOLDER |
1.文本的创建(示例)
lv_obj_t *keyboard;
static void my_event_cb_11(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_FOCUSED)
{
lv_keyboard_set_textarea(keyboard,target);
}
else if(code == LV_EVENT_VALUE_CHANGED)
{
const char *text = lv_textarea_get_text(target);
}
}
static void my_event_cb_21(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_FOCUSED)
{
lv_keyboard_set_textarea(keyboard,target);
}
else if(code == LV_EVENT_VALUE_CHANGED)
{
const char *text = lv_textarea_get_text(target);
}
}
void MY_GUI()
{
lv_obj_t *ta1 = lv_textarea_create(lv_scr_act());
lv_obj_t *ta2 = lv_textarea_create(lv_scr_act());
lv_obj_align(ta1,LV_ALIGN_TOP_MID,0,10);
lv_obj_align(ta2,LV_ALIGN_TOP_MID,0,60);
lv_textarea_set_one_line(ta1, true);
lv_textarea_set_one_line(ta2, true);
keyboard = lv_keyboard_create(lv_scr_act());
lv_obj_add_event_cb(ta1,my_event_cb_11,LV_EVENT_ALL,NULL);
lv_obj_add_event_cb(ta2,my_event_cb_21,LV_EVENT_ALL,NULL);
}
效果图
(十八)键盘控件(Keyboard)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
按钮 |
LV_PART_ITEMS |
1.键盘的创建(示例)
static void my_event_cb_11(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_FOCUSED)
{
lv_keyboard_set_textarea(keyboard,target);
}
else if(code == LV_EVENT_VALUE_CHANGED)
{
const char *text = lv_textarea_get_text(target);
}
}
static void my_event_cb_21(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_FOCUSED)
{
lv_keyboard_set_textarea(keyboard,target);
}
else if(code == LV_EVENT_VALUE_CHANGED)
{
const char *text = lv_textarea_get_text(target);
}
}
void MY_GUI()
{
lv_obj_t *kb = lv_keyboard_create(lv_scr_act());
lv_obj_t *ta = lv_textarea_create(lv_scr_act());
lv_keyboard_set_textarea(kb, ta);
lv_keyboard_set_popovers(kb, true);
lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);
}
(十九)图片按钮控件(Imgbtn)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
1.图片按钮的创建(示例)
LV_IMG_DECLARE(Address);
LV_IMG_DECLARE(Close);
LV_IMG_DECLARE(Phone);
static lv_point_t points_imgbtn[]={{0,0},{0,150}};
static void my_event_cb_Address(lv_event_t * e)
{
static uint8_t flag=0;
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
if(flag == 0)
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0x00BFFF),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=1;
}
else
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=0;
}
}
}
static void my_event_cb_Close(lv_event_t * e)
{
static uint8_t flag=0;
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
if(flag == 0)
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0xff0000),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=1;
}
else
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=0;
}
}
}
static void my_event_cb_Phone(lv_event_t * e)
{
static uint8_t flag=0;
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
if(flag == 0)
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0x00EE76),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=1;
}
else
{
lv_obj_set_style_img_recolor(target,lv_color_hex(0x000000),LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor_opa(target,255,LV_STATE_DEFAULT);
flag=0;
}
}
}
void MY_GUI()
{
lv_obj_t *obj = lv_obj_create(lv_scr_act());
lv_obj_set_size(obj,420,200);
lv_obj_align(obj,LV_ALIGN_CENTER,0,0);
lv_obj_t *imgbtn1 = lv_imgbtn_create(obj);
lv_imgbtn_set_src(imgbtn1,LV_IMGBTN_STATE_RELEASED,NULL,&Address,NULL);
lv_obj_set_size(imgbtn1,64,64);
lv_obj_align(imgbtn1,LV_ALIGN_LEFT_MID,0,0);
lv_obj_add_event_cb(imgbtn1,my_event_cb_Address,LV_EVENT_CLICKED,NULL);
lv_obj_t *label_Address = lv_label_create(obj);
lv_label_set_text(label_Address,"Address");
lv_obj_align_to(label_Address,imgbtn1,LV_ALIGN_OUT_BOTTOM_MID,0,10);
lv_obj_t *imgbtn2 = lv_imgbtn_create(obj);
lv_imgbtn_set_src(imgbtn2,LV_IMGBTN_STATE_RELEASED,NULL,&Close,NULL);
lv_obj_set_size(imgbtn2,64,64);
lv_obj_align(imgbtn2,LV_ALIGN_CENTER,0,0);
lv_obj_add_event_cb(imgbtn2,my_event_cb_Close,LV_EVENT_CLICKED,NULL);
lv_obj_t *label_Close = lv_label_create(obj);
lv_label_set_text(label_Close,"Close");
lv_obj_align_to(label_Close,imgbtn2,LV_ALIGN_OUT_BOTTOM_MID,0,10);
lv_obj_t *imgbtn3 = lv_imgbtn_create(obj);
lv_imgbtn_set_src(imgbtn3,LV_IMGBTN_STATE_RELEASED,NULL,&Phone,NULL);
lv_obj_set_size(imgbtn3,64,64);
lv_obj_align(imgbtn3,LV_ALIGN_RIGHT_MID,0,0);
lv_obj_add_event_cb(imgbtn3,my_event_cb_Phone,LV_EVENT_CLICKED,NULL);
lv_obj_t *label_Phone = lv_label_create(obj);
lv_label_set_text(label_Phone,"Phone");
lv_obj_align_to(label_Phone,imgbtn3,LV_ALIGN_OUT_BOTTOM_MID,0,10);
lv_obj_t *line1 = lv_line_create(obj);
lv_line_set_points(line1,points_imgbtn,2);
lv_obj_align(line1,LV_ALIGN_CENTER,-90,0);
lv_obj_set_style_line_color(line1,lv_color_hex(0xcdcdcd),0);
lv_obj_t *line2 = lv_line_create(obj);
lv_line_set_points(line2,points_imgbtn,2);
lv_obj_align(line2,LV_ALIGN_CENTER,90,0);
lv_obj_set_style_line_color(line2,lv_color_hex(0xcdcdcd),0);
效果图
(二十)选项卡控件(Tabview)
组成部分 |
编程对应 |
主体 |
lv_obj |
按钮 |
lv_btnmatrix |
1.选项卡的创建(示例)
lv_obj_t *tabview = lv_tabview_create(lv_scr_act(),LV_DIR_TOP,50);
lv_obj_t *tab1 = lv_tabview_add_tab(tabview,"Mon");
lv_obj_t *tab2 = lv_tabview_add_tab(tabview,"Tue");
lv_obj_t *tab3 = lv_tabview_add_tab(tabview,"Wed");
lv_obj_t *tab4 = lv_tabview_add_tab(tabview,"Thu");
lv_obj_t *tab5 = lv_tabview_add_tab(tabview,"Fri");
lv_obj_t *tab6 = lv_tabview_add_tab(tabview,"Sat");
lv_obj_t *tab7 = lv_tabview_add_tab(tabview,"Sun");
lv_obj_t *label1 = lv_textarea_create(tab1);
lv_textarea_set_text(label1,"I will not make the same mistakes that you did I will not let myself cause my heart so much misery");
lv_obj_set_align(label1,LV_ALIGN_CENTER);
lv_obj_t *label2 = lv_textarea_create(tab2);
lv_textarea_set_text(label2,"I will not break the way you did you fell so hard");
lv_obj_set_align(label2,LV_ALIGN_CENTER);
lv_obj_t *label3 = lv_textarea_create(tab3);
lv_textarea_set_text(label3,"I've learned the hard way to never let it get that far");
lv_obj_set_align(label3,LV_ALIGN_CENTER);
lv_obj_t *label4 = lv_textarea_create(tab4);
lv_textarea_set_text(label4,"Because of you I never stray too far from the sidewalk");
lv_obj_set_align(label4,LV_ALIGN_CENTER);
lv_obj_t *label5 = lv_textarea_create(tab5);
lv_textarea_set_text(label5,"Because of you I learned to play on the safe side so I don't get hurt");
lv_obj_set_align(label5,LV_ALIGN_CENTER);
lv_obj_t *label6 = lv_textarea_create(tab6);
lv_textarea_set_text(label6,"Because of you I find it hard to trust not only me, but everyone around me");
lv_obj_set_align(label6,LV_ALIGN_CENTER);
lv_obj_t *label7 = lv_textarea_create(tab7);
lv_textarea_set_text(label7,"Because of you I am afraid I lose my way");
lv_obj_set_align(label7,LV_ALIGN_CENTER);
lv_obj_t *btn = lv_tabview_get_tab_btns(tabview);
lv_obj_set_style_bg_color(btn,lv_color_hex(0xb7472a),LV_PART_ITEMS|LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(btn,200,LV_PART_ITEMS|LV_STATE_DEFAULT);
lv_obj_set_style_text_color(btn,lv_color_hex(0xf3f3f3),LV_PART_ITEMS|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(btn,lv_color_hex(0xe1e1e1),LV_PART_ITEMS|LV_STATE_CHECKED);
lv_obj_set_style_bg_opa(btn,200,LV_PART_ITEMS|LV_STATE_CHECKED);
lv_obj_set_style_text_color(btn,lv_color_hex(0xb7472a),LV_PART_ITEMS|LV_STATE_CHECKED);
lv_obj_set_style_border_width(btn,5,LV_PART_ITEMS|LV_STATE_CHECKED);
lv_obj_t *obj = lv_tabview_get_content(tabview);
lv_obj_set_style_bg_color(obj,lv_color_hex(0xffffff),LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(obj,255,LV_STATE_DEFAULT);
lv_tabview_set_act(tabview,0,LV_ANIM_OFF);
}
效果图
(二十一)平铺视图控件(Tileview)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
按钮 |
LV_PART_SCROLLBAR |
1.平铺视图的创建(示例)
lv_obj_t *tileview = lv_tileview_create( lv_scr_act() );
lv_obj_set_size(tileview,480,320);
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|LV_DIR_RIGHT );
lv_obj_t *tile3 = lv_tileview_add_tile( tileview, 2, 0, LV_DIR_LEFT );
lv_obj_t *label_1 = lv_label_create(tile1);
lv_label_set_text(label_1,"Page_1");
lv_obj_center(label_1);
lv_obj_t *label_2 = lv_label_create(tile2);
lv_label_set_text(label_2,"Page_2");
lv_obj_center(label_2);
lv_obj_t *label_3 = lv_label_create(tile3);
lv_label_set_text(label_3,"Page_3");
lv_obj_center(label_3);
lv_obj_remove_style(tileview,NULL,LV_PART_SCROLLBAR);
lv_obj_t *label_left = lv_label_create(lv_scr_act());
lv_label_set_text(label_left,"AM 5:50");
lv_obj_align(label_left,LV_ALIGN_TOP_LEFT,10,10);
lv_obj_t *label_right = lv_label_create(lv_scr_act());
lv_label_set_text(label_right,LV_SYMBOL_WIFI " 95% " LV_SYMBOL_BATTERY_3);
lv_obj_align(label_right,LV_ALIGN_TOP_RIGHT,-10,10);
lv_obj_set_tile_id( tileview, 0, 0, LV_ANIM_OFF );
效果图
(二十二)窗口部件控件(Win)
组成部分 |
编程对应 |
头部 |
Header |
主体 |
Content |
1.窗口部件的创建(示例)
lv_obj_t *win;
static void btn_event_cb(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
lv_obj_add_flag(win,LV_OBJ_FLAG_HIDDEN);
}
}
void MY_GUI()
{
win = lv_win_create(lv_scr_act(),30);
lv_obj_set_size(win,300,200);
lv_obj_center(win);
lv_obj_set_style_border_width(win,1,LV_STATE_DEFAULT);
lv_obj_set_style_border_color(win,lv_color_hex(0x8a8a8a),LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(win,100,LV_STATE_DEFAULT);
lv_obj_set_style_radius(win,10,LV_STATE_DEFAULT);
lv_obj_t *btn_set = lv_win_add_btn(win,LV_SYMBOL_SETTINGS ,30);
lv_obj_set_style_bg_opa(btn_set,0,LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(btn_set,0,LV_STATE_DEFAULT);
lv_obj_set_style_text_color(btn_set,lv_color_hex(0x000000),LV_STATE_DEFAULT);
lv_obj_t *title = lv_win_add_title(win,"Setting");
lv_obj_t *bt_close = lv_win_add_btn(win,LV_SYMBOL_CLOSE,30);
lv_obj_set_style_bg_opa(bt_close,0,LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(bt_close,0,LV_STATE_DEFAULT);
lv_obj_set_style_text_color(bt_close,lv_color_hex(0x000000),LV_STATE_DEFAULT);
lv_obj_set_style_text_color(bt_close,lv_color_hex(0xff0000),LV_STATE_PRESSED);
lv_obj_add_event_cb(bt_close,btn_event_cb,LV_EVENT_CLICKED,NULL);
lv_obj_t *content = lv_win_get_content(win);
lv_obj_set_style_bg_color(content,lv_color_hex(0xffffff),LV_STATE_DEFAULT);
lv_obj_t *slider_music = lv_slider_create(content);
lv_obj_set_size(slider_music,200,20);
lv_obj_align(slider_music,LV_ALIGN_CENTER,0,-20);
lv_slider_set_value(slider_music,50,LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider_music,lv_color_hex(0x787c78),LV_PART_MAIN);
lv_obj_set_style_bg_color(slider_music,lv_color_hex(0x00BFFF),LV_PART_INDICATOR);
lv_obj_remove_style(slider_music,NULL,LV_PART_KNOB);
lv_obj_t *label_music = lv_label_create(content);
lv_label_set_text(label_music,LV_SYMBOL_AUDIO);
lv_obj_align_to(label_music,slider_music,LV_ALIGN_OUT_LEFT_MID,-5,0);
lv_obj_t *slider_clock = lv_slider_create(content);
lv_obj_set_size(slider_clock,200,20);
lv_obj_align(slider_clock,LV_ALIGN_CENTER,0,20);
lv_slider_set_value(slider_clock,50,LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider_clock,lv_color_hex(0x787c78),LV_PART_MAIN);
lv_obj_set_style_bg_color(slider_clock,lv_color_hex(0x00BFFF),LV_PART_INDICATOR);*设置指示器颜色*/
lv_obj_remove_style(slider_clock,NULL,LV_PART_KNOB);
lv_obj_t *label_clock = lv_label_create(content);
lv_label_set_text(label_clock,LV_SYMBOL_BELL);
lv_obj_align_to(label_clock,slider_clock,LV_ALIGN_OUT_LEFT_MID,-5,0);
}
效果图
(二十三)消息框控件(Msgbox)
组成部分 |
编程对应 |
主体 |
obj |
标题 |
title |
关闭按钮 |
close_btn |
内容 |
content |
按钮矩阵 |
btnmatrix |
1.消息框的创建(示例)
lv_obj_t *slider_label;
lv_obj_t *msgbox;
static void slider_sound_event_cb(lv_event_t * e)
{
static uint8_t flag=0;
lv_obj_t *target = lv_event_get_current_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_VALUE_CHANGED)
{
lv_label_set_text_fmt(slider_label,"%d%%",lv_slider_get_value(target));
if(lv_slider_get_value(target) >= 80 && flag == 0)
{
lv_obj_clear_flag(msgbox,LV_OBJ_FLAG_HIDDEN);
flag = 1;
}
else if(lv_slider_get_value(target) < 80)
{
flag = 0;
}
}
}
static void msgbox_btn_event_cb(lv_event_t * e)
{
lv_obj_t *target = lv_event_get_current_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
lv_obj_add_flag(msgbox,LV_OBJ_FLAG_HIDDEN);
}
}
void MY_GUI()
{
static const char *btns[] = {" "," ","OK"," "};
lv_obj_t *slider_sound = lv_slider_create(lv_scr_act());
lv_obj_set_size(slider_sound,200,15);
lv_obj_align(slider_sound,LV_ALIGN_CENTER,0,0);
lv_slider_set_value(slider_sound,50,LV_ANIM_OFF);
lv_obj_add_event_cb(slider_sound,slider_sound_event_cb,LV_EVENT_VALUE_CHANGED,NULL);
slider_label = lv_label_create(lv_scr_act());
lv_label_set_text(slider_label,"50%");
lv_obj_align_to(slider_label,slider_sound,LV_ALIGN_OUT_RIGHT_MID,5,0);
lv_obj_t *sound_label = lv_label_create(lv_scr_act());
lv_label_set_text(sound_label,LV_SYMBOL_VOLUME_MAX);
lv_obj_align_to(sound_label,slider_sound,LV_ALIGN_OUT_LEFT_MID,-5,0);
msgbox = lv_msgbox_create(lv_scr_act(),LV_SYMBOL_WARNING "Notice","Excessive volume may damage hearing.",btns,false);
lv_obj_set_size(msgbox,250,150);
lv_obj_center(msgbox);
lv_obj_set_style_border_width(msgbox,0,LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(msgbox,20,LV_STATE_DEFAULT);
lv_obj_set_style_shadow_color(msgbox,lv_color_hex(0xa9a9a9),LV_STATE_DEFAULT);
lv_obj_set_style_pad_top(msgbox,18,LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(msgbox,20,LV_STATE_DEFAULT);
lv_obj_t *title = lv_msgbox_get_title(msgbox);
lv_obj_set_style_text_color(title,lv_color_hex(0xff0000),LV_STATE_DEFAULT);
lv_obj_t *content = lv_msgbox_get_content(msgbox);
lv_obj_set_style_text_color(content,lv_color_hex(0x6c6c6c),LV_STATE_DEFAULT);
lv_obj_set_style_pad_top(content,15,LV_STATE_DEFAULT);
lv_obj_t *btn = lv_msgbox_get_btns(msgbox);
lv_obj_set_style_bg_opa(btn,0,LV_PART_ITEMS);
lv_obj_set_style_shadow_width(btn,0,LV_PART_ITEMS);
lv_obj_set_style_text_color(btn,lv_color_hex(0x2271df),LV_PART_ITEMS);
lv_obj_set_style_text_color(btn,lv_color_hex(0xff0000),LV_PART_ITEMS|LV_STATE_PRESSED);
lv_obj_add_event_cb(btn,msgbox_btn_event_cb,LV_EVENT_CLICKED,NULL);
lv_obj_add_flag(msgbox,LV_OBJ_FLAG_HIDDEN);
}
效果图
(二十四)微调器控件(Spinbox)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
光标 |
LV_PART_CURSOR |
1.微调器的创建(示例)
lv_obj_t *spinbox;
static void spinbox_btnadd_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
lv_spinbox_increment(spinbox);
}
}
static void spinbox_btndec_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
lv_spinbox_decrement(spinbox);
}
}
void MY_GUI()
{
spinbox = lv_spinbox_create(lv_scr_act());
lv_obj_center(spinbox);
lv_spinbox_set_value(spinbox,0);
lv_spinbox_set_digit_format(spinbox, 4, 2);
lv_spinbox_set_pos(spinbox, 1);
lv_spinbox_set_step(spinbox,1);
lv_spinbox_set_range(spinbox,-1000,1000);
lv_obj_t *btn_add = lv_btn_create(lv_scr_act());
lv_obj_align_to(btn_add,spinbox,LV_ALIGN_OUT_RIGHT_MID,5,0);
lv_obj_set_style_bg_img_src(btn_add,LV_SYMBOL_PLUS,LV_PART_MAIN);
lv_obj_add_event_cb(btn_add,spinbox_btnadd_event_cb,LV_EVENT_CLICKED,NULL);
lv_obj_t *btn_dec = lv_btn_create(lv_scr_act());
lv_obj_align_to(btn_dec,spinbox,LV_ALIGN_OUT_LEFT_MID,-5,0);
lv_obj_set_style_bg_img_src(btn_dec,LV_SYMBOL_MINUS,LV_PART_MAIN);
lv_obj_add_event_cb(btn_dec,spinbox_btndec_event_cb,LV_EVENT_CLICKED,NULL);
效果图
(二十五)表格控件(Table)
组成部分 |
编程对应 |
主体 |
LV_PART_MAIN |
单元格 |
LV_PART_ITEMS |
1.表格的创建(示例)
void MY_GUI()
{
lv_obj_t *table = lv_table_create(lv_scr_act());
lv_obj_set_height(table,160);
lv_obj_center(table);
lv_obj_t *label_title = lv_label_create(lv_scr_act());
lv_obj_align_to(label_title,table,LV_ALIGN_OUT_TOP_MID,-30,-5);
lv_label_set_text(label_title,"Fruit Prices");
lv_table_set_cell_value(table,0,0,"Fruit");
lv_table_set_cell_value(table,1,0,"AAAA");
lv_table_set_cell_value(table,2,0,"BBBB");
lv_table_set_cell_value(table,3,0,"CCCC");
lv_table_set_cell_value(table,4,0,"DDDD");
lv_table_set_cell_value(table,5,0,"EEEE");
lv_table_set_cell_value(table,6,0,"FFFF");
lv_table_set_cell_value(table,0,1,"Prices");
lv_table_set_cell_value(table,1,1,"$12");
lv_table_set_cell_value(table,2,1,"$13");
lv_table_set_cell_value(table,3,1,"$14");
lv_table_set_cell_value(table,4,1,"$15");
lv_table_set_cell_value(table,5,1,"$16");
lv_table_set_cell_value(table,6,1,"$19");
lv_table_set_col_width(table,0,100);
lv_table_set_col_width(table,1,100);
}
效果图
文章来源:https://www.toymoban.com/news/detail-597422.html
(二十六)中文字库应用
步骤 |
操作 |
第一步 |
准备使用到的字体文件(TTF、OTF等格式) |
第二步 |
在LVGL官网使用在线字体转换工具 网址链接
|
第三步 |
添加生成的字库到LVGL工程中,声明调用LV_FONT_DECLARE()
|
字体生成工具的使用
常规中文字库编码范围:文章来源地址https://www.toymoban.com/news/detail-597422.html
文字 |
编码范围 |
基本汉字 |
0x4E00-0x7FA5 |
数字、拉丁字母、标点符号 |
0x20-0x7E |
注:转换范围越大生成字库所占内存越大,根据自己的硬件资源合理选择 |
|
参考资料
-----LVGL官网手册链接-----
-----百问网LVGL参考手册链接-----
到了这里,关于LVGL8.2学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!