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

最新推荐文章于 2024-06-19 18:22:09 发布
最新推荐文章于 2024-06-19 18:22:09 发布
阅读量491 收藏 4
点赞数 4
分类专栏： # lvgl 文章标签： ui vscode lvgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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

image.png
展示了：

  • 静态的切换长内容的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

image.png
展示：

  • 带阴影的label，实际上是两个label，一个label为主，用于显示内容，一个label专门用来作为背景稍微偏移一下实现阴影效果，组合起来就是带有阴影样式的label
1.3、label示例3（标签字体设置）
#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SIMSUN_16_CJK && LV_USE_BIDI

/**
 * 显示混合 LTR、RTL 和中文标签
 */
void lv_example_label_3(void)
{
    //LTR标签（左对齐）
    lv_obj_t * ltr_label = lv_label_create(lv_screen_active());
    lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");
    lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);
    lv_obj_set_width(ltr_label, 310);
    lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);

    //RTL标签（右对齐）
    lv_obj_t * rtl_label = lv_label_create(lv_screen_active());
    lv_label_set_text(rtl_label,
                      "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit).");
    lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_RTL, 0);
    lv_obj_set_style_text_font(rtl_label, &lv_font_dejavu_16_persian_hebrew, 0);
    lv_obj_set_width(rtl_label, 310);
    lv_obj_align(rtl_label, LV_ALIGN_LEFT_MID, 5, 0);

    //中文标签
    lv_obj_t * cz_label = lv_label_create(lv_screen_active());
    lv_label_set_text(cz_label,
                      "嵌入式系统（Embedded System），\n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。");
    lv_obj_set_style_text_font(cz_label, &lv_font_simsun_16_cjk, 0);
    lv_obj_set_width(cz_label, 310);
    lv_obj_align(cz_label, LV_ALIGN_BOTTOM_LEFT, 5, -5);
}

#endif

这里有一些宏默认是0，需要跳转到lv_conf.h中去设置1，其中lv_obj_set_style_text_font这里我设置为了目前的lv_font_montserrat_16，但是项目默认使用的字体是lv_font_montserrat_14，所以要么把这里改为lv_font_montserrat_14，要么就在lv_conf.h中修改：

#define LV_FONT_DEFAULT &lv_font_montserrat_16

且

#define LV_FONT_MONTSERRAT_14 0
#define LV_FONT_MONTSERRAT_16 1

之后重新make后运行main程序：
image.png
所以这里label主要展示：

  • 设置label文字内容以及设置文字不同字体
  • 设置内容对齐方式
1.4、label示例4（目前未完成）
#include "../../lv_examples.h"
//TODO
#if LV_USE_LABEL && LV_USE_CANVAS && LV_BUILD_EXAMPLES && LV_DRAW_SW_COMPLEX && 0

#define MASK_WIDTH 100
#define MASK_HEIGHT 45

static void add_mask_event_cb(lv_event_t * e)
{
    static lv_draw_mask_map_param_t m;
    static int16_t mask_id;

    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    lv_opa_t * mask_map = lv_event_get_user_data(e);
    if(code == LV_EVENT_COVER_CHECK) {
        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
    }
    else if(code == LV_EVENT_DRAW_MAIN_BEGIN) {
        lv_draw_mask_map_init(&m, &obj->coords, mask_map);
        mask_id = lv_draw_mask_add(&m, NULL);

    }
    else if(code == LV_EVENT_DRAW_MAIN_END) {
        lv_draw_mask_free_param(&m);
        lv_draw_mask_remove_id(mask_id);
    }
}

/**
 * Draw label with gradient color
 */
