代码收藏家 深入学习LVGL8.2的笔记分享
LVGL8.2学习笔记
笔记主要记录LVGL控件基本的编程使用和相关的程序，并且在程序中对使用到的API函数进行简要注解（有些是个人的理解），以便后续根据实际项目所需直接套用对应的控件代码修改使用；本文主要参考的是正点原子的LVGL相关教程。
LVGL控件的基础知识
(1) C语言编写的LVGL以结构体的形式实现类似C++ “Class”的思想：
#mermaid-svg-TAj29S0CwzLWZ8Gc {font-family:”trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .error-icon{fill:#552222;}#mermaid-svg-TAj29S0CwzLWZ8Gc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TAj29S0CwzLWZ8Gc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .marker.cross{stroke:#333333;}#mermaid-svg-TAj29S0CwzLWZ8Gc svg{font-family:”trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .label{font-family:”trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .cluster-label text{fill:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .cluster-label span{color:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .label text,#mermaid-svg-TAj29S0CwzLWZ8Gc span{fill:#333;color:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .node rect,#mermaid-svg-TAj29S0CwzLWZ8Gc .node circle,#mermaid-svg-TAj29S0CwzLWZ8Gc .node ellipse,#mermaid-svg-TAj29S0CwzLWZ8Gc .node polygon,#mermaid-svg-TAj29S0CwzLWZ8Gc .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .node .label{text-align:center;}#mermaid-svg-TAj29S0CwzLWZ8Gc .node.clickable{cursor:pointer;}#mermaid-svg-TAj29S0CwzLWZ8Gc .arrowheadPath{fill:#333333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-TAj29S0CwzLWZ8Gc .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-TAj29S0CwzLWZ8Gc .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TAj29S0CwzLWZ8Gc .cluster text{fill:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc .cluster span{color:#333;}#mermaid-svg-TAj29S0CwzLWZ8Gc div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:”trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-TAj29S0CwzLWZ8Gc :root{–mermaid-font-family:”trebuchet ms”,verdana,arial,sans-serif;}
实例化
派生
基础对象lv_obj_t
基础/父 对象
子对象
按钮lv_btn
标签lv_label
进度条lv_bar
下拉列表lv_dropdown
开关lv_switch
….etc
图中的子对象也可以作为父对象，如以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函数：
/*设置X坐标*/
lv_obj_set_x(obj, new_x);
/*设置Y轴坐标*/
lv_obj_set_y(obj, new_y);
/*同时设置X、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函数：
/*自定义样式添加的基本流程；（可封装为一个函数）*/
/*-------------------------------------Start--------------------------------------*/
static lv_style_t style; /* 定义样式变量，需设置为静态或全局 */
lv_obj_t* obj = lv_obj_create(lv_scr_act()); /* 创建控件 */
lv_style_init(&style); /* 初始化样式 */
/**每个控件都有不同的样式属性**/
/*--(大小)Size--(位置)Position--(背景)Background--(轮廓)Outline--(边框)Border--(阴影)Shadow--其他--*/
/*可参考LVGL手册查找对应API，举例如下*/
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); /* 设置部件的样式 */
/*-------------------------------------End--------------------------------------*/
/*本地样式的添加*/
/*-------------------------------------Start--------------------------------------*/
lv_obj_t * obj = lv_obj_create(lv_scr_act()); /* 创建部件 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff),LV_STATE_DEFAULT); /* 设置部件的样式 */
/*-------------------------------------End--------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------控件在什么状态下使样式生效---------------------------*/
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); /*parent为标签以什么作为父类*/
2. 标签文本设置
/*直接设置文本，文本由内存动态分配*/
lv_label_set_text(label, "Text");
/*设置文本，文本存放在指定缓存区，慎用！！！*/
lv_label_set_text_static( label,"Text" );
/*格式化显示文本，类似printf,可用于事件更新显示*/
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# " ); /*单独设置颜色*/
设置个别文本的字体颜色效果：
若需要更改字体可在lv_conf.h修改如下宏定义：
4. 文本超出部件大小
(1). 若设置了部件大小lv_obj_set_size( )则文本超出部分会被裁剪掉；若没有限定标签部件大小，则自动扩展为文本大小。
(2).设置长文本模式
lv_label_set_long_mode(label,LV_LABEL_LONG_...);
/*对应可选的长文本模式*/
enum {
/*默认模式，如果部件大小固定，超出文本被裁剪*/
LV_LABEL_LONG_WRAP, /**< Keep the object width, wrap the too long lines and expand the object height*/
/*文本最下面超出字符将被替换为...*/
LV_LABEL_LONG_DOT, /**< Keep the size and write dots at the end if the text is too long*/
/*来回滚动*/
LV_LABEL_LONG_SCROLL, /**< Keep the size and roll the text back and forth*/
/*循环滚动*/
LV_LABEL_LONG_SCROLL_CIRCULAR, /**< Keep the size and roll the text circularly*/
/*直接剪切掉外面的文本部分*/
LV_LABEL_LONG_CLIP, /**< Keep the size and clip the text out of it*/
};
(二)按钮控件(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 == /*触发控件 btn1*/ )
{
/***事件处理代码***/
}
else if (target ==/*触发控件 btn2*/)
{
/***事件处理代码***/
}
//...
}
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 ); /* 添加事件 注：要使用LV_EVENT_VALUE_CHANGED事件，就必须开启状态切换*/
}
(三)开关控件(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 == /*触发控件 switch1*/ )
{
/***事件处理代码***/
if(lv_obj_has_state(switch1, LV_STATE_CHECKED)==1) /*判断开关状态*/
{
lv_obj_clear_state(switch2, LV_STATE_CHECKED); /* 清除开关2的状态*/
}
}
else if (target ==/*触发控件 switch2*/)
{
/***事件处理代码***/
if(lv_obj_has_state(switch2, LV_STATE_CHECKED)==1) /*判断开关状态*/
{
lv_obj_clear_state(switch1, LV_STATE_CHECKED); /* 清除开关1的状态*/
}
}
//...
}
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) /* 返回值：bool类型，开 :1；关: 0 */
(四)复选框控件(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); /* 返回值：1，选中； 0，非选中 */
(五)进度条控件(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 ); /* 设置当前值 */
}
/*几点注意事项
1.当进度条高度大于宽度时，其方向变为垂直。
2.动画时间设置需要放在当前值设置之前 ，否则看不到动画效果。
3.动画时间指的是旧值刷新到新值的绘图时间，并不是现实中当前值变化所需的时间。
*/
2.进度条模式、起始值设置
enum {
LV_BAR_MODE_NORMAL, /* 默认模式 */
LV_BAR_MODE_SYMMETRICAL, /* 从零值绘制到当前值（当前值可以小于0）,该模式不能设置起始值 */
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);/*动画效果一定要放在bar值的设置之前*/
// lv_bar_set_value(bar,0,LV_ANIM_ON);
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) ); /* 设置LED颜色 */
lv_led_set_brightness( led, 255 ); /* 设置LED亮度，范围0~255，感觉没什么变化*/
}
2.LED状态切换
lv_led_on( led ); /* 打开LED（设置亮度为255）*/
lv_led_off( led ); /* 关闭LED */
lv_led_toggle( led ); /* 翻转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_set_options_static( dd, "a\nb\nc\nd "); /* 设置选项 （静态）*/
lv_dropdown_add_option( dd, "e", 4); /* 添加选项，索引从0开始，注意若使用这个添加，就不能使用上面静态添加函数 */
lv_dropdown_set_selected(dd, 1); /* 设置选中的选项，注意：索引从0开始 */
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);
/*可通过其他事件触发，锁定滚轮为不可选模式,操作如下*/
/*
if(/触发条件/)
{
lv_obj_add_state(roller,LV_STATE_DISABLED);
}
else
{
lv_obj_clear_state(roller,LV_STATE_DISABLED);
}
*/
}
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); /* 设置所选项(不设置默认首项)，注意：索引从0开始，第三个参数为动画是否开启*/
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_obj_set_size(slider, 20, 200); /* 高度>宽度时，滑块为纵向 */
lv_slider_set_range(slider, -100, 100); /* 设置范围值,默认范围0-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); /* 设置背景弧 ，该API要在前景弧设置之前*/
lv_obj_set_style_arc_color( arc, lv_color_hex(0xEEE9E9), LV_PART_KNOB ); /* 设置旋钮颜色 */
lv_arc_set_mode(arc,LV_ARC_MODE_SYMMETRICAL); /* 模式设置 */
// lv_arc_set_rotation(arc,180); /* 旋转圆弧的角度 */
lv_obj_remove_style(arc,NULL,LV_PART_KNOB);
// lv_arc_set_change_rate(arc,90); /* 绘制速率 越大越快*/
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); /* 设置拐角为圆角 */
// lv_line_set_y_invert(line,true); /* 设置按y轴反转 */
}
(十四)图片控件(Img)
| 组成部分 | 编程对应 |
|---|---|
| 主体 | LV_PART_MAIN |
1.图片的创建
LV_IMG_DECLARE(NCHU); /* 声明图片 */
void MY_GUI()
{
lv_obj_t *img = lv_img_create(lv_scr_act());
// lv_obj_center(img);
lv_img_set_src(img,&NCHU);
lv_obj_center(img);
// lv_img_set_offset_x(img,100); /*设置图片的x偏移*/
// lv_img_set_offset_y(img,50); /*设置图片的y偏移*/
// lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN); /*图片重新着色，需要配合透明度设置*/
// lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN); /*图片透明度设置*/
// lv_img_set_zoom(img, 128); /* 图片的缩放：128缩小1/2；256原尺寸；512放大2倍 */
// lv_img_set_angle(img, 900); /* 顺时针方向旋转90°*/
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(cw,LV_COLORWHEEL_MODE_SATURATION); /* 色相、饱和度、透明度设置，长按时有BUG导致模式乱切换，不建议 */
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);/* 按钮矩阵回调 */
// lv_btnmatrix_set_btn_width(btnm,2,2); /* 索引 (id) 从0开始，宽度1~7 ( 默认为1 ) */
// lv_btnmatrix_set_one_checked(btnm,true); /*设置单次选中属性*/
// lv_btnmatrix_set_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_RECOLOR); /* 设置单个按钮属性 */
// lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...); /* 清除单个按钮属性 */
// lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE|LV_BTNMATRIX_CTRL_RECOLOR);/* 设置所有按钮属性 */
// lv_btnmatrix_clear_btn_ctrl_all(btnm,LV_BTNMATRIX_CTRL_..); /* 清除所有按钮属性 */
}
效果图
(十七)文本区域控件(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);/* 回调 */
// 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); /* 关联键盘和文本区域部件 */
//
// lv_textarea_set_cursor_pos(ta,LV_TEXTAREA_CURSOR_LAST);
//
// lv_textarea_del_char(ta); /* 删除光标左侧的一个字符 */
// lv_textarea_del_char_forward(ta); /* 删除光标右侧的一个字符 */
// lv_textarea_set_one_line(ta, true); /* 单行模式,超过内容则形成滚动条 */
// lv_textarea_set_password_mode(ta, true); /* 密码模式（1.5s后隐藏输入的内容） */
// lv_textarea_set_password_show_time(ta, 100); /* 密码显示时间 */
// lv_textarea_set_accepted_chars(ta,"0123456789"); /* 限制接收的字符 */
// lv_textarea_set_max_length(ta,6); /* 限制字符长度 */
// lv_textarea_set_placeholder_text(ta, "password"); /* 提示输入密码 */
// const char *txt = lv_textarea_get_text(ta); /* 获取文本框文本 */
// strcmp(const char *s1,const char *s2); /* 当s1=s2时，返回0 */
}
效果图
(十八)键盘控件(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_set_style_text_font(tabview,font,LV_STATE_DEFAULT); /*设置字体*/
lv_obj_t *tab1 = lv_tabview_add_tab(tabview,"Mon"); /*添加选项卡1*/
lv_obj_t *tab2 = lv_tabview_add_tab(tabview,"Tue"); /*添加选项卡2*/
lv_obj_t *tab3 = lv_tabview_add_tab(tabview,"Wed"); /*添加选项卡3*/
lv_obj_t *tab4 = lv_tabview_add_tab(tabview,"Thu"); /*添加选项卡4*/
lv_obj_t *tab5 = lv_tabview_add_tab(tabview,"Fri"); /*添加选项卡5*/
lv_obj_t *tab6 = lv_tabview_add_tab(tabview,"Sat"); /*添加选项卡6*/
lv_obj_t *tab7 = lv_tabview_add_tab(tabview,"Sun"); /*添加选项卡7*/
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); /* 索引从0开始,关闭动画 */
}
效果图
(二十一)平铺视图控件(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_set_style_text_font(label_1,font,LV_STATE_DEFAULT); /*设置标签字体*/
lv_obj_center(label_1); /*对齐*/
lv_obj_t *label_2 = lv_label_create(tile2); /*创建标签*/
lv_label_set_text(label_2,"Page_2"); /*添加标签文本*/
// lv_obj_set_style_text_font(label_1,font,LV_STATE_DEFAULT); /*设置标签字体*/
lv_obj_center(label_2); /*对齐*/
lv_obj_t *label_3 = lv_label_create(tile3); /*创建标签*/
lv_label_set_text(label_3,"Page_3"); /*添加标签文本*/
// lv_obj_set_style_text_font(label_3,font,LV_STATE_DEFAULT); /*设置标签字体*/
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_update_layout( tileview ); /* 更新参数 */
// lv_obj_set_tile( tileview, tile2, LV_ANIM_OFF ); /* 根据页面对象设置 */
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_set_style_text_font(title,);
/*右侧按钮*/
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); /* 获取触发源,这里特别注意和msgbox常规获取函数不同 */
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); /* 获取触发源,这里特别注意和msgbox常规获取函数不同 */
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_add_event_cb(msgbox,slider_sound_event_cb,LV_EVENT_CLICKED,NULL); /*回调函数*/
/*消息框标题*/
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); /*隐藏msgbox*/
}
效果图
(二十四)微调器控件(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);
}
效果图
(二十六)中文字库应用
| 步骤 | 操作 |
|---|---|
| 第一步 | 准备使用到的字体文件（TTF、OTF等格式） |
| 第二步 | 在LVGL官网使用在线字体转换工具 网址链接 |
| 第三步 | 添加生成的字库到LVGL工程中，声明调用LV_FONT_DECLARE() |
字体生成工具的使用
常规中文字库编码范围：
| 文字 | 编码范围 |
|---|---|
| 基本汉字 | 0x4E00-0x7FA5 |
| 数字、拉丁字母、标点符号 | 0x20-0x7E |
| 注：转换范围越大生成字库所占内存越大，根据自己的硬件资源合理选择 |
