LVGL学习

注：本文使用的lvgl-release-v8.3版本，其它版本可能稍有不同。

01 LVGL模拟器配置

day01-02_课程介绍_哔哩哔哩_bilibili

LVGL开发教程 (yuque.com)

 如果按照上述视频和文档中配置不成功的话，直接重装VsCode，我的就是重装以后就好了。

LVGL查询手册：

Introduction（介绍） — LVGL 文档 (100ask.net)

Welcome to the documentation of LVGL! — LVGL documentation

02 创建第一个对象

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函数里调用上述函数就完成了第一个对象的创建。

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函数里调用。

03 控件

3.1 label文本

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);   //设置标签中字体颜色
}

3.1.2 不同设备上颜色设置 

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
}

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文件中添加上我们的汉字文件。

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
}

3.2 button按钮 

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);              // 让按钮居于屏幕的中心
}

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的地址
}

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);
}

3.3 Button Matrix按钮矩阵 

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);
}

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);
}

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);
}

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);       // 图片居中显示
}

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);       // 图片居中显示
}

04 布局 

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);
    }
}

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);
    }
}

05 界面切换

/*页面切换*/
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);        //默认程序执行显示page1

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/875964.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Git提交有乱码

Git提交有乱码

服务器提交记录如图 可知application.properties中文注释拉黄线 &#xff0c;提示Unsupported characters for the charset ISO-8859-1 打开settings - Editor - File Encodings 因为我们项目的其他文件都是UTF-8&#xff0c;所以&#xff0c;我们将默认值都改成UTF-8 然后…
阅读更多...
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵

打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵

附源码&#xff01;&#xff01;&#xff01; 感谢支持 小弟不断创作网站demo感兴趣的可以关注支持一下 对了 俺在结尾带上了自己用的 背景 大家可以尝试换一下效果更好哦~~~ 如何创建一个民国风格的炫酷网页 在这篇博客中&#xff0c;我们将展示如何制作一个结合民国风格和…
阅读更多...
【无标题】Efinity 0基础进行流水灯项目撰写（FPGA）

【无标题】Efinity 0基础进行流水灯项目撰写（FPGA）

文章目录 前言一、定义概念 缩写1. 二、性质1.2. 三、使用步骤编译常见错误1. 没加分号2. end 写多了 编译成功的标志总结参考文献 前言 数电课设 使用 FPGAIDE 使用 Efinity 一、定义概念 缩写 1. 二、性质 1. 2. 三、使用步骤 python代码块matlab代码块c代码块编译…
阅读更多...
Vue3+CesiumJS相机定位camera

Vue3+CesiumJS相机定位camera

new Cesium.Camera (scene) 摄像机由位置&#xff0c;方向和视锥台定义。 方向与视图形成正交基准&#xff0c;上和右视图x上单位矢量。 视锥由6个平面定义。每个平面都由 Cartesian4 对象表示&#xff0c;其中x&#xff0c;y和z分量定义垂直于平面的单位矢量&#xff0c;w分量…
阅读更多...
C++《类和对象》（下）

C++《类和对象》（下）

在之前类和对象&#xff08;中&#xff09;我们学习了类当中的6大默认成员函数&#xff0c;我们了解了6大成员函数的结构特征和特点以及在不同情况各个成员函数是如何调用的&#xff0c;那么接下来我们在本篇当中将继续学习之前在学习构造函数中未了解的初始化列表&#xff0c;…
阅读更多...
【Python】生成图片验证码

【Python】生成图片验证码

1. 首先安装第三方库PIL&#xff08;图像处理库&#xff09; pip install pillow 2. 编写生成验证码代码 这里字体 SimHei.ttf 文件要放在该文件目录下。 import random from PIL import Image, ImageDraw, ImageFont, ImageFilterdef check_code(width128, height30, char…
阅读更多...
ros学习笔记.4 Path Planning Part 2 (避障)

ros学习笔记.4 Path Planning Part 2 (避障)

避障是如何工作的什么是局部规划器&#xff1f;什么是局部成本图&#xff1f;路径规划回顾如何使用动态重新配置和其他 Rviz 工具 局部规划器 一旦全局规划器计算出要遵循的路径&#xff0c;该路径就会发送给局部规划器。然后&#xff0c;局部规划器将执行全局规划的每个部分&…
阅读更多...
比较stl库的ostringstream与Qt的QString::arg(),QString::number()

比较stl库的ostringstream与Qt的QString::arg(),QString::number()

需求&#xff1a; 显示一个float或者double类型的数&#xff0c;要求小数点后的数字位数为定值。 考虑STL库的ostringstream或者Qt的QString::arg(), number 对于stringstream,使用比较繁琐&#xff0c;要联合使用std::fixed和std::setprecision才能实现固定小数位数显示&am…
阅读更多...
UE5-俯视角色移动（蓝图）01

UE5-俯视角色移动（蓝图）01

效果如下&#xff1a; 蓝图节点如下&#xff1a; 使用示例自带的移动蓝图&#xff0c;发现角色只能平移&#xff0c;不会转向。必须勾选以下选项&#xff1a; 点击蓝图-》组件-》SpringArm节点。在细节中找到摄像机设置&#xff0c;勾选以下&#xff1a; 在 点击蓝图-》组件-…
阅读更多...
PowerShell install 一键部署Oracle21c-xe