void lv_example_label_4(void)
{
    /* Create the mask of a text by drawing it to a canvas*/
    static lv_color_t mask_map[MASK_WIDTH * MASK_HEIGHT];

    /*Create a "8 bit alpha" canvas and clear it*/
    lv_obj_t * canvas = lv_canvas_create(lv_screen_active());
    lv_canvas_set_buffer(canvas, mask_map, MASK_WIDTH, MASK_HEIGHT, LV_COLOR_FORMAT_NATIVE);
    lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP);

    /*Draw a label to the canvas. The result "image" will be used as mask*/
    lv_draw_label_dsc_t label_dsc;
    lv_draw_label_dsc_init(&label_dsc);
    label_dsc.color = lv_color_white();
    label_dsc.align = LV_TEXT_ALIGN_CENTER;
    label_dsc.text = "Text with gradient";
    lv_canvas_draw_text(canvas, 5, 5, MASK_WIDTH, &label_dsc);

    /*The mask is reads the canvas is not required anymore*/
    lv_obj_delete(canvas);

    /*Convert the mask to A8*/
    uint32_t i;
    uint8_t * mask8 = (uint8_t *) mask_map;
    lv_color_t * mask_c = mask_map;
    for(i = 0; i < MASK_WIDTH * MASK_HEIGHT; i++) {
        mask8[i] = lv_color_brightness(mask_c[i]);
    }

    /* Create an object from where the text will be masked out.
     * Now it's a rectangle with a gradient but it could be an image too*/
    lv_obj_t * grad = lv_obj_create(lv_screen_active());
    lv_obj_set_size(grad, MASK_WIDTH, MASK_HEIGHT);
    lv_obj_center(grad);
    lv_obj_set_style_bg_color(grad, lv_color_hex(0xff0000), 0);
    lv_obj_set_style_bg_grad_color(grad, lv_color_hex(0x0000ff), 0);
    lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_HOR, 0);
    lv_obj_add_event_cb(grad, add_mask_event_cb, LV_EVENT_ALL, mask_map);
}

#endif

示例4显示TODO，明显还没有完成，应该会随着后续升级完成，强行去掉0这个宏的话编译也会报错，这里看应该是想实现绘制画布来做label的一些功能，后续升级版本后再看看，可以订阅官方的邮箱来了解其更新情况。

1.5、label示例5（标签内容滚动动画效果）
#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES

/**
 * 显示使用“LV_LABEL_LONG_SCROLL_CIRCULAR”自定义标签的圆形滚动动画长模式
 */
void lv_example_label_5(void)
{
    static lv_anim_t animation_template;
    static lv_style_t label_style;

    lv_anim_init(&animation_template);
    lv_anim_set_delay(&animation_template, 1000);           /*等待 1 秒开始第一个滚动*/
    lv_anim_set_repeat_delay(&animation_template,
                             3000);    /*标签滚动回初始位置后重复滚动 3 秒*/

    /*使用动画模板初始化标签样式*/
    lv_style_init(&label_style);
    lv_style_set_anim(&label_style, &animation_template);

    lv_obj_t * label1 = lv_label_create(lv_screen_active());
    lv_label_set_long_mode(label1, LV_LABEL_LONG_SCROLL_CIRCULAR);      /*循环滚动*/
    lv_obj_set_width(label1, 150);
    lv_label_set_text(label1, "It is a circularly scrolling text. ");
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_style(label1, &label_style, LV_STATE_DEFAULT);           /*将样式添加到标签*/
}

#endif

image.png
展示：

  • 延迟一秒后开始滚动，滚动三秒后回到初始状态
  • 实现label滚动效果的延迟处理

这种应该场景应该不是很多，所以基本上前三种示例满足大部分场景了。

2、button示例

button目前有三个示例。

2.1、button示例1（基础按钮和切换按钮）
#include "../../lv_examples.h"
#if LV_USE_BUTTON && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    if(code == LV_EVENT_CLICKED) {
        LV_LOG_USER("Clicked");
    }
    else if(code == LV_EVENT_VALUE_CHANGED) {
        LV_LOG_USER("Toggled");
    }
}

void lv_example_button_1(void)
{
    lv_obj_t * label;

    lv_obj_t * btn1 = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);
    lv_obj_remove_flag(btn1, LV_OBJ_FLAG_PRESS_LOCK);

    label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    lv_obj_t * btn2 = lv_button_create(lv_screen_active());
    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_set_height(btn2, LV_SIZE_CONTENT);

    label = lv_label_create(btn2);
    lv_label_set_text(label, "Toggle");
    lv_obj_center(label);

}
#endif

image.png
展示：

  • 如何创建button或者Toggle
  • button或者toggle上添加文本内容通过label来实现
  • toggle除了button的点击事件完，还有对应的切换事件，根据切换状态会更改对应颜色
  • 并且根据对应触发的事件可以在回调中做进一步处理
2.2、button示例2（按钮阴影和按钮点击后样式变化）
#include "../../lv_examples.h"
#if LV_USE_BUTTON && LV_BUILD_EXAMPLES

/**
 * 从头开始设计按钮
 */
void lv_example_button_2(void)
{
    /*初始化默认状态的样式*/
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_radius(&style, 3);

    lv_style_set_bg_opa(&style, LV_OPA_100);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_bg_grad_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 2));
    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);

    lv_style_set_border_opa(&style, LV_OPA_40);
    lv_style_set_border_width(&style, 2);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_GREY));

    lv_style_set_shadow_width(&style, 8);
    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_shadow_offset_y(&style, 8);

    lv_style_set_outline_opa(&style, LV_OPA_COVER);
    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));

    lv_style_set_text_color(&style, lv_color_white());
    lv_style_set_pad_all(&style, 10);

    /*初始化按下的样式*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);

    /*按下时添加大轮廓*/
    lv_style_set_outline_width(&style_pr, 30);
    lv_style_set_outline_opa(&style_pr, LV_OPA_TRANSP);

    lv_style_set_translate_y(&style_pr, 5);
    lv_style_set_shadow_offset_y(&style_pr, 3);
    lv_style_set_bg_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 2));
    lv_style_set_bg_grad_color(&style_pr, lv_palette_darken(LV_PALETTE_BLUE, 4));

    /*向轮廓添加过渡*/
    static lv_style_transition_dsc_t trans;
    static lv_style_prop_t props[] = {LV_STYLE_OUTLINE_WIDTH, LV_STYLE_OUTLINE_OPA, 0};
    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 300, 0, NULL);

    lv_style_set_transition(&style_pr, &trans);

    lv_obj_t * btn1 = lv_button_create(lv_screen_active());
    lv_obj_remove_style_all(btn1);                          /*删除来自主题的样式*/
    lv_obj_add_style(btn1, &style, 0);
    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
    lv_obj_set_size(btn1, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_center(btn1);

    lv_obj_t * label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);
}
#endif

image.png
展示：

  • button的初始化样式，比如阴影
  • 设置button点击后的样式，使其更加酷炫
2.3、button示例3（按钮样式过渡动画效果）
#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_BUTTON

/**
 * 在按钮上创建样式过渡，单击时就像口香糖一样
 */
void lv_example_button_3(void)
{
    /*要转换的属性*/
    static lv_style_prop_t props[] = {
        LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_TRANSFORM_HEIGHT, LV_STYLE_TEXT_LETTER_SPACE, 0
    };

    /*返回默认状态时的转换描述符。
     *添加一些延迟以确保即使按下时间很短，按下过渡也可见*/
    static lv_style_transition_dsc_t transition_dsc_def;
    lv_style_transition_dsc_init(&transition_dsc_def, props, lv_anim_path_overshoot, 250, 100, NULL);

    /*进入按下状态时的转换描述符。
     *无延迟，立即进入按下状态*/
    static lv_style_transition_dsc_t transition_dsc_pr;
    lv_style_transition_dsc_init(&transition_dsc_pr, props, lv_anim_path_ease_in_out, 250, 0, NULL);

    /*仅将新的转换添加到默认状态*/
    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &transition_dsc_def);

    /*向按压状态添加过渡和一些转换。*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_transform_width(&style_pr, 10);
    lv_style_set_transform_height(&style_pr, -10);
    lv_style_set_text_letter_space(&style_pr, 10);
    lv_style_set_transition(&style_pr, &transition_dsc_pr);

    lv_obj_t * btn1 = lv_button_create(lv_screen_active());
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -80);
    lv_obj_add_style(btn1, &style_pr, LV_STATE_PRESSED);
    lv_obj_add_style(btn1, &style_def, 0);

    lv_obj_t * label = lv_label_create(btn1);
    lv_label_set_text(label, "Gum");
}
#endif

image.png
展示：

  • 在按钮上创建样式过渡，单击时就像口香糖一样
  • 将多种样式融合起来，在点击过程中进行按钮样式过度，使其具备更加动态的显示效果，button点击起来更具备科技感和交互感

3、slider示例

3.1、slider示例1（基础滑块）
#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;

/**
 * 带有显示当前值的标签的默认滑块
 */
