嵌入式UI开发-lvgl+wsl2+vscode系列：2、label（标签）+button（按钮）+slider（滑块）控件熟悉及其示例demo运行

最新推荐文章于 2025-06-18 16:55:58 发布

昵称系统有问题

最新推荐文章于 2025-06-18 16:55:58 发布

阅读量886

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # lvgl 文章标签： ui vscode lvgl

本文链接：https://blog.youkuaiyun.com/weixin_39510813/article/details/139234673

文章目录

一、前言

上节我们主要了解了lvgl以及在Windows上搭建基于wsl2和vscode的lvgl模拟运行环境，其demo程序已经成功运行起来，接下来我们根据其框架将lvgl的一些常用控件demo和示例提取出来在模拟环境下都跑一跑，熟悉一下对应的接口和比较常用的label、button、slider三个控件。

二、常见控件示例demo模拟环境运行及接口熟悉

如果lv_port_pc_vscode相关内容无法修改，则很可能是目录和文件权限不对，使用了root用户进行下载处理，这时只需要修改权限即可：

sudo chown user lv_port_pc_vscode/ -R
sudo chgrp user lv_port_pc_vscode/ -R
//user就是你当前使用的用户，可以使用ls -alh查看文件夹权限

（重要）如何修改示例main函数测试各种示例

备份原有的main.c，然后修改main.c，将其原来lv_demo_widgets();修改为label相关的函数，主要是lvgl/examples/widgets/label/下的label的示例：


/**
 * @file main
 *
 */

/*********************
 *      INCLUDES
 *********************/
#define _DEFAULT_SOURCE /* needed for usleep() */
#include <stdlib.h>
#include <unistd.h>
#include <pthread.h>
#include "lvgl/lvgl.h"
#include "lvgl/examples/lv_examples.h"
#include "lvgl/demos/lv_demos.h"

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
static lv_display_t * hal_init(int32_t w, int32_t h);

/**********************
 *  STATIC VARIABLES
 **********************/

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *      VARIABLES
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

int main(int argc, char **argv)
{
   
   
  (void)argc; /*Unused*/
  (void)argv; /*Unused*/

  /*初始化LVGL*/
  lv_init();

  /*初始化硬件抽象层 (显示屏, 输入设备, 滴答设备) */
  hal_init(480, 272);

  lv_example_label_1();
  //lv_example_label_2();
  //lv_example_label_3();
  //lv_example_label_4();
  //lv_example_label_5();

  while(1) {
   
   
    /* 定期调用 lv_task 回掉.
     * 它也可以在定时器中断或操作系统任务中完成 */
    lv_timer_handler();
    usleep(5 * 1000);
  }

  return 0;
}

/**********************
 *   STATIC FUNCTIONS
 **********************/

/**
 * 初始化 LVGL 图形的硬件抽象层 (HAL) 库
 */
static lv_display_t * hal_init(int32_t w, int32_t h)
{
   
   
    //创建默认group
  lv_group_set_default(lv_group_create());

    //创建显示窗口
  lv_display_t * disp = lv_sdl_window_create(w, h);

    //创建鼠标
  lv_indev_t * mouse = lv_sdl_mouse_create();
  lv_indev_set_group(mouse, lv_group_get_default());
  lv_indev_set_display(mouse, disp);
  lv_display_set_default(disp);

    //声明图像文件
  LV_IMAGE_DECLARE(mouse_cursor_icon);
  lv_obj_t * cursor_obj;
    //为光标创建图像对象
  cursor_obj = lv_image_create(lv_screen_active());
    //设置源图像
  lv_image_set_src(cursor_obj, &mouse_cursor_icon);
    //将图像对象连接到驱动程序
  lv_indev_set_cursor(mouse, cursor_obj);

    //创建鼠标滚轮并绑定
  lv_indev_t * mousewheel = lv_sdl_mousewheel_create();
  lv_indev_set_display(mousewheel, disp);
  lv_indev_set_group(mousewheel, lv_group_get_default());

    //创建键盘
  lv_indev_t * kb = lv_sdl_keyboard_create();
  lv_indev_set_display(kb, disp);
  lv_indev_set_group(kb, lv_group_get_default());

  return disp;
}

之后在之前的build目录下重新make后运行main程序即可：

cd lv_port_pc_vscode/build
make
../bin/main

1、label示例

1.1、label示例1（标签基础示例）

#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES

/**
 * 显示换行、重新着色、行对齐和文本滚动
 */
void lv_example_label_1(void)
{
   
   
    lv_obj_t * label1 = lv_label_create(lv_screen_active());
    lv_label_set_long_mode(label1, LV_LABEL_LONG_WRAP);     /*长行换行*/
    lv_label_set_text(label1, "Recolor is not supported for v9 now.");
    lv_obj_set_width(label1, 150);  /*设置较小的宽度以使线条换行*/
    lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0);
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, -40);

    lv_obj_t * label2 = lv_label_create(lv_screen_active());
    lv_label_set_long_mode(label2, LV_LABEL_LONG_SCROLL_CIRCULAR);     /*循环滚动*/
    lv_obj_set_width(label2, 150);
    lv_label_set_text(label2, "It is a circularly scrolling text. ");
    lv_obj_align(label2, LV_ALIGN_CENTER, 0, 40);
}

#endif

展示了：

静态的切换长内容的label，设置更小的行宽度以及显示位置、设置内容等基本的方法；
滚动显示内容的label。

1.2、label示例2（标签带阴影效果）

#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES

/**
 * 创建假文本阴影
 */
void lv_example_label_2(void)
{
   
   
    /*创建阴影样式*/
    static lv_style_t style_shadow;
    lv_style_init(&style_shadow);
    lv_style_set_text_opa(&style_shadow, LV_OPA_30);
    lv_style_set_text_color(&style_shadow, lv_color_black());

    /*首先为阴影创建一个标签（在背景中）*/
    lv_obj_t * shadow_label = lv_label_create(lv_screen_active());
    lv_obj_add_style(shadow_label, &style_shadow, 0);

    /*创建主标签*/
    lv_obj_t * main_label = lv_label_create(lv_screen_active());
    lv_label_set_text(main_label, "A simple method to create\n"
                      "shadows on a text.\n"
                      "It even works with\n\n"
                      "newlines     and spaces.");

    /*为阴影标签设置相同的文本*/
    lv_label_set_text(shadow_label, lv_label_get_text(main_label));

    /*定位主标签*/
    lv_obj_align(main_label, LV_ALIGN_CENTER, 0, 0);

    /*将第二个标签向右下方移动 2 个像素*/
    lv_obj_align_to(shadow_label, main_label, LV_ALIGN_TOP_LEFT, 2, 2);
}

#endif