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

news/2024/7/14 18:38:23/文章来源:https://blog.csdn.net/weixin_39510813/article/details/139234673

文章目录

    • 一、前言
    • 二、常见控件示例demo模拟环境运行及接口熟悉
      • (重要)如何修改示例main函数测试各种示例
      • 1、label示例
        • 1.1、label示例1(标签基础示例)
        • 1.2、label示例2(标签带阴影效果)
        • 1.3、label示例3(标签字体设置)
        • 1.4、label示例4(目前未完成)
        • 1.5、label示例5(标签内容滚动动画效果)
      • 2、button示例
        • 2.1、button示例1(基础按钮和切换按钮)
        • 2.2、button示例2(按钮阴影和按钮点击后样式变化)
        • 2.3、button示例3(按钮样式过渡动画效果)
      • 3、slider示例
        • 3.1、slider示例1(基础滑块)
        • 3.2、slider示例2(设置滑块样式)
        • 3.3、slider示例3(滑块值样式设置及显示)
        • 3.4、slider示例4(滑块方向相反)
    • 三、最后

一、前言

上节我们主要了解了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)
{//创建默认grouplv_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 45static 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_EXAMPLESstatic 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_EXAMPLESstatic 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_EXAMPLESstatic 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_EXAMPLESstatic 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

  • 滑块方向相反

三、最后

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

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ComfyUI简单介绍

&#x1f353;什么是ComfyUI ComfyUI是一个为Stable Diffusion专门设计的基于节点的图形用户界面&#xff0c;可以通过各种不同的节点快速搭建自己的绘图工作流程。 软件打开之后是长这个样子&#xff1a; 同时软件本身是github上的一个开源项目&#xff0c;开源地址为&#…

编译原理 期末复习笔记整理(上)

资料借鉴&#xff1a; 【编译原理】期末复习 零基础自学_哔哩哔哩_bilibili 编译原理笔记 第一章 引论 1.编译原理逻辑过程&#xff1a; 词法分析 语法分析 语义分析 中间代码生成 编译代码生成 2.词法分析 任务: 输入源程序&#xff0c;对…

通用代码生成器应用场景三,遗留项目反向工程

通用代码生成器应用场景三&#xff0c;遗留项目反向工程 如果您有一个遗留项目&#xff0c;要重新开发&#xff0c;或者源代码遗失&#xff0c;或者需要重新开发&#xff0c;但是希望复用原来的数据&#xff0c;并加快开发。 如果您的项目是通用代码生成器生成的&#xff0c;…

Java应用中文件上传安全性分析与安全实践

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一. 文件上传的风险 二. 使用合适的框架和库 1. Spr…

NLP(17)--大模型发展(1)

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 大模型的演化&#xff1a; ElMO : 类似双向lstm 结果和词向量拼接 预训练鼻祖 GPT :使用了Transformer 模型 开始使用Token &#xff08;发现预训练的作用&#xff09; Bert&#xff1a;认为双向比单向好 MLM(双向) 优于 LT…

App Inventor 2 Encrypt.Security 安全性扩展:MD5哈希,SHA/AES/RSA/BASE64

这是关于App Inventor和Thunkable安全性的扩展&#xff0c;它提供MD5哈希&#xff0c;SHA1和SHA256哈希&#xff0c;AES加密/解密&#xff0c;RSA加密/解密&#xff0c;BASE64编码/解码方法。 权限 此扩展程序不需要任何权限。 事件 OnErrorOccured 抛出任何异常时将触发此事件…

四川景源畅信:抖音小店新手如何做?

随着短视频平台的兴起&#xff0c;抖音小店成为了许多创业者的新选择。但是&#xff0c;对于新手来说&#xff0c;如何在抖音上开设并经营好自己的小店呢?本文将围绕这一问题展开讨论。 一、明确目标和定位作为抖音小店的新手&#xff0c;首先要明确自己的经营目标和定位。是想…

二叉树尾部分

1.二叉树的销毁 2.二叉树的层序遍历 3.判断二叉树是否为完全二叉树 4.二叉树的性质 1.二叉树的销毁 以后序的方式遍历销毁左右子数&#xff0c;因为前序和中序销毁的话根会被销毁而找不到左右子树的位置&#xff0c;后序的根访问在最后&#xff0c;可以找到左右的子树位置。…

YOLOv10介绍与推理--图片和视频演示(附源码)

导 读 本文主要对YOLOv10做简单介绍并给出推理图片和视频的步骤演示。 YOLOv10简介 YOLOv10是清华大学的研究人员在Ultralytics Python包的基础上&#xff0c;引入了一种新的实时目标检测方法&#xff0c;解决了YOLO 以前版本在后处理和模型架构方面的不足。通过消除非最大抑…

从零开始打造教育APP:在线教育系统源码与开发流程

很多人疑问&#xff0c;应该如何从零开始打造一个在线教育APP&#xff1f;今天&#xff0c;小编将详细为大家讲解在线教育系统的源码与开发流程。 一、需求分析 对于在线教育APP&#xff0c;需要要明确以下几点&#xff1a; 1.目标用户&#xff1a;明确APP的用户群体&#xf…

类 和 对象(二)

构造方法 接上篇&#xff0c;若每次都想下面的setDate方法给对象初始化&#xff0c;未免比较麻烦&#xff0c;那有什么方法可以让初始化更加简便呢&#xff1f; public void setDate(int year, int month, int day){this.year year;this.month month;this.day day;}答&#…

2024.5.27 作业 xyt

定义自己的命名空间my_sapce&#xff0c;在my_sapce中定义string类型的变量s1&#xff0c;再定义一个函数完成对字符串的逆置 #include <iostream>using namespace std; namespace my_space {string s1"hello world";void my_strreverse(string str); } using…

C++笔试强训day34

目录 1.ISBN号码 2.kotori和迷宫 3.矩阵最长递增路径 1.ISBN号码 链接https://www.nowcoder.com/practice/95712f695f27434b9703394c98b78ee5?tpId290&tqId39864&ru/exam/oj 提取题意&#xff0c;模拟一下即可。 #include <iostream> using namespace std; …

《我的阿勒泰》读后感

暂没时间写&#xff0c;记录在此&#xff0c;防止忘记&#xff0c;后面补上!!! 【经典语录】 01、如果天气好的话&#xff0c;阳光广阔地照耀着世界&#xff0c;暖洋洋又懒洋洋。这样的阳光下&#xff0c;似乎脚下的每一株草都和我一样&#xff0c;也把身子完全舒展开了。 02、…

Qt---录音

1.获取麦克风阵列&#xff1a; QList<QAudioDeviceInfo> infos QAudioDeviceInfo::availableDevices(QAudio::AudioInput);for (int i 0; i < infos.count(); i){qDebug() << infos.at(i).deviceName();} "麦克风阵列 (Realtek(R) Audio)" 2.QAudio…

内存泄漏案例分享3-view的内存泄漏

案例3——view内存泄漏 前文提到&#xff0c;profile#Leaks视图无法展示非Activity、非Fragment的内存泄漏&#xff0c;换言之&#xff0c;除了Activity、Fragment的内存泄漏外&#xff0c;其他类的内存问题我们只能自己检索hprof文件查询了。 下面有一个极佳的view内存泄漏例子…

ubuntu20.04 10分钟搭建无延迟大疆无人机多线程流媒体服务器

1.使用效果 无人机画面 2.服务器视频端口 3.使用教程 3.1.下载ubuntu对应软件包&#xff1a;系统要求ubuntu16以上 3.2修改端口&#xff08;config.xml文件&#xff09; 3.3启动服务 目录下输入&#xff1a;终端启动&#xff1a;./smart_rtmpd 后台启动&#xff1a;nohup ./…

如何选择序列化协议:关键因素与场景分析

如何选择序列化协议&#xff1a;关键因素与场景分析 序列化协议的选择直接影响着系统的性能、可维护性及跨平台兼容性。以下是针对不同场景下&#xff0c;几种常见序列化协议的选择建议&#xff1a; 1. 公司间系统调用&#xff08;性能要求宽松&#xff09; SOAP (基于XML)&a…

LeetCode 279 —— 完全平方数

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 此图利用动态规划进行求解&#xff0c;首先&#xff0c;我们求出小于 n n n 的所有完全平方数&#xff0c;存放在数组 squareNums 中。 定义 dp[n] 为和为 n n n 的完全平方数的最小数量&#xff0c;那么有状态…

操作教程|通过DataEase开源BI工具对接金山多维表格

前言 金山多维表格是企业数据处理分析经常会用到的一款数据表格工具&#xff0c;它能够将企业数据以统一的列格式整齐地汇总至其中。DataEase开源数据可视化分析工具可以与金山多维表格对接&#xff0c;方便企业更加快捷地以金山多维表格为数据源&#xff0c;制作出可以实时更…