LVGL学习

news2024/9/29 17:26:11

注：本文使用的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.coloradmin.cn/o/2136893.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[Visual Stuidio 2022使用技巧]2.配置及常用快捷键

[Visual Stuidio 2022使用技巧]2.配置及常用快捷键

使用vs2022开发WPF桌面程序时常用配置及快捷键。 语言&#xff1a;C# IDE&#xff1a;Microsoft Visual Studio Community 2022 框架&#xff1a;WPF&#xff0c;.net 8.0 一、配置 1.1 内联提示 未开启时&#xff1a; 开启后&#xff1a; 开启方法&#xff1a; 工具-选…
阅读更多...
torch.linspace() torch.arange() torch.stack() 函数详解

torch.linspace() torch.arange() torch.stack() 函数详解

1 torch.linspace函数详解 torch.linspace(start, end, steps100, outNone, dtypeNone, layouttorch.strided, deviceNone, requires_gradFalse) → Tensor 函数的作用是&#xff0c;返回一个一维的tensor&#xff08;张量&#xff09;&#xff0c;这个张量包含了从start到end…
阅读更多...
【专题】2024新能源企业“出海”系列之驶向中东、东南亚报告合集PDF分享（附原数据表）

【专题】2024新能源企业“出海”系列之驶向中东、东南亚报告合集PDF分享（附原数据表）

原文链接&#xff1a; https://tecdat.cn/?p37698 在“双碳”目标引领下&#xff0c;中国新能源产业近年迅猛发展&#xff0c;新能源企业凭借技术革新、政策支持与市场驱动实现快速增长&#xff0c;在产业链完备、技术领先、生产效能及成本控制等方面优势显著。面对国内外环境…
阅读更多...
单向循环链表

单向循环链表

文章目录 &#x1f34a;自我介绍&#x1f34a;单向循环链表 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34a;自我介绍 Hello,大家好&#xff0c;我是小珑也要变强&#xff08;也是小珑&…
阅读更多...
Linux(3)--CentOS8下载、安装

Linux(3)--CentOS8下载、安装

文章目录 1. CentOS简介2. 下载3. 使用VmWare安装CentOS4. 第一次使用 1. CentOS简介 这个版本我个人比较推荐大家学习&#xff0c;为何&#xff1f;因为容易学习所以不难入门。 2. 下载 可以从国内的开源镜像站下载&#xff0c;这样比较快&#xff0c;例如阿里巴巴开源镜像…
阅读更多...
C语言-整数和浮点数在内存中的存储-详解-上

C语言-整数和浮点数在内存中的存储-详解-上

C语言-整数和浮点数在内存中的存储-详解-上 1.前言2.整数2.1无符号整数2.2原码、反码、补码符号位最大值转换过程补码的意义简化算术运算易于转换方便溢出处理 1.前言 在C语言的使用中&#xff0c;需要时刻关注数据的类型&#xff0c;不同类型交替使用可能会发生错误&#xff…
阅读更多...
GPT-4-Turbo 和 Claude-3.5-Sonnet 图片识别出答题的是否正确 进行比较

GPT-4-Turbo 和 Claude-3.5-Sonnet 图片识别出答题的是否正确 进行比较

1、比较的图片&#xff1a; 使用GPT-4-Turbo 输入的 提问&#xff1a; 识别图片中的印刷字和手写字&#xff0c;如果写错的给一个正确答案 图片 回复&#xff1a; 在图片中&#xff0c;印刷字显示的是一系列的英语填空练习题&#xff0c;而手写字则是填入空白处的答案。以…
阅读更多...
[XILINX] 正点原子ZYNQ7015开发板！ZYNQ 7000系列、双核ARM、PCIe2.0、SFPX2，性能强悍，资料丰富！

[XILINX] 正点原子ZYNQ7015开发板！ZYNQ 7000系列、双核ARM、PCIe2.0、SFPX2，性能强悍，资料丰富！

正点原子ZYNQ7015开发板&#xff01;ZYNQ 7000系列、双核ARM、PCIe2.0、SFPX2&#xff0c;性能强悍&#xff0c;资料丰富&#xff01; 正点原子Z15 ZYNQ开发板&#xff0c;搭载Xilinx Zynq7000系列芯片&#xff0c;核心板主控芯片的型号是XC7Z015CLG485-2。开发板由核心板&…
阅读更多...
【刷题】Day3--错误的集合

【刷题】Day3--错误的集合

hello&#xff01;又见面啦~~~ 一道习题&#xff0c;要长脑子了...... 【. - 力扣&#xff08;LeetCode&#xff09;】 【思路】 /*** Note: The returned array must be malloced, assume caller calls free().*/void Bubble_sort(int arr[], int size) {int temp;for (int i…
阅读更多...
Unity 粒子系统参数说明

Unity 粒子系统参数说明