PowerShell install 一键部署Oracle21c-xe

Oracle21c-xe前言 无论您是开发人员、DBA、数据科学家、教育工作者，还是仅仅对数据库感兴趣，Oracle Database Express Edition (XE) 都是理想的入门方式。它是全球企业可依赖的强大的 Oracle Database，提供简单的下载、易于使用和功能齐全的体验。您可以在任何环境中使用该…
阅读更多...
Qt多语言/多语种详细开发教程

Qt多语言/多语种详细开发教程

Qt作为跨平台的开发工具&#xff0c;早已应用到各行各业的软件开发中。 今天讲讲&#xff0c;Qt开发的正序怎么做多语言开发。就是说&#xff0c;你设置中文&#xff0c;就中文显示&#xff1b;设置英语就英文显示&#xff0c;设置繁体就繁体显示&#xff0c;设置发育就显示法语…
阅读更多...
Vue3+TS项目给el-button统一封装一个点击后转圈效果的钩子函数按钮防抖

Vue3+TS项目给el-button统一封装一个点击后转圈效果的钩子函数按钮防抖

前言 每个按钮都要单独定义一个loading变量&#xff0c;并且在接口请求前修改为true&#xff0c;接口响应后再修改为false&#xff0c;封装后这段重复的逻辑就可以统一管理不用每次都写一遍了。 效果 新建一个公共的src\common.ts import { ref } from "vue"expor…
阅读更多...
Azure web app has no access to openai private endpoint in virtual network

Azure web app has no access to openai private endpoint in virtual network

题意&#xff1a;"Azure Web 应用无法访问虚拟网络中的 OpenAI 私有端点。" 问题背景&#xff1a; I am trying to host a web application similar to a private ChatGPT instance within a secluded virtual network, ensuring that theres no external internet …
阅读更多...
服务器环境搭建-5 Nexus搭建与使用介绍

服务器环境搭建-5 Nexus搭建与使用介绍

背景 本文介绍nexus的安装、配置和使用&#xff0c;之后通过案例的方式演示使用过程。 1.下载和安装 本文使用Nexus 3.x版本进行演示 下载地址&#xff1a;Download Nexus Repository OSS | Sonatype 国外网站下载速度较慢&#xff0c;也可以通过百度网盘下载(提取码:9999): …
阅读更多...
形态学算法（连通分量提取，区域最大值提取）

形态学算法（连通分量提取，区域最大值提取）

文章目录 二值图像形态学算法连通分量提取 灰度图形态学算法灰度重建区域最大值查找 本文先列举一些近期用到的形态学算法&#xff0c;以后可能会再进行补充。 二值图像形态学算法 连通分量提取 在上一篇文章中已经提到连通分量的概念&#xff0c;这里再进行回顾&#xff1a;…
阅读更多...
Leetcode 寻找重复数

Leetcode 寻找重复数

可以使用 位运算 来解决这道题目。使用位运算的一个核心思想是基于数字的二进制表示&#xff0c;统计每一位上 1 的出现次数&#xff0c;并与期望的出现次数做比较。通过这种方法&#xff0c;可以推断出哪个数字重复。 class Solution { public:int findDuplicate(vector<i…
阅读更多...
abVIEW 可以同时支持脚本编程和图形编程

abVIEW 可以同时支持脚本编程和图形编程

LabVIEW 可以同时支持脚本编程和图形编程&#xff0c;但主要依赖其独特的 图形编程 环境&#xff08;G语言&#xff09;&#xff0c;其中程序通过连线与节点来表示数据流和功能模块。不过&#xff0c;LabVIEW 也支持通过以下方式实现脚本编程的能力&#xff1a; 1. 调用外部脚本…
阅读更多...
使用 PyCharm 新建 Python 项目详解

使用 PyCharm 新建 Python 项目详解

使用 PyCharm 新建 Python 项目详解 文章目录 使用 PyCharm 新建 Python 项目详解一 新建 Python 项目二 配置环境1 项目存放目录2 Python Interpreter 选择3 创建隔离环境4 选择你的 Python 版本5 选择 Conda executable 三 New Window 打开项目四 目录结构五 程序编写运行六 …
阅读更多...
【资料分析】平均倍数类

【资料分析】平均倍数类

平均 观察选项&#xff0c;差距较大&#xff0c;大胆约分即可 很少的情况下&#xff0c;选项相差很近不能随便约分 倍数 第N次注意增长率是否为下降&#xff01; 问的是基期倍数比哦 平均增长量 十三五这种明确问法&#xff0c;一定是五年 属于有往前推的A和不往前推的…
阅读更多...
【QT】常用控件-下

【QT】常用控件-下

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;QT 目录 &#x1f449;&#x1f3fb;QComboBox&#x1f449;&#x1f3fb; QSpinBox&#x1f449;&#x1f3fb;QDateTimeEdit&#x1f449;&#x1f3fb;QD…
阅读更多...
最新文章

Copyright @ 2022~2023