LVGL学习
注：本文使用的lvgl-release-v8.3版本，其它版本可能稍有不同。
01 快速入门
1.1 LVGL模拟器配置
day01-02_课程介绍_哔哩哔哩_bilibili
LVGL开发教程 (yuque.com)
如果按照上述视频和文档中配置不成功的话，直接重装VsCode，我的就是重装以后就好了。
LVGL查询手册：
Introduction（介绍） — LVGL 文档 (100ask.net)
Welcome to the documentation of LVGL! — LVGL documentation
1.2 创建第一个对象
1.2.1 创建第一个对象
在main.c里添加一个创建对象的函数。
void demo1()
{
// 1.构建一个显示图层(窗口)
lv_obj_t* screen = lv_scr_act();
// 2.在窗口上创建一个对象
lv_obj_t* obj = lv_obj_create(screen);
// 3.设置对象的位置
lv_obj_set_pos(obj,10,30);
// 4.设置对象的宽度和高度
lv_obj_set_height(obj,50);
lv_obj_set_width(obj,50);
// 5.设置对象的对齐
lv_obj_center(obj); //执行这串代码会让这个对象在当前窗口居中
lv_obj_align(obj,LV_ALIGN_BOTTOM_MID,0,0); //底部居中对齐，后面两个参数是x方向和y方向偏移
// 6.设置样式
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_RED));
// 7.将样式和对象关联起来
lv_obj_add_style(obj,&style,0);
}
然后在main函数里调用上述函数就完成了第一个对象的创建。
1.2.2 设置对象样式
void demo2()
{
// 1.构建一个显示图层(窗口)
lv_obj_t* screen = lv_scr_act();
// 2.在窗口上创建一个对象
lv_obj_t* obj = lv_obj_create(screen);
// 3.设置对象的位置
lv_obj_set_pos(obj,10,30);
// 4.设置对象的宽度和高度
lv_obj_set_height(obj,50);
lv_obj_set_width(obj,50);
// 5.设置对象的对齐
lv_obj_center(obj); //执行这串代码会让这个对象在当前窗口居中
// 6.设置样式
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&style,20); // 设置圆角
// 7.将样式和对象关联起来
lv_obj_add_style(obj,&style,0);
}
然后再main函数里调用。
1.3 控件
1.3.1 label文本
1.3.1.1 创建label标签
/*显示文本*/
void demo_label()
{
// 1.得到当前活跃的屏幕
lv_obj_t* screen = lv_scr_act();
// 2.创建文本对象
lv_obj_t* label = lv_label_create(screen);
// 3.设置文本对象内容，位置，颜色等等
lv_label_set_text(label,"Hello ICK");
// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置
lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央
// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色
lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色
}
1.3.1.2 不同设备上颜色设置
1.3.1.3 改变label字体大小和颜色
注意看左下角和右下角会显示内存使用率和帧率，如果不像是要进行设置。
左下角和右下角没有了。
配置了各种字体大小，写1是可用的。
void demo_label()
{
// 1.得到当前活跃的屏幕
lv_obj_t* screen = lv_scr_act();
// 2.创建文本对象
lv_obj_t* label = lv_label_create(screen);
// 3.设置文本对象内容，位置，颜色等等
lv_label_set_text(label,"Hello ICK");
// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置
lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央
// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色
lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色，最后一个参数默认是0
// 4.定义一个样式显示标签字体
static lv_style_t style;
lv_style_init(&style); //初始化样式结构体
lv_style_set_text_font(&style,&lv_font_montserrat_48); //设置字体大小
// 5.将样式和字体关联起来
lv_obj_add_style(label,&style,0); //最后一个参数默认是0
}
1.3.1.4 显示中文
字体库转换（对中文进行编码）：
Font Converter — LVGL
字体库下载：
iconfont-阿里巴巴矢量图标库
下面这个c代码就是转换出来的字体。
/*******************************************************************************
* Size: 38 px
* Bpp: 1
* Opts: --bpp 1 --size 38 --no-compress --font AlimamaShuHeiTi-Bold.ttf --symbols 学习嵌入式的过程是漫长的! --format lvgl -o alimama.c
******************************************************************************/
#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
#ifndef ALIMAMA
#define ALIMAMA 1
#endif
#if ALIMAMA
/*-----------------
* BITMAPS
*----------------*/
/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
/* U+0021 "!" */
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x0, 0x0, 0x3,
0xff, 0xff, 0xff, 0xff, 0xc0,
/* U+4E60 "习" */
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xe0, 0x0, 0x0, 0x7, 0xc0,
0x0, 0x0, 0xf, 0x80, 0xfc, 0x0, 0x1f, 0x1,
0xf8, 0x0, 0x3e, 0x1, 0xf0, 0x0, 0x7c, 0x3,
0xf0, 0x0, 0xf8, 0x3, 0xe0, 0x1, 0xf0, 0x7,
0xe0, 0x3, 0xe0, 0xf, 0xc0, 0x7, 0xc0, 0xf,
0x80, 0xf, 0x80, 0x1f, 0x80, 0x1f, 0x0, 0x1f,
0x0, 0x3e, 0x0, 0x0, 0x8, 0x7c, 0x0, 0x0,
0x70, 0xf8, 0x0, 0x7, 0xe1, 0xf0, 0x0, 0x3f,
0xc3, 0xe0, 0x3, 0xff, 0x87, 0xc0, 0x1f, 0xff,
0xf, 0x81, 0xff, 0xf8, 0x1f, 0xf, 0xff, 0xc0,
0x3e, 0x7f, 0xfc, 0x0, 0x7d, 0xff, 0xe0, 0x0,
0xfb, 0xfe, 0x0, 0x1, 0xf7, 0xf0, 0x0, 0xff,
0xef, 0x0, 0x1, 0xff, 0xd8, 0x0, 0x3, 0xff,
0x80, 0x0, 0x7, 0xff, 0x0, 0x0, 0xf, 0xfe,
/* U+5165 "入" */
0x0, 0xff, 0xf0, 0x0, 0x0, 0x1f, 0xfe, 0x0,
0x0, 0x3, 0xff, 0xc0, 0x0, 0x0, 0x7f, 0xf8,
0x0, 0x0, 0xf, 0xff, 0x0, 0x0, 0x0, 0x3,
0xe0, 0x0, 0x0, 0x0, 0x7c, 0x0, 0x0, 0x0,
0xf, 0x80, 0x0, 0x0, 0x1, 0xf0, 0x0, 0x0,
0x0, 0x3e, 0x0, 0x0, 0x0, 0x7, 0xe0, 0x0,
0x0, 0x0, 0xfc, 0x0, 0x0, 0x0, 0x1f, 0x80,
0x0, 0x0, 0x7, 0xf0, 0x0, 0x0, 0x0, 0xfe,
0x0, 0x0, 0x0, 0x1f, 0xe0, 0x0, 0x0, 0x7,
0xfc, 0x0, 0x0, 0x0, 0xff, 0xc0, 0x0, 0x0,
0x3f, 0xf8, 0x0, 0x0, 0x7, 0xff, 0x80, 0x0,
0x1, 0xfb, 0xf8, 0x0, 0x0, 0x7f, 0x3f, 0x0,
0x0, 0x1f, 0xc3, 0xf0, 0x0, 0x7, 0xf0, 0x7f,
0x0, 0x1, 0xfc, 0x7, 0xf8, 0x0, 0xff, 0x0,
0x7f, 0x80, 0x7f, 0xc0, 0x7, 0xfc, 0x3f, 0xf0,
0x0, 0x7f, 0xef, 0xfc, 0x0, 0x7, 0xff, 0xff,
0x0, 0x0, 0x7f, 0xff, 0x80, 0x0, 0x3, 0xff,
0xc0, 0x0, 0x0, 0x1f, 0xe0, 0x0, 0x0, 0x0,
0xf0, 0x0, 0x0, 0x0, 0x4,
/* U+5B66 "学" */
0xf, 0x83, 0xe0, 0x7c, 0x3, 0xe0, 0xf8, 0x1f,
0x0, 0xf8, 0x3e, 0x7, 0xc0, 0x1f, 0x7, 0xc3,
0xe0, 0x7, 0xc1, 0xf0, 0xf8, 0x3f, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0,
0x0, 0x1, 0xff, 0x80, 0x0, 0x0, 0x7f, 0xe0,
0x0, 0x0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xc1,
0xff, 0xff, 0xfc, 0x0, 0x7f, 0xff, 0xff, 0x0,
0x1f, 0xff, 0xff, 0x80, 0x0, 0x0, 0xf, 0xc0,
0x0, 0x0, 0x7, 0xe0, 0x0, 0x0, 0x1, 0xf8,
0x0, 0x0, 0x0, 0xfc, 0x0, 0x0, 0x0, 0x7e,
0x0, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xc0, 0x0, 0x3e, 0x0, 0x0, 0x0,
0xf, 0x80, 0x0, 0x0, 0x3, 0xe0, 0x0, 0x0,
0x0, 0xf8, 0x0, 0x0, 0x0, 0x3e, 0x0, 0x0,
0x0, 0xf, 0x80, 0x0, 0x0, 0xff, 0xe0, 0x0,
0x0, 0x3f, 0xf8, 0x0, 0x0, 0xf, 0xfe, 0x0,
0x0, 0x3, 0xff, 0x80, 0x0,
/* U+5D4C "嵌" */
0x3e, 0x1, 0xf0, 0xf, 0x87, 0xc0, 0x3e, 0x1,
0xf0, 0xf8, 0x7, 0xc0, 0x3e, 0x1f, 0x0, 0xf8,
0x7, 0xc3, 0xff, 0xff, 0xff, 0xf8, 0x7f, 0xff,
0xff, 0xff, 0xf, 0xff, 0xff, 0xff, 0xe1, 0xff,
0xff, 0xff, 0xfc, 0x0, 0x0, 0x0, 0x0, 0x7,
0xc3, 0xe0, 0x0, 0x0, 0xf8, 0x7c, 0x3f, 0xff,
0x1f, 0xf, 0x87, 0xff, 0xef, 0xff, 0xfc, 0xff,
0xfd, 0xff, 0xff, 0xbf, 0xff, 0xbf, 0xff, 0xf7,
0xc1, 0xf7, 0xff, 0xfe, 0xf8, 0x3e, 0x3e, 0x1f,
0x3e, 0x7, 0x87, 0xc3, 0xe7, 0xc1, 0xf0, 0xf8,
0x7c, 0x7, 0xc0, 0x1f, 0xf, 0x80, 0xf8, 0x3,
0xe1, 0xf0, 0x1f, 0x0, 0x7f, 0xfe, 0x3, 0xe0,
0xf, 0xff, 0xc0, 0x7c, 0x1, 0xff, 0xf8, 0xf,
0xf0, 0x3f, 0xff, 0x3, 0xfe, 0x7, 0xc3, 0xe0,
0x7f, 0xe0, 0xf8, 0x7c, 0xf, 0xfc, 0x1f, 0xf,
0x81, 0xf7, 0x83, 0xe1, 0xf0, 0x7c, 0xf8, 0x7c,
0x3e, 0xf, 0x9f, 0xf, 0x87, 0xc3, 0xf1, 0xf1,
0xff, 0xf8, 0xfc, 0x3e, 0x3f, 0xff, 0x1f, 0x87,
0xc7, 0xff, 0xe7, 0xe0, 0x7c, 0xff, 0xfd, 0xf8,
0xf, 0x80,
/* U+5F0F "式" */
0x0, 0x0, 0x1, 0xf3, 0x80, 0x0, 0x0, 0x3e,
0x78, 0x0, 0x0, 0x7, 0xcf, 0x0, 0x0, 0x0,
0xf9, 0xe0, 0x0, 0x0, 0x1f, 0x1, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xfc, 0x0, 0x0, 0x3, 0xe0,
0x0, 0x0, 0x0, 0x7c, 0x0, 0x0, 0x0, 0xf,
0x80, 0x0, 0x0, 0x1, 0xf8, 0xf, 0xff, 0xfe,
0x3f, 0x1, 0xff, 0xff, 0xc3, 0xe0, 0x3f, 0xff,
0xf8, 0x7c, 0x7, 0xff, 0xff, 0xf, 0x80, 0xff,
0xff, 0xe1, 0xf0, 0x0, 0x1e, 0x0, 0x3e, 0x0,
0x3, 0xc0, 0x7, 0xe0, 0x0, 0x78, 0x0, 0xfc,
0x0, 0xf, 0x0, 0xf, 0x80, 0x1, 0xe0, 0x1,
0xf0, 0x0, 0x3c, 0x0, 0x3e, 0x0, 0x7, 0x80,
0x7, 0xe0, 0x0, 0xf0, 0x0, 0xfc, 0x0, 0x1e,
0x0, 0xf, 0x80, 0x3, 0xff, 0xf1, 0xf9, 0xff,
0xff, 0xfe, 0x3f, 0x3f, 0xff, 0xff, 0xc3, 0xe7,
0xff, 0xff, 0xf8, 0x7e, 0xff, 0xff, 0xff, 0xf,
0xc0, 0x0, 0x0, 0x0, 0xfc, 0x0, 0x0, 0x0,
0x1f, 0x80,
/* U+662F "是" */
0xf, 0xff, 0xff, 0xfe, 0x3, 0xff, 0xff, 0xff,
0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f, 0xff, 0xff,
0xf8, 0xf, 0x0, 0x0, 0x3e, 0x3, 0xc0, 0x0,
0xf, 0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f, 0xff,
0xff, 0xf8, 0xf, 0xff, 0xff, 0xfe, 0x3, 0xc0,
0x0, 0xf, 0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f,
0xff, 0xff, 0xf8, 0xf, 0xff, 0xff, 0xfe, 0x3,
0xff, 0xff, 0xff, 0x80, 0x0, 0x0, 0x0, 0x0,
0x0, 0x0, 0x0, 0x0, 0x7f, 0xff, 0xff, 0xff,
0xdf, 0xff, 0xff, 0xff, 0xf7, 0xff, 0xff, 0xff,
0xfd, 0xff, 0xff, 0xff, 0xff, 0x0, 0x1, 0xf0,
0x0, 0x3, 0xe0, 0x7c, 0x0, 0x0, 0xf8, 0x1f,
0xff, 0xe0, 0x3e, 0x7, 0xff, 0xf8, 0xf, 0x81,
0xff, 0xfe, 0x3, 0xe0, 0x7f, 0xff, 0x80, 0xf8,
0x1f, 0x0, 0x0, 0x7f, 0x7, 0xc0, 0x0, 0x1f,
0xe1, 0xf0, 0x0, 0x7, 0xfe, 0x7c, 0x0, 0x3,
0xff, 0xff, 0xff, 0xfc, 0xff, 0xff, 0xff, 0xff,
0x7e, 0x7f, 0xff, 0xff, 0xff, 0x3, 0xff, 0xff,
0xf0,
/* U+6F2B "漫" */
0x60, 0x1f, 0xff, 0xff, 0x1f, 0x87, 0xff, 0xff,
0xc7, 0xf9, 0xff, 0xff, 0xf1, 0xfe, 0x7c, 0x0,
0x7c, 0x7f, 0x9f, 0xff, 0xff, 0x1, 0xe7, 0xff,
0xff, 0xc0, 0x1, 0xf0, 0x1, 0xf0, 0x0, 0x7c,
0x0, 0x7c, 0x0, 0x1f, 0xff, 0xff, 0x3e, 0x7,
0xff, 0xff, 0xcf, 0xf8, 0x0, 0x0, 0x3, 0xfe,
0x0, 0x0, 0x0, 0xff, 0xbf, 0xff, 0xff, 0xff,
0xef, 0xff, 0xff, 0xf7, 0xfb, 0xff, 0xff, 0xfc,
0xe, 0xf1, 0xc7, 0xf, 0x0, 0x3c, 0x71, 0xc3,
0xc0, 0xf, 0xff, 0xff, 0xf0, 0xfb, 0xff, 0xff,
0xfc, 0x3e, 0xff, 0xff, 0xff, 0x1f, 0x80, 0x0,
0x0, 0x7, 0xcf, 0xff, 0xff, 0xe1, 0xf1, 0xff,
0xff, 0xf8, 0x7c, 0x7f, 0xff, 0xfc, 0x1f, 0xf,
0xe0, 0x7f, 0xf, 0xc1, 0xfc, 0x3f, 0x83, 0xe0,
0x3f, 0xff, 0xc0, 0xf8, 0x3, 0xff, 0xc0, 0x7e,
0x1, 0xff, 0xf8, 0x1f, 0x87, 0xff, 0xff, 0xe7,
0xc3, 0xff, 0xff, 0xff, 0xf0, 0xff, 0xc3, 0xff,
0xf8, 0x3f, 0x0, 0xf, 0xc0, 0xc, 0x0, 0x0,
0x30,
/* U+7684 "的" */
0x7, 0xc0, 0x3e, 0x0, 0x3, 0xe0, 0x1f, 0x0,
0x1, 0xf0, 0xf, 0x80, 0x0, 0xf8, 0x7, 0xc0,
0xf, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xf3, 0xff,
0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xfc, 0xff,
0xff, 0xff, 0xfe, 0x7f, 0xff, 0xfc, 0x1f, 0x7e,
0x7, 0xfe, 0xf, 0xbf, 0x3, 0xff, 0x7, 0xdf,
0x1, 0xff, 0x83, 0xff, 0x80, 0xff, 0xc1, 0xff,
0x80, 0x7f, 0xe0, 0xf8, 0x0, 0x3f, 0xf0, 0x7c,
0x3c, 0x1f, 0xff, 0xfe, 0x1f, 0xf, 0xff, 0xff,
0xf, 0x87, 0xff, 0xff, 0x87, 0xc3, 0xff, 0xff,
0xc1, 0xe1, 0xff, 0xff, 0xe0, 0xf0, 0xff, 0xc1,
0xf0, 0x7c, 0x7f, 0xe0, 0xf8, 0x3e, 0x3f, 0xf0,
0x7c, 0xf, 0x1f, 0xf8, 0x3e, 0x0, 0xf, 0xfc,
0x1f, 0x0, 0x7, 0xfe, 0xf, 0x80, 0x3, 0xff,
0x7, 0xc0, 0x1, 0xff, 0x83, 0xe0, 0x0, 0xff,
0xc1, 0xf0, 0x0, 0x7f, 0xe0, 0xf8, 0x3, 0xff,
0xff, 0xfc, 0x1, 0xff, 0xff, 0xfe, 0x0, 0xff,
0xff, 0xff, 0x0, 0x7f, 0xff, 0xff, 0x80, 0x3f,
0xe0,
/* U+7A0B "程" */
0x0, 0x3c, 0x0, 0x0, 0x1f, 0xff, 0x9f, 0xff,
0xf3, 0xff, 0xf3, 0xff, 0xfe, 0x7f, 0xfe, 0x7f,
0xff, 0xcf, 0xff, 0xcf, 0xff, 0xf8, 0xf, 0x81,
0xf0, 0x1f, 0x1, 0xf0, 0x3e, 0x3, 0xe0, 0x3e,
0x7, 0xc0, 0x7c, 0x7, 0xc0, 0xf8, 0xf, 0x80,
0xf8, 0x1f, 0x1, 0xf3, 0xff, 0xfb, 0xff, 0xfe,
0x7f, 0xff, 0x7f, 0xff, 0xcf, 0xff, 0xef, 0xff,
0xf9, 0xff, 0xfd, 0xff, 0xff, 0x1, 0xf0, 0x0,
0x0, 0x0, 0x3e, 0x0, 0x0, 0x0, 0x77, 0xc1,
0xff, 0xff, 0xce, 0xf8, 0x3f, 0xff, 0xf9, 0xdf,
0xc7, 0xff, 0xff, 0x3b, 0xfe, 0xff, 0xff, 0xe7,
0x7f, 0xdf, 0xff, 0xfc, 0xef, 0xf8, 0x7, 0xc0,
0x1d, 0xff, 0x0, 0xf8, 0x3, 0xbe, 0xe0, 0x1f,
0x0, 0x77, 0xc4, 0xff, 0xff, 0x9e, 0xf8, 0x1f,
0xff, 0xf3, 0xdf, 0x3, 0xff, 0xfe, 0x7b, 0xe0,
0x7f, 0xff, 0xcf, 0x7c, 0x0, 0x3e, 0x1, 0xef,
0x80, 0x7, 0xc0, 0x39, 0xf0, 0x0, 0xf8, 0x7,
0x3e, 0x3f, 0xff, 0xff, 0xe7, 0xc7, 0xff, 0xff,
0xe0, 0xf8, 0xff, 0xff, 0xfc, 0x1f, 0x1f, 0xff,
0xff, 0x80,
/* U+8FC7 "过" */
0x0, 0x0, 0x0, 0x1e, 0x7, 0xc0, 0x0, 0x3,
0xc0, 0xf8, 0x0, 0x0, 0x78, 0x1f, 0x0, 0x0,
0xf, 0x1, 0xe1, 0xff, 0xff, 0xfe, 0x3e, 0x3f,
0xff, 0xff, 0xc7, 0xc7, 0xff, 0xff, 0xf8, 0x78,
0xff, 0xff, 0xff, 0xf, 0x9f, 0xff, 0xff, 0xe0,
0x0, 0x0, 0x3, 0xc0, 0x0, 0x0, 0x0, 0x78,
0x0, 0x3, 0xf0, 0xf, 0xf, 0xf8, 0x3e, 0x1,
0xe1, 0xff, 0x7, 0xc0, 0x3c, 0x3f, 0xe0, 0xfc,
0x7, 0x87, 0xfc, 0xf, 0x80, 0xf0, 0xff, 0x81,
0xf0, 0x1e, 0x1, 0xf0, 0x1f, 0x3, 0xc0, 0x3e,
0x3, 0xe0, 0x78, 0x7, 0xc0, 0x7e, 0xf, 0x0,
0xf8, 0x7, 0xc1, 0xe0, 0x1f, 0x0, 0xf8, 0x3c,
0x3, 0xe0, 0x0, 0x7, 0x80, 0x78, 0x0, 0x0,
0xf0, 0xf, 0x0, 0x1, 0xfe, 0x1, 0xe0, 0x0,
0x3f, 0xc0, 0x7c, 0x0, 0x7, 0xf8, 0xf, 0x80,
0x0, 0xff, 0x1, 0xf0, 0x0, 0x1f, 0xe0, 0x3e,
0x0, 0x0, 0x0, 0xf, 0xf8, 0x0, 0x0, 0x1,
0xff, 0xff, 0xff, 0xff, 0x3f, 0xff, 0xff, 0xff,
0xe7, 0xff, 0xff, 0xff, 0xfd, 0xf7, 0xff, 0xff,
0xff, 0xbe, 0x1f, 0xff, 0xff, 0xf0,
/* U+957F "长" */
0x3, 0xf0, 0x0, 0x2, 0x0, 0x7e, 0x0, 0x1,
0xc0, 0xf, 0xc0, 0x1, 0xf8, 0x1, 0xf8, 0x1,
0xff, 0x0, 0x3f, 0x1, 0xff, 0xe0, 0x7, 0xe3,
0xff, 0xfc, 0x0, 0xfc, 0xff, 0xfc, 0x0, 0x1f,
0x9f, 0xfc, 0x0, 0x3, 0xf3, 0xfc, 0x0, 0x0,
0x7e, 0x7c, 0x0, 0x0, 0xf, 0xc8, 0x0, 0x0,
0x1, 0xf8, 0x0, 0x0, 0x0, 0x3f, 0x0, 0x0,
0x1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0xf,
0xc3, 0xe0, 0x0, 0x1, 0xf8, 0x3e, 0x0, 0x0,
0x3f, 0x7, 0xc0, 0x0, 0x7, 0xe0, 0xfc, 0x0,
0x0, 0xfc, 0xf, 0x80, 0x0, 0x1f, 0x81, 0xf8,
0x0, 0x3, 0xf0, 0x1f, 0x80, 0x0, 0x7e, 0x3,
0xf8, 0x0, 0xf, 0xc0, 0x3f, 0x80, 0x1, 0xf8,
0x3, 0xfc, 0x0, 0x3f, 0x0, 0x3f, 0xe0, 0x7,
0xe0, 0x3, 0xff, 0x80, 0xff, 0xc0, 0x3f, 0xf8,
0x1f, 0xf8, 0x3, 0xff, 0x3, 0xff, 0x0, 0x1f,
0xe0, 0x7f, 0xe0, 0x0, 0xfc, 0xf, 0xfc, 0x0,
0x3, 0x80
};
/*---------------------
* GLYPH DESCRIPTION
*--------------------*/
static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
{.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
{.bitmap_index = 0, .adv_w = 226, .box_w = 6, .box_h = 27, .ofs_x = 4, .ofs_y = 0},
{.bitmap_index = 21, .adv_w = 608, .box_w = 31, .box_h = 33, .ofs_x = 3, .ofs_y = -4},
{.bitmap_index = 149, .adv_w = 608, .box_w = 35, .box_h = 34, .ofs_x = 1, .ofs_y = -5},
{.bitmap_index = 298, .adv_w = 608, .box_w = 34, .box_h = 35, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 447, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 601, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 755, .adv_w = 608, .box_w = 34, .box_h = 34, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 900, .adv_w = 608, .box_w = 34, .box_h = 34, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 1045, .adv_w = 608, .box_w = 33, .box_h = 35, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 1190, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},
{.bitmap_index = 1344, .adv_w = 608, .box_w = 35, .box_h = 36, .ofs_x = 1, .ofs_y = -4},
{.bitmap_index = 1502, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 1, .ofs_y = -4}
};
/*---------------------
* CHARACTER MAPPING
*--------------------*/
static const uint16_t unicode_list_0[] = {
0x0, 0x4e3f, 0x5144, 0x5b45, 0x5d2b, 0x5eee, 0x660e, 0x6f0a,
0x7663, 0x79ea, 0x8fa6, 0x955e
};
/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
{
.range_start = 33, .range_length = 38239, .glyph_id_start = 1,
.unicode_list = unicode_list_0, .glyph_id_ofs_list = NULL, .list_length = 12, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY
}
};
/*--------------------
* ALL CUSTOM DATA
*--------------------*/
#if LVGL_VERSION_MAJOR == 8
/*Store all the custom data of the font*/
static lv_font_fmt_txt_glyph_cache_t cache;
#endif
#if LVGL_VERSION_MAJOR >= 8
static const lv_font_fmt_txt_dsc_t font_dsc = {
#else
static lv_font_fmt_txt_dsc_t font_dsc = {
#endif
.glyph_bitmap = glyph_bitmap,
.glyph_dsc = glyph_dsc,
.cmaps = cmaps,
.kern_dsc = NULL,
.kern_scale = 0,
.cmap_num = 1,
.bpp = 1,
.kern_classes = 0,
.bitmap_format = 0,
#if LVGL_VERSION_MAJOR == 8
.cache = &cache
#endif
};
/*-----------------
* PUBLIC FONT
*----------------*/
/*Initialize a public general font descriptor*/
#if LVGL_VERSION_MAJOR >= 8
const lv_font_t alimama = {
#else
lv_font_t alimama = {
#endif
.get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt, /*Function pointer to get glyph's data*/
.get_glyph_bitmap = lv_font_get_bitmap_fmt_txt, /*Function pointer to get glyph's bitmap*/
.line_height = 37, /*The maximum line height required by the font*/
.base_line = 5, /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
.subpx = LV_FONT_SUBPX_NONE,
#endif
#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8
.underline_position = -4,
.underline_thickness = 2,
#endif
.dsc = &font_dsc, /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
#if LV_VERSION_CHECK(8, 2, 0) || LVGL_VERSION_MAJOR >= 9
.fallback = NULL,
#endif
.user_data = NULL,
};
#endif /*#if ALIMAMA*/
将我们的文字c文件放到工程目录下：
在CMakeLists.txtx文件中添加上我们的汉字文件。
1.3.1.5 让文字滚动起来
/*显示中文*/
void demo_Chinese()
{
// 0.声明字体
LV_FONT_DECLARE(alimama);
// 1.得到当前活跃的屏幕
lv_obj_t* screen = lv_scr_act();
// 2.创建文本对象
lv_obj_t* label = lv_label_create(screen);
// 3.设置文本对象内容，位置，颜色等等
lv_label_set_text(label,"学习嵌入式的过程是漫长的!");
// 让文字滚动起来
lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR); /*Circular scroll*/
lv_obj_set_width(label, 150); // 设置文字宽度超过多少时候就滚动起来
// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置
lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央
// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色
lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色，最后一个参数默认是0
// 4.定义一个样式显示标签字体
static lv_style_t style;
lv_style_init(&style); //初始化样式结构体
lv_style_set_text_font(&style,&alimama); //设置字体样式
// 5.将样式和字体关联起来
lv_obj_add_style(label,&style,0); //最后一个参数默认是0
}
1.3.2 button按钮
1.3.2.1 button按钮的创建
/*显示按钮*/
void demo_btn()
{
// 1.创建一个窗口（屏幕）
lv_obj_t* screen = lv_scr_act();
// 2.创建按钮对象
lv_obj_t* btn = lv_btn_create(screen);
// 3.创建样式
static lv_style_t style; // 使用static防止样式被回收
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_style_set_height(&style,60);
// 4.将样式和按钮绑定在一起
lv_obj_add_style(btn,&style,0);
// 5.设置按钮文本
lv_obj_t* label = lv_label_create(btn);
lv_label_set_text(label,"Button");
lv_obj_center(label); // 让label标签居于btn的中心
lv_obj_center(btn); // 让按钮居于屏幕的中心
}
1.3.2.2 按钮单击事件
/*按钮单击触发事件*/
void event_handler(lv_event_t* e)
{
printf("event_handler\r\n");
// 获取事件内容
int code = lv_event_get_code(e); //获取当前事件的编码
printf("code:%d clicked:%d\r\n",code,LV_EVENT_CLICKED);
// 获取当前事件触发的对象
lv_obj_t* obj = lv_event_get_target(e);
printf("obj:%d\r\n",obj);
// 改变按钮上面的内容
if(code == LV_EVENT_CLICKED) // 如果btn按下
{
lv_obj_t* label = lv_event_get_user_data(e);
lv_label_set_text(label,"handler");
}
}
/*按钮单击事件*/
void demo_btn_click()
{
// 1.创建一个窗口（屏幕）
lv_obj_t* screen = lv_scr_act();
// 2.创建按钮对象
lv_obj_t* btn = lv_btn_create(screen);
// 3.创建样式
static lv_style_t style; // 使用static防止样式被回收
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_style_set_height(&style,60);
// 4.将样式和按钮绑定在一起
lv_obj_add_style(btn,&style,0);
// 5.设置按钮文本
lv_obj_t* label = lv_label_create(btn);
lv_label_set_text(label,"Button");
lv_obj_center(label); // 让label标签居于btn的中心
lv_obj_center(btn); // 让按钮居于屏幕的中心
// 6.给按钮添加事件
printf("btn:%d\r\n",btn);
lv_obj_add_event_cb(btn,event_handler,LV_EVENT_CLICKED,label); //这里设置了btn按钮单击后触发event_handler事件，并且返回label的地址
}
1.3.2.3 按钮状态可选
/*按钮单击触发事件*/
void event_handler(lv_event_t* e)
{
printf("event_handler\r\n");
// 获取事件内容
int code = lv_event_get_code(e); //获取当前事件的编码
printf("code:%d clicked:%d\r\n",code,LV_EVENT_CLICKED);
// 获取当前事件触发的对象
lv_obj_t* obj = lv_event_get_target(e);
printf("obj:%d\r\n",obj);
// 改变按钮上面的内容
if(code == LV_EVENT_CLICKED) // 如果btn按下
{
lv_obj_t* label = lv_event_get_user_data(e);
lv_label_set_text(label,"handler");
}
else if (code == LV_EVENT_VALUE_CHANGED)
{
lv_obj_t* label = lv_event_get_user_data(e);
lv_label_set_text(label,"toggle1");
}
}
/*按钮单击事件*/
void demo_btn_click()
{
// 1.创建一个窗口（屏幕）
lv_obj_t* screen = lv_scr_act();
// 2.创建按钮对象
lv_obj_t* btn = lv_btn_create(screen);
// 3.创建样式
static lv_style_t style; // 使用static防止样式被回收
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_style_set_height(&style,60);
// 4.将样式和按钮绑定在一起
lv_obj_add_style(btn,&style,0);
// 5.设置按钮文本
lv_obj_t* label = lv_label_create(btn);
lv_label_set_text(label,"Button");
lv_obj_center(label); // 让label标签居于btn的中心
lv_obj_center(btn); // 让按钮居于屏幕的中心
// 6.给按钮添加事件
printf("btn:%d\r\n",btn);
lv_obj_add_event_cb(btn,event_handler,LV_EVENT_CLICKED,label); //这里设置了btn按钮单击后触发event_handler事件，并且返回label的地址
/*可选中的按钮*/
lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 80);
lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
lv_obj_set_height(btn2, LV_SIZE_CONTENT);
lv_obj_add_style(btn2,&style,0);
label = lv_label_create(btn2);
lv_label_set_text(label, "Toggle");
lv_obj_center(label);
lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_VALUE_CHANGED, label);
}1.3.3 Button Matrix按钮矩阵
1.3.3.1 创建Button Matrix
/*构建按钮矩阵*/
void demo_btn_marix()
{
// 1.得到屏幕
lv_obj_t* screen = lv_scr_act();
// 2.创建按钮矩阵
lv_obj_t* btn_matrix = lv_btnmatrix_create(screen);
// 3.设置
static const char* map[] = {"1","2","3","\n","4","5","6","\n","7","8","9","\n","BACK","0","ENTER",""};
// 这里需要使用申请一个static空间，否则会闪退，末尾加一个空字符表示结束
lv_btnmatrix_set_map(btn_matrix,map); // 设置按钮内容
// lv_obj_set_width(btn_matrix,200);
}
1.3.3.2 按钮矩阵事件处理
/*按钮矩阵事件*/
void btn_matrix_callback(lv_event_t* e)
{
// 获取当前触发的事件编码
int code = lv_event_get_code(e);
// 获取当前btnmatrix
lv_obj_t* btnmatrix = lv_event_get_target(e);
if(code == LV_EVENT_VALUE_CHANGED)
{
// 获取当前点击的是哪个按钮
uint8_t selected_index = lv_btnmatrix_get_selected_btn(btnmatrix);
// 获取按钮对应的文本信息
char* text = lv_btnmatrix_get_btn_text(btnmatrix,selected_index);
printf("value:%s\r\n",text);
}
}
/*构建按钮矩阵*/
void demo_btn_marix()
{
// 1.得到屏幕
lv_obj_t* screen = lv_scr_act();
// 2.创建按钮矩阵
lv_obj_t* btn_matrix = lv_btnmatrix_create(screen);
// 3.设置
static const char* map[] = {"1","2","3","\n","4","5","6","\n","7","8","9","\n","BACK","0","ENTER",""};
// 这里需要使用申请一个static空间，否则会闪退，末尾加一个空字符表示结束
lv_btnmatrix_set_map(btn_matrix,map); // 设置按钮内容
// lv_obj_set_width(btn_matrix,200);
lv_obj_center(btn_matrix); // 居中显示
// 4.添加事件
lv_obj_add_event_cb(btn_matrix,btn_matrix_callback,LV_EVENT_VALUE_CHANGED,NULL);
}1.3.4 Text aera文本框
/*文本输入框事件*/
static void textarea_event_handler(lv_event_t * e)
{
lv_obj_t * ta = lv_event_get_target(e);
LV_UNUSED(ta);
LV_LOG_USER("Enter was pressed. The current text is: %s", lv_textarea_get_text(ta));
}
static void btnm_event_handler(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);
lv_obj_t * ta = lv_event_get_user_data(e);
const char * txt = lv_btnmatrix_get_btn_text(obj, lv_btnmatrix_get_selected_btn(obj));
if(strcmp(txt, LV_SYMBOL_BACKSPACE) == 0) lv_textarea_del_char(ta);
else if(strcmp(txt, LV_SYMBOL_NEW_LINE) == 0) lv_event_send(ta, LV_EVENT_READY, NULL);
else lv_textarea_add_text(ta, txt);
}
/*构建文本输入框*/
void demo_textaera()
{
// 1.显示对象
lv_obj_t* screen = lv_scr_act();
// 2.创建要显示的对象
lv_obj_t * ta = lv_textarea_create(screen);
// 3.对显示的对象进行测试
lv_textarea_set_one_line(ta, true); // 设置只显示一行
lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);
lv_obj_add_event_cb(ta, textarea_event_handler, LV_EVENT_READY, ta);
lv_obj_add_state(ta, LV_STATE_FOCUSED); /*To be sure the cursor is visible*/
static const char * btnm_map[] = {"1", "2", "3", "\n",
"4", "5", "6", "\n",
"7", "8", "9", "\n",
LV_SYMBOL_BACKSPACE, "0", LV_SYMBOL_NEW_LINE, ""
};
lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());
lv_obj_set_size(btnm, 200, 150);
lv_obj_align(btnm, LV_ALIGN_BOTTOM_MID, 0, -10);
lv_obj_add_event_cb(btnm, btnm_event_handler, LV_EVENT_VALUE_CHANGED, ta);
lv_obj_clear_flag(btnm, LV_OBJ_FLAG_CLICK_FOCUSABLE); /*To keep the text area focused on button clicks*/
lv_btnmatrix_set_map(btnm, btnm_map);
}1.3.5 显示Image
对图片对象进行编码：
Image Converter — LVGL
将转换好的c文件添加进CMakeLists.txt中。
图片转码之后的信息：
/*显示图片*/
void dmeo_img()
{
// 1.显示对象
lv_obj_t* screen = lv_scr_act();
// 2.创建图片对象
lv_obj_t* img = lv_img_create(screen);
// 3.给图片对象设置图片
LV_IMG_DECLARE(J20); // 声明图片
lv_img_set_src(img,&J20);
lv_obj_align(img,LV_ALIGN_CENTER,0,0); // 图片居中显示
}1.3.6 显示gif
将转换好的c文件添加进CMakeLists.txt中。
不显示gif的解决办法：
【LVGL】LVGL8.1 使用GIF库_单片机_mainy4210-GitCode 开源社区 (csdn.net)
/*显示gif*/
void demo_gif()
{
LV_IMG_DECLARE(astro); // 声明图片
// 1.显示对象
lv_obj_t* screen = lv_scr_act();
// 2.创建图片对象
lv_obj_t* gif = lv_gif_create(screen);
// 3.给图片对象设置图片
lv_gif_set_src(gif,&astro);
lv_obj_align(gif,LV_ALIGN_CENTER,0,0); // 图片居中显示
}1.4 布局
1.4.1 Flex弹性布局
/*弹性布局*/
void flex_1(void)
{
/*Create a container with ROW flex direction*/
lv_obj_t * cont_row = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont_row, 240, 75);
lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);
/*Create a container with COLUMN flex direction*/
lv_obj_t * cont_col = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont_col, 200, 200);
lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);
uint32_t i;
for(i = 0; i < 10; i++) {
lv_obj_t * obj;
lv_obj_t * label;
/*Add items to the row*/
obj= lv_btn_create(cont_row);
lv_obj_set_size(obj, 100, LV_PCT(100));
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item: %u", i);
lv_obj_center(label);
/*Add items to the column*/
obj = lv_btn_create(cont_col);
lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);
lv_obj_center(label);
}
}
1.4.2 Grid网格布局
void grid_1(void)
{
static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};
static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};
/**
60 60 60
50
50
50
*/
/*Create a container with grid*/
lv_obj_t * cont = lv_obj_create(lv_scr_act());
lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);
lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);
lv_obj_set_size(cont, 220, 280);
lv_obj_center(cont);
lv_obj_set_layout(cont, LV_LAYOUT_GRID);
lv_obj_t * label;
lv_obj_t * obj;
uint32_t i;
for(i = 0; i < 9; i++) {
uint8_t col = i % 3;
uint8_t row = i / 3;
obj = lv_btn_create(cont);
/*Stretch the cell horizontally and vertically too
*Set span to 1 to make the cell 1 column/row sized*/
lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,
LV_GRID_ALIGN_STRETCH, row, 1);
label = lv_label_create(obj);
lv_label_set_text_fmt(label, "c%d, r%d", col, row);
lv_obj_center(label);
}
}
1.5 界面切换
/*页面切换*/
lv_obj_t* page1;
lv_obj_t* page2;
void enent_handler_page(lv_event_t* e)
{
int code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED)
{
//获取用户传递的数据
uint8_t index = lv_event_get_user_data(e);
switch (index)
{
case 1:
lv_disp_load_scr(page2); //跳转到page2
break;
case 2:
lv_disp_load_scr(page1); //跳转到page1
break;
}
}
}
void create_page1()
{
//创建一个页面
page1 = lv_obj_create(NULL);
lv_obj_t* obj = lv_obj_create(page1); //在page1上创建一个对象
//显示一些内容
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_style_set_height(&style,100);
lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_RED));
lv_obj_add_style(obj,&style,0);
//添加显示文本
lv_obj_t* label1 = lv_label_create(obj);
lv_label_set_text(label1,"PAGE111");
lv_obj_set_align(label1,LV_ALIGN_CENTER);
//添加单击事件实现page1上点击按钮跳转到page2
lv_obj_add_event_cb(obj,enent_handler_page,LV_EVENT_CLICKED,1);
}
void create_page2()
{
//创建一个页面
page2 = lv_obj_create(NULL);
lv_obj_t* obj = lv_obj_create(page2); //在page1上创建一个对象
//显示一些内容
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style,100);
lv_style_set_height(&style,100);
lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_BLUE));
lv_obj_add_style(obj,&style,0);
//添加显示文本
lv_obj_t* label2 = lv_label_create(obj);
lv_label_set_text(label2,"PAGE222");
lv_obj_set_align(label2,LV_ALIGN_CENTER);
lv_obj_add_event_cb(obj,enent_handler_page,LV_EVENT_CLICKED,2);
}
在main函数里要先加载一个默认页面：
create_page1();
create_page2();
lv_disp_load_scr(page1); //默认程序执行显示page11.6 Tabview
void demo_tabivew()
{
lv_obj_t * tabview;
tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);
/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");
lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");
lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "This the first tab\n\n"
"If the content\n"
"of a tab\n"
"becomes too\n"
"longer\n"
"than the\n"
"container\n"
"then it\n"
"automatically\n"
"becomes\n"
"scrollable.\n"
"\n"
"\n"
"\n"
"Can you see it?");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);
}1.7 如何学习官网案例
对于条件编译的案例：
在"lv_conf.h"里找到对应部分置1，就可以使用了。
1.8 修改屏幕大小
1.9 动态的显示表格数据
lv_obj_t * chart;
lv_chart_series_t * ser1;
void demo_chart()
{
/*Create a chart*/
chart = lv_chart_create(lv_scr_act());
lv_obj_set_size(chart, 200, 150);
lv_obj_center(chart);
lv_chart_set_type(chart, LV_CHART_TYPE_LINE); /*Show lines and points too*/
/*Add two data series*/
ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_SECONDARY_Y);
/*Set the next points on 'ser1'*/
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 10);
lv_chart_set_next_value(chart, ser1, 30);
lv_chart_set_next_value(chart, ser1, 70);
lv_chart_set_next_value(chart, ser1, 90);
lv_chart_refresh(chart); /*Required after direct set*/
}
count += 5;
if(count/1000 == 0)
{
lv_chart_set_next_value(chart,ser1,lv_rand(50,100));
lv_chart_refresh(chart);
count = 0;
}02 SquareLine Studio
2.1 SquareLine Studio创建UI
注：SquareLine Studio里设置角度的时候需要在常规认知度数上乘以10倍，比如我想旋转某个图片30°，在设置的时候写300。
这里显示了这个项目中使用的资源，直接使用文件查找工具找到这些资源拷贝下来自己使用。
参照案例创作好我们的表盘后，导出成为LVGL工程：
将我们导出的UI复制进LVGL工程里：
2.2 将UI配置进LVGL工程中
# define SDL_HOR_RES 392
# define SDL_VER_RES 392
#define LV_COLOR_DEPTH 16
#define LV_COLOR_16_SWAP 1