void lv_example_slider_1(void)
{
    /*在显示屏中央创建一个滑块*/
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_center(slider);
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    lv_obj_set_style_anim_duration(slider, 2000, 0);
    /*在滑块下方创建标签*/
    slider_label = lv_label_create(lv_screen_active());
    lv_label_set_text(slider_label, "0%");

    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    char buf[8];
    lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
    lv_label_set_text(slider_label, buf);
    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

#endif

image.png
展示：

  • 带有显示当前值的标签的默认滑块
3.2、slider示例2（设置滑块样式）
#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

/**
 * 展示如何设置滑块的样式
 */
void lv_example_slider_2(void)
{
    /*创建过渡*/
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
    static lv_style_transition_dsc_t transition_dsc;
    lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);

    static lv_style_t style_main;
    static lv_style_t style_indicator;
    static lv_style_t style_knob;
    static lv_style_t style_pressed_color;
    lv_style_init(&style_main);
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_main, -2); /*使指标变大*/

    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
    lv_style_set_transition(&style_indicator, &transition_dsc);

    lv_style_init(&style_knob);
    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
    lv_style_set_border_width(&style_knob, 2);
    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all(&style_knob, 6); /*使旋钮变大*/
    lv_style_set_transition(&style_knob, &transition_dsc);

    lv_style_init(&style_pressed_color);
    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    /*创建滑块并添加样式*/
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_remove_style_all(slider);        /*删除来自主题的样式*/

    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);

    lv_obj_center(slider);
}

#endif

image.png

  • 展示如何设置滑块的样式。
3.3、slider示例3（滑块值样式设置及显示）
#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

static void slider_event_cb(lv_event_t * e);

/**
 * 通过展开抽屉按下滑块时显示当前值
 *
 */
void lv_example_slider_3(void)
{
    /*在显示屏中央创建一个滑块*/
    lv_obj_t * slider;
    slider = lv_slider_create(lv_screen_active());
    lv_obj_center(slider);

    lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);
    lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);

    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);
    lv_obj_refresh_ext_draw_size(slider);
}

static void slider_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);

    /*为该值提供一些额外的空间*/
    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
        lv_event_set_ext_draw_size(e, 50);
    }
    else if(code == LV_EVENT_DRAW_MAIN_END) {
        if(!lv_obj_has_state(obj, LV_STATE_PRESSED)) return;

        lv_slider_t * slider = (lv_slider_t *) obj;
        const lv_area_t * indic_area = &slider->bar.indic_area;
        char buf[16];
        lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));

        lv_point_t label_size;
        lv_text_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
        lv_area_t label_area;
        label_area.x1 = 0;
        label_area.x2 = label_size.x - 1;
        label_area.y1 = 0;
        label_area.y2 = label_size.y - 1;

        lv_area_align(indic_area, &label_area, LV_ALIGN_OUT_TOP_MID, 0, -10);

        lv_draw_label_dsc_t label_draw_dsc;
        lv_draw_label_dsc_init(&label_draw_dsc);
        label_draw_dsc.color = lv_color_hex3(0x888);
        label_draw_dsc.text = buf;
        label_draw_dsc.text_local = true;
        lv_layer_t * layer = lv_event_get_layer(e);
        lv_draw_label(layer, &label_draw_dsc, &label_area);
    }
}

#endif

image.png

  • 展开抽屉按下滑块时显示当前值
3.4、slider示例4（滑块方向相反）
#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES

static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;

/**
 * 滑块方向相反
 */