一、Particle System 1. Duration&#xff08;持续时间&#xff09; 粒子系统运行一次所需的时间。它决定粒子系统持续播放的时间长度。 2. Looping&#xff08;循环播放&#xff09; 如果启用&#xff0c;粒子系统将在播放完一次后自动重新开始播放&#xff0c;直到你停止它…
阅读更多...
北斗赋能万物互联：新质生产力的强劲驱动力

北斗赋能万物互联：新质生产力的强劲驱动力

在数字化转型的大潮中&#xff0c;中国自主研制的北斗卫星导航系统&#xff0c;作为国家重大空间基础设施&#xff0c;正以前所未有的力量推动着万物互联时代的到来&#xff0c;成为新质生产力发展的重要基石。本文将深入剖析北斗系统如何以其独特的技术优势和广泛应用场景&…
阅读更多...
【vue】vue3+ts对接科大讯飞大模型3.5智能AI

【vue】vue3+ts对接科大讯飞大模型3.5智能AI

如今ai步及生活的方方面面,你是否也想在自己的网站接入ai呢&#xff1f;今天分享科大讯飞大模型3.5智能AI对接。 获取APPID、APISecret、APIKey 讯飞开放平台注册登录控制台创建自己的应用复制备用 准备工作做好,直接开始上代码了。 源码参考 <script setup lang"t…
阅读更多...
一步到位：通过 Docker Compose 部署 EFK 进行 Docker 日志采集

一步到位：通过 Docker Compose 部署 EFK 进行 Docker 日志采集

一、EFK简介 Elasticsearch&#xff1a;一个开源的分布式搜索和分析引擎&#xff0c;用于存储和查询日志数据。它是 EFK 的核心组件&#xff0c;负责高效地存储和检索日志信息。 Filebeat&#xff1a;一个轻量级的日志采集器&#xff0c;主要用于将日志文件数据发送到 Logsta…
阅读更多...
Ubuntu20+Noetic+cartographer_ros编译部署

Ubuntu20+Noetic+cartographer_ros编译部署

1 准备工作 &#xff08;1&#xff09;准备Ubuntu20系统。 &#xff08;2&#xff09;安装ROS系统,参考 https://blog.csdn.net/weixin_46123033/article/details/139527141&#xff08;3&#xff09;Cartographer相关软件包和源码下载&#xff1a; https://gitee.com/mrwan…
阅读更多...
go语言后端开发学习(七)——如何在gin框架中集成限流中间件

go语言后端开发学习(七)——如何在gin框架中集成限流中间件

一.什么是限流 限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指限制到达系统的并发请求数。 我们生活中也会经常遇到限流的场景&#xff0c;比如&#xff1a;某景区限制每日进入景区的游客数量为8万人&#xff1b;沙河地铁站早高峰通过站外排队逐一放行的…
阅读更多...
ElementUI 快速入门：使用 Vue 脚手架搭建项目

ElementUI 快速入门：使用 Vue 脚手架搭建项目

文章目录 一 . ElementUI 的基本安装1.1 通过 Vue 脚手架创建项目1.2 在 vue 脚手架中安装 ElementUI1.3 编写页面 ElementUI 是 Vue.js 的强大 UI 框架&#xff0c;让前端界面开发变得简单高效。本教程将带你从安装到实战&#xff0c;快速掌握 ElementUI 的核心技巧。 核心内容…
阅读更多...
解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效

解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效

实现效果&#xff1a;正常a-select会根据分辨率、缩放比例动态计算位置等&#xff0c;现在web端已经实现自适应分辨率&#xff0c;需要给下拉菜单设置固定的定位和宽度等样式&#xff0c;不让组件自动瞎设置定位、大小 1、a-select组件加上:getPopupContainer"(triggerNo…
阅读更多...
IP地址、地址分类、子网掩码、子网划分、使用Python计算子网划分

IP地址、地址分类、子网掩码、子网划分、使用Python计算子网划分

IP 地址&#xff08;Internet Protocol Address&#xff09;乃是用于明确标识网络中各类设备的独一无二的地址。IP 地址主要存在两种重要类型&#xff0c;即 IPv4 和 IPv6 。 IPv4地址 IPv4 地址实则是一个由 32 位二进制数字所构成的标识&#xff0c;通常会以四个十进制数字…
阅读更多...
如何精细优化网站关键词排名：实战经验分享

如何精细优化网站关键词排名：实战经验分享

在数字营销日益激烈的今天&#xff0c;我深知每一个关键词的排名都关乎着网站的流量与转化。凭借多年的实战经验&#xff0c;我深刻体会到&#xff0c;要想在浩如烟海的网络世界中脱颖而出&#xff0c;精细化的关键词优化策略至关重要。今天&#xff0c;我将从实战角度出发&…
阅读更多...
WPF利用Path自定义画头部导航条(TOP)样式

WPF利用Path自定义画头部导航条(TOP)样式

1;新建两个多值转换器&#xff0c;都有用处&#xff0c;用来动态确定PATH的X,Y州坐标的。 EndPointConverter 该转换器主要用来动态确定X轴&#xff0c;和Y轴。用于画线条的。 internal class EndPointConverter : IMultiValueConverter {public object Convert(object[] val…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023