RT-Thread 模拟器 simulator LVGL控件：button 按钮样式

环境搭建

RT-Thread 4.1.0
BSP 模拟器 simulator
LVGL软件包

功能

LVGL 画两个按钮，点击按钮，产生按钮事件
按钮应用【样式】，看起来美观一点

方法

按钮控件，LVGL 有官方的例程，可以直接用于按钮事件的验证
路径：simulator\packages\LVGL-latest\examples\get_started\lv_example_get_started_2.c
操作方法：把 lv_example_get_started_2.c 复制为： simulator\applications\lvgl\demo\lv_btn_02.c ，然后简单修改一下，添加到visual studio 2022中编译，注意修改一下头文件

相关代码

simulator\applications\lvgl\demo\lv_btn_02.c

#include <rtthread.h>
#include <lvgl.h>static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;static lv_color_t darken(const lv_color_filter_dsc_t *dsc, lv_color_t color, lv_opa_t opa)
{LV_UNUSED(dsc);return lv_color_darken(color, opa);
}/* 按钮 button1 的回调函数 */
static void btn1_event_cb(lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);lv_obj_t *btn = lv_event_get_target(e);if (code == LV_EVENT_CLICKED){rt_kprintf("%s : enter\r\n", __func__);}
}/* 按钮 button2 的回调函数 */
static void btn2_event_cb(lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);lv_obj_t *btn = lv_event_get_target(e);if (code == LV_EVENT_CLICKED){rt_kprintf("%s : enter\r\n", __func__);}
}static void style_init(void)
{/*Create a simple button style*/lv_style_init(&style_btn);lv_style_set_radius(&style_btn, 10);lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);lv_style_set_border_color(&style_btn, lv_color_black());lv_style_set_border_opa(&style_btn, LV_OPA_20);lv_style_set_border_width(&style_btn, 2);lv_style_set_text_color(&style_btn, lv_color_black());/*Create a style for the pressed state.*Use a color filter to simply modify all colors in this state*/static lv_color_filter_dsc_t color_filter;lv_color_filter_dsc_init(&color_filter, darken);lv_style_init(&style_btn_pressed);lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);/*Create a red style. Change only some colors.*/lv_style_init(&style_btn_red);lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}/*** Create styles from scratch for buttons.*/
void lv_btn_02_init(void)
{/*Initialize the style*/style_init();/*Create a button and use the new styles*/lv_obj_t *btn1 = lv_btn_create(lv_scr_act());/* Remove the styles coming from the theme* Note that size and position are also stored as style properties* so lv_obj_remove_style_all will remove the set size and position too */lv_obj_remove_style_all(btn1);lv_obj_set_pos(btn1, 10, 10);lv_obj_set_size(btn1, 120, 50);lv_obj_add_style(btn1, &style_btn, 0);lv_obj_add_style(btn1, &style_btn_pressed, LV_STATE_PRESSED);/*Add a label to the button*/lv_obj_t *label = lv_label_create(btn1);lv_label_set_text(label, "Button");lv_obj_center(label);/*Create another button and use the red style too*/lv_obj_t *btn2 = lv_btn_create(lv_scr_act());lv_obj_remove_style_all(btn2);                      /*Remove the styles coming from the theme*/lv_obj_set_pos(btn2, 10, 80);lv_obj_set_size(btn2, 120, 50);lv_obj_add_style(btn2, &style_btn, 0);lv_obj_add_style(btn2, &style_btn_red, 0);lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0); /*Add a local style too*/label = lv_label_create(btn2);lv_label_set_text(label, "Button 2");lv_obj_center(label);lv_obj_add_event_cb(btn1, btn1_event_cb, LV_EVENT_ALL, NULL);           /*Assign a callback to the button*/lv_obj_add_event_cb(btn2, btn2_event_cb, LV_EVENT_ALL, NULL);           /*Assign a callback to the button*/
}

执行的位置可以在： simulator\packages\LVGL-latest\env_support\rt-thread\lv_rt_thread_port.c 调用

编译与运行

正常编译后，运行，发现【按钮】样式改变了

通过调整按钮的样式与颜色，详细可以把按钮做的很漂亮

小结

通过LVGL 官方的例程，快速搭建基于RT-Thread 模拟器的验证环境，用于快速了熟悉LVGL的控件的使用

RT-Thread 模拟器 simulator LVGL控件：button 按钮样式相关推荐

RT-Thread 模拟器 simulator LVGL控件：switch 开关按钮控件
前言 switch button : 开关按钮控件,用的也比较多,这里熟悉下相关的操作 switch 有两个状态:开与关环境搭建 RT-Thread 4.1.0 或最新版本 BSP 模拟器 simu ...
C++ Windows窗口程序：子窗口控件之按钮类button
Windows窗口程序设计中,按钮.文本编辑框等控件都作为一个子窗口在WM_CREATE事件中创建的.其中按钮类button有多种类型和风格,常见的单选钮.复选钮.分组框也在此类中,见下表: 子窗口控 ...
Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
C#窗体控件-按钮控件Button
按钮(Button)控件几乎存在于所有Windows对话框中,是Windows应用程序中最常用的控件之一.按钮控件允许用户通过单击来执行操作.按钮最重要的事件,也是最常用的事件就是Click.当用户单 ...
ESP32 开发笔记(四）LVGL控件学习 ColorPicker 颜色选择器控件
先看效果,创建一个颜色选择器控件,设置事件回调动态显示当前选择的颜色值开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.5 ...
修改安卓默认的系统button样式,以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
ESP32 开发笔记(四）LVGL控件学习 Canvas 画布控件
先看效果,创建了两个画布,一个按钮,按钮是为了演示透明画布效果, 第一个画布先画一个不透明蓝色矩形再画透明矩形,透过画布可以看到下面的按钮第二个面布画了一个圆角矩形中间填充过渡色,再画一个字符串,然 ...
ESP32 开发笔记(四）littleVGL LVGL 控件学习 Arc 弧形控件
先看效果,创建了两个Arc 弧形控件,一个可触摸拖动的默认风格,一个动画控制的自定义风格的弧形控件 ESP-IDF版本:V4.2 littleVGL版本:V7.10.0 开发板购买链接https:// ...
ESP32 开发笔记(四）LVGL控件学习 Table 表格控件
先看效果,创建一个简单的表格开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft= ...

RT-Thread 模拟器 simulator LVGL控件：button 按钮样式

环境搭建

功能

方法

相关代码

编译与运行

小结

RT-Thread 模拟器 simulator LVGL控件：button 按钮样式相关推荐

最新文章

热门文章