void lv_example_slider_4(void)
{
    /*在显示屏中央创建一个滑块*/
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_center(slider);
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    /*反转滑块的方向*/
    lv_slider_set_range(slider, 100, 0);
    /*在滑块下方创建标签*/
    slider_label = lv_label_create(lv_screen_active());
    lv_label_set_text(slider_label, "0%");

    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    char buf[8];
    lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
    lv_label_set_text(slider_label, buf);
    lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

#endif

image.png

  • 滑块方向相反

三、最后

基本常用的几个基础控件就先总结到这里，接下来总结一下样式的相关使用。

昵称系统有问题
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
LVGL_基础控件Switch_Button
weixin_50183638的博客
10-05 667
【代码】LVGL_基础控件Switch_Button。
【全csdn最前沿LVGL9】按钮的使用(lv_button)、标签的使用(lv_label)
m0_62599305的博客
02-01 2278
欢迎来到本文，我们将一同探索 LVGL（LittlevGL）库中按钮（lv_button）和标签（lv_label）组件的使用。LVGL作为一款嵌入式图形库，提供了现代、可自定义的用户界面解决方案，而按钮和标签是其强大功能中的两个关键组件。在本文中，我们将深入了解如何使用lv_button创建交互式按钮，以及如何使用lv_label展示文本内容。这两个组件的结合使用可以为嵌入式系统提供直观、美观的用户界面，为用户提供更好的交互体验。
LVGL——滑块部件
weixin_63780683的博客
12-14 529
【代码】LVGL——滑块部件。
【LVGL+GUI-Guider】添加滑块并显示滑块对应的值
2301_79728756的博客
03-03 1232
使用DAC+DMA输出波，并利用方波、三角波、正弦波三个按钮，控制输出波形滑动滑条Frequency可以调节波的频率：100-5000Hz可调；滑动滑条Vpp可以调节波的峰峰值最后，在屏幕上显示当前输出的波形、频率和峰峰值。
LVGL8.3 --lv_btn 按钮
smicd的博客
01-28 562
与**基础对象(lv_obj)**相比，按钮没有新功能。它们可用于语义目的，并且默认设置略有不同。不可滚动添加到默认组默认高度和宽度设置为 LV_SIZE_CONTENT。
wsl-dotfiles：WSL 2 Ubuntu + Windows Terminal + Docker + VS代码
02-17
1.启用WSL2 以管理员身份（已提升权限）在PowerShell中运行： Enable-WindowsOptionalFeature - Online - FeatureName Microsoft - Windows - Subsystem - Linux Enable-WindowsOptionalFeature - Online - ...
VSCode + WSL 2 + Ruby环境搭建图文详解
10-15
在本教程中，我们将详细介绍如何在Windows 10环境下利用Visual Studio Code (VSCode)、WSL 2（Windows Subsystem for Linux 2）以及Ruby搭建一个高效的开发环境。VSCode近年来已成为流行的代码编辑器，尤其对于Ruby...
wsl2-forwarding-port-cli:WSL2-forwarding-port-cli是用于WSL2 TCP和UDP转发端口配置的命令行工具
04-05
wsl2-forwarding-port-cli 作者：Chatdanai Phakaket 电子邮件： WSL2-forwarding-port-cli是用于wsl2转发端口配置的命令行工具 要求 [推荐] wsl2-forwarding-port-engine版本1.0.1-beta wsl2-forwarding-port-...
基于WSL2和vscode搭建nodejs linux 开发环境1
08-03
**基于WSL2和VSCode搭建Node.js Linux开发环境** 在现代软件开发中，尤其是在JavaScript领域，Node.js作为服务器端的开发平台，被广泛应用。为了确保开发环境与生产环境的一致性，开发者经常需要在Linux环境中进行...
systemctl (WSL2+Centos7错误)
03-25
解决错误Failed to get D-Bus connection: Operation not permiited（WSL+Centos7错误） mv /usr/bin/systemctl /usr/bin/systemctl.old #备份旧文件 cp systemctl /usr/bin/systemctl #替换 chmod +x /usr/bin/...
LittelvGL使用教程
12-31
LittelvGL使用中文教程 https://github.com/littlevgl/lvgl/issues/125
LVGL基本控件介绍
damon:月影星魔
08-18 2013
lvgl基本控件的使用和效果图
【LVGL学习笔记】（三）控件使用
weixin_45728705的博客
12-17 4454
LVGL学习笔记
lvgl-按钮学习篇（三）
weixin_41080308的博客
01-08 4847
本篇文章介绍了lvgl有关按钮方面的知识，旨在目的是方便开发者如何快速上手按钮控件。
RT-Thread 模拟器 simulator LVGL控件：button 按钮样式
坚韧与专注
06-12 812
RT-Thread 模拟器 simulator LVGL控件：button 按钮样式
ESP32 开发笔记(四）LVGL控件学习 Button 按钮控件
cnicfhnui的博客
12-03 8078
先看效果，最高33帧，第一个按钮为果冻效果，第二个扩展，第三个扩散，第四个正常，第五个翻转效果 123使用了效果风格，类似css，45是纯按钮成员函数实现 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ..
ESP32 开发笔记(四）LVGL控件学习 ImageButton 图像按钮控件
cnicfhnui的博客
12-05 5536
先看效果，创建一个图像按钮，按钮类型是类开关按钮，按一次调用一张图片，再按一次调用另一张图片 此文章为盖楼文章，为组织目录链接用，未写教程，教程更新后会删除此行 开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674 一、开发板简介 二、开发环境搭建 windows ESP32例程为C语言开发，并非Python/Arduino/AT指令开发
一灯大师，点亮ESP32的LED
热门推荐
朝气蓬勃
04-08 1万+
ESP32点亮LED灯
【AI】生成式AI服务器最低配置
最新发布
每日出拳老爷子的博客
06-19 237
UI采用open-web-ui，模型用Ollama管理，在局域网做成SAAS服务。注意，之所以是最低配置，纯粹因为公司申请花钱麻烦，所以有条件的话当然直接双GPU，A100走起，320GDDR4走起。"技嘉（GIGABYTE）C102G全景式 机箱熏黑钢化玻璃侧透兼容360/240水冷散热器。一些基础的注意事项包括，主板看是否支持14代CPU，版型是ATX还是MATX等，机箱需要匹配。考虑数据安全，又想用AI赋能企业内部的日常工作，答案只有一个，本地部署。电源要看瓦数，目前这个配置至少要750W以上。
docker+desktop-unexpected+wsl
11-22
Docker Desktop是一个用于在Windows和Mac上运行Docker的应用程序。它提供了一个用户友好的界面，可以轻松地管理和运行Docker容器。WSL（Windows Subsystem for Linux）是Windows 10中的一个功能，它允许用户在Windows上运行Linux发行版。 如果在安装Docker Desktop时遇到了"docker+desktop-unexpected+wsl"错误，可能是由于WSL未正确配置或启用所致。以下是解决此问题的步骤： 1. 确保已安装WSL：在Windows 10上，打开PowerShell或命令提示符，并运行以下命令来检查WSL是否已安装： ```shell wsl --list --verbose ``` 如果没有任何输出或显示"WSL 2 is not installed"，则需要安装WSL。可以按照Microsoft的官方文档进行安装：https://docs.microsoft.com/en-us/windows/wsl/install-win10 2. 启用WSL 2：在安装WSL后，需要将WSL 2设置为默认版本。打开PowerShell或命令提示符，并运行以下命令： ```shell wsl --set-default-version 2 ``` 3. 安装Linux发行版：在WSL 2中运行Docker需要安装一个Linux发行版。可以从Microsoft Store中选择一个喜欢的发行版，例如Ubuntu、Debian等。打开Microsoft Store，搜索并安装所选的发行版。 4. 配置Docker Desktop：打开Docker Desktop应用程序，转到设置（Settings）-> WSL Integration。确保已启用所需的Linux发行版，并将其与Docker Desktop关联起来。 完成上述步骤后，应该能够成功安装和运行Docker Desktop，并在WSL 2中使用Docker。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昵称系统有问题

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值