2026年LVGL部件应用笔记（基于正点原子教程，持续更新）

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

本文是基于正点原子教程的LVGL部件使用笔记，原视频链接如下

【正点原子】手把手教你学LVGL图形界面编程【真人出镜】LVGL图形界面编程视频教程单片机嵌入式_哔哩哔哩_bilibili

因为本文是针对部件层，想对于每个部件留下一点记录，不涉及具体芯片的移植，关于移植，其实很看具体情况，首先配置显示，触摸可选，然后提供时基。然后看项目是否要上RTOS,是否有外部RAM，是否有自研的管理算法…

本文使用Windows模拟器开发，使用版本为LVGL8.3，具体模拟器配置可看这篇文章

LVGL在VScode中安装模拟器运行配置笔记教程_vscode lvgl-CSDN博客

同时这里也可以使用Trae和Qcode，直接问AI，问题解决更快。

更新日志

首次创建并发布博客——

在开始之前需要新建一个mygui的c文件，h文件，并在main.c的while循环前调用函数MyGui；

 
   
    
      
      #include "lvgl/lvgl.h"  
      #include "mygui.h" 
      void MyGui(void) {}

 
   
    
      
      void MyGui(void)  
      { 
      lv_obj_t * obj = lv_obj_create(lv_scr_act());  
      }

API函数：

 
    
    
       
       设置宽度：lv_obj_set_width(obj, new_width);  
       设置高度：lv_obj_set_height(obj, new_height); 同时设置宽度、高度：lv_obj_set_size(obj, new_width, new_height);

这个概念也好理解，需要注意的是设置部件位置时，坐标原点在父对象的左上角

 
    
    
       
       void MyGui(void)

API函数：

 
     
    
        
        设置X轴坐标：lv_obj_set_x(obj, new_x);  
        设置Y轴坐标：lv_obj_set_y(obj, new_y); 同时设置X、Y轴坐标：lv_obj_set_pos(obj, new_x, new_y);

对齐方式有两种，一种是参照父对象对齐-左图，另一种是参照其他对象对齐（无父子关系）-右图

 
     
    
        
        void MyGui(void)

 
     
    
        
        void MyGui(void)

对齐位置有很多，这里用正点原子的图片用作参考

API：

 
      
    
         
         参照父对象对齐：lv_obj_set_align(obj, LV_ALIGN_...);  
         参照父对象对齐，再进行偏移：lv_obj_align(obj, LVALIGN…, x, y); 参照其他对象对齐（无父子关系），再进行偏移：lv_obj_align_to(obj_to_align, obj_referece, LVALIGN…, x, y);

 
      
    
         
         void MyGui(void)

 
      
    
         
         void MyGui(void)

什么时候样式会生效：

 
      
    
         
         enum { LV_STATE_DEFAULT = 0x0000, /* 默认状态 */ LV_STATE_CHECKED = 0x0001, /* 切换或选中状态 */ LV_STATE_FOCUSED = 0x0002, /* 通过键盘、编码器聚焦或通过触摸板、鼠标单击 */ LV_STATE_FOCUS_KEY = 0x0004, /* 通过键盘、编码器聚焦 */ LV_STATE_EDITED = 0x0008, /* 由编码器编辑 */ LV_STATE_HOVERED = 0x0010, /* 鼠标悬停（现在不支持）*/ LV_STATE_PRESSED = 0x0020, /* 已按下 */ LV_STATE_SCROLLED = 0x0040, /* 滚动状态 */ LV_STATE_DISABLED = 0x0080, /* 禁用状态 */ ...  
         };

 有哪些样式属性可以设置？

很多很多，包括但不限于，背景轮廓边框阴影等，这里举个例子，现象可见上方右图

 
      
    
         
         void MyGui(void)

 如何单独设置部件中某个部分的样式？

在LVGL中，单独设置部件（Widget）某个部分（Part）的样式，使用 lv_obj_set_style_xxx 函数的第3个参数（selector）来指定部件部分。

 
      
    
         
         enum { LV_PART_MAIN = 0x000000, /* 主体，像矩形一样的背景 */ LV_PART_SCROLLBAR = 0x010000, /* 滚动条 */ LV_PART_INDICATOR = 0x020000, /* 指示器，指示当前值 */ LV_PART_KNOB = 0x030000, /* 手柄或旋钮，用于调整参数值 */ LV_PART_SELECTED = 0x040000, /* 选项框，指示当前选择的选项 */ LV_PART_ITEMS = 0x050000, /* 相似的元素，例如单元格 */ LV_PART_TICKS = 0x060000, /* 刻度 */ LV_PART_CURSOR = 0x070000, /* 光标 */  
         };

 例如： 
      
    
         
         void MyGui(void)

API函数：上方示例中出现了一些，此处略

LVGL中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关的操作，类似于单片机的中断回调函数。这里的回调函数可以检测事件类型以及触发对象。

 
        
    
           
           lv_obj_t * btn;  
           static void my_event_cb(lv_event_t * e) 
           void MyGui(void) { 
           btn = lv_btn_create(lv_scr_act()); lv_obj_center(btn); lv_obj_add_event_cb(btn, my_event_cb, LV_EVENT_CLICKED, NULL);  
           }

关于触发，可以有很多种，这里展示一部分（AI搜索）

事件触发时机 LV_EVENT_PRESSED 按下（首次接触） LV_EVENT_PRESSING 正在按（持续触发） LV_EVENT_PRESS_LOST 按下后移出对象释放 LV_EVENT_SHORT_CLICKED 短按（按下+释放，无长按） LV_EVENT_LONG_PRESSED 长按达到阈值 LV_EVENT_LONG_PRESSED_REPEAT 长按持续重复触发 LV_EVENT_CLICKED 点击（按下+释放，无移出） LV_EVENT_RELEASED 释放 LV_EVENT_SCROLL_BEGIN 滚动开始 LV_EVENT_SCROLL_END 滚动结束 LV_EVENT_SCROLL 滚动中 LV_EVENT_GESTURE 手势识别（边缘滑动） LV_EVENT_KEY 按键输入 LV_EVENT_FOCUSED 获得焦点 LV_EVENT_DEFOCUSED 失去焦点 LV_EVENT_LEAVE 离开对象（鼠标/触摸移出）

API函数

 
         
    
            
            添加事件：lv_obj_add_event_cb(obj, event_cb, event_code, user_data);  
            删除事件：lv_obj_remove_event_cb(obj, event_cb);

在 LVGL 中，标签部件主要用于文本显示，例如标题、提示信息等。

组成部分：主体（LV_PART_MAIN），滚动条（LV_PART_SCROLLBAR），选中的文本（LV_PART_SELECTED）

设置文本有三种形式

① 直接设置文本，存储文本的内存动态分配：lv_label_set_text( label, "hallo lvgl");

② 文本不存储在动态内存，而是在指定的缓冲区中（慎用）：lv_label_set_text_static( label,"hallo" );

③ 格式化显示文本，类似printf ：lv_label_set_text_fmt( label, "Value: %d", 50 ) ;

同样的可以对文本单独设置：

① 背景颜色：lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT );

② 字体大小：lv_obj_set_style_text_font( label, &lv_font_montserrat_30, LV_STATE_DEFAULT );

③ 文本颜色：lv_obj_set_style_text_color(label, lv_color_hex(0xf7b37b), LV_STATE_DEFAULT );

示例：这里可以设置个别文本的字体颜色

 
         
    
            
            void MyGui(void)

 
         
    
            
            void MyGui(void)

Q当文本长度超过部件大小的时候怎么显示？

 
         
    
            
            enum { LV_LABEL_LONG_WRAP, /* 默认模式, 如果部件大小已固定，超出的文本将被剪切 */ LV_LABEL_LONG_DOT, /* 将 label 右下角的最后 3 个字符替换为点... */ LV_LABEL_LONG_SCROLL, /* 来回滚动 */ LV_LABEL_LONG_SCROLL_CIRCULAR, /* 循环滚动 */ LV_LABEL_LONG_CLIP, /* 直接剪切掉部件外面的文本部分 */  
            };

 
         
    
            
            void MyGui(void)

 示例效果：正在滚动

例程可参考上方事件，一个基础对象可以按下，一个按钮也能按下，倒也区别不大。

 
          
    
             
             static void my_event_cb(lv_event_t * e)  
             void MyGui(void)

首先要准备需要使用的字体文件（ttf、otf等格式）

登录在线字体转换网站：https://lvgl.io/tools/fontconverter

添加字库文件到LVGL工程中，声明字体，编写测试代码

这里使用鸿蒙字体进行测试：

下载之后改名为.h文件，并添加到CMAKE目录中

另外8.3版本似乎不支持生成文件中的.static_bitmap = 0,，注释掉就好

 
           
    
              
              #include "lvgl/lvgl.h"  
              #include "mygui.h" #include "src/temp_16.h"

2026年LVGL部件应用笔记（基于正点原子教程，持续更新）

相关推荐