LVGL 控件之按钮（lv_button）

2024-08-31 12:52
文章标签 控件 按钮 lvgl button lv

本文主要是介绍LVGL 控件之按钮（lv_button），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 一、按钮
    • 1、概述
    • 2、样式
      • 2.1 设置背景
        • 2.1.1 颜色
        • 2.1.2 透明度
        • 2.1.3 渐变色
        • 2.1.4 渐变色起始位置设置
      • 2.2 修改边界
        • 2.2.1 宽度
        • 2.2.2 颜色
        • 2.2.3 透明度
        • 2.2.4 指定边
      • 2.3 修改边框
      • 2.4 修改阴影
        • 2.4.1 宽度
        • 2.4.2 透明度
        • 2.4.3 偏移坐标
        • 2.4.4 颜色
        • 2.4.5 延伸
      • 2.5 设置圆角弧度
      • 2.6 修改其他状态下的显示
  • 二、例程

一、按钮

1、概述

按钮部件（lv_btn）仅有一个组成部分：主体背景，示意图如下：

与 Base object（见：LVGL 控件之基础对象（lv_obj）） 相比，按钮没有新功能。 它们可用于语义目的，并且默认设置略有不同。

默认情况下，按钮在以下方面与基础对象不同：

  • 不可滚动
  • 添加到默认组
  • 默认高度和宽度设置为 LV_SIZE_CONTENT

button 对象通过 lv_btn_create 创建。

lv_obj_t * lv_btn_create(lv_obj_t * parent)

因此，这里不再过多叙述 button 的一些东西，这里主要讲一下样式的设置。

2、样式

2.1 设置背景

2.1.1 颜色

通过函数 lv_obj_set_style_bg_color 设置：

lv_obj_set_style_bg_color(btn1, lv_color_hex(0xafafaf), LV_PART_MAIN);

或者通过Style设置

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_DEFAULT);

按键默认为蓝色，添加了样式后变成了灰色：

2.1.2 透明度

这里是改成了 20% 的透明度：

lv_obj_set_style_bg_opa(btn, LV_OPA_20, LV_PART_MAIN);

修改透明度只需要修改中间的 LV_OPA_XX 即可。

2.1.3 渐变色

背景可以使用渐变色的方式。用到了下面两个个 API 函数：

函数含义
lv_obj_set_style_bg_grad_color设置渐变色的颜色
lv_obj_set_style_bg_grad_dir设置渐变方向
  • 水平方向：LV_GRAD_DIR_HOR
  • 垂直方向：LV_GRAD_DIR_VER
lv_obj_set_style_bg_grad_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, LV_PART_MAIN);

颜色是从背景色过渡到设置的渐变色。

在这里插入图片描述

2.1.4 渐变色起始位置设置
函数含义
lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)设置开始位置
lv_obj_set_style_bg_grad_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)设置结束位置

参数 value 表示起始位置（开始默认值是0，结束默认值为255）：

  • 0：最左/最上位置，
  • 255：最右/最下位置。

接上面的例子，将渐变色的开始位置改为中间。

lv_obj_set_style_bg_main_stop(btn, 127, LV_PART_MAIN);
lv_obj_set_style_bg_grad_stop(btn, 255, LV_PART_MAIN);

2.2 修改边界

2.2.1 宽度

边界的宽度一般默认是0，所以需要先设置宽度。

lv_obj_set_style_border_width(btn, 4, LV_PART_MAIN);

可以看到边界就是黑色那一圈。

2.2.2 颜色
lv_obj_set_style_border_color(btn, lv_color_make(246, 174, 49), LV_PART_MAIN);

在这里插入图片描述

2.2.3 透明度

默认是不透明。

lv_obj_set_style_border_opa(btn, LV_OPA_50, LV_PART_MAIN);

在这里插入图片描述

2.2.4 指定边

四个边通过 lv_obj_set_style_border_side 指定修改哪几个边，可以通过或的方式组合多个边

enum {LV_BORDER_SIDE_NONE     = 0x00,LV_BORDER_SIDE_BOTTOM   = 0x01,LV_BORDER_SIDE_TOP      = 0x02,LV_BORDER_SIDE_LEFT     = 0x04,LV_BORDER_SIDE_RIGHT    = 0x08,LV_BORDER_SIDE_FULL     = 0x0F,LV_BORDER_SIDE_INTERNAL = 0x10, /**< FOR matrix-like objects (e.g. Button matrix)*/
};

通过下面的函数可以单独针对按键的某些边进行设置：

lv_obj_set_style_border_side(btn, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);

2.3 修改边框

lv_obj_set_style_outline_pad(btn, 4, LV_PART_MAIN);
lv_obj_set_style_outline_width(btn, 4, LV_PART_MAIN);
lv_obj_set_style_outline_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);

2.4 修改阴影

2.4.1 宽度

阴影的宽度默认是 0，改为 4 验证：

lv_obj_set_style_shadow_width(btn, 4, LV_PART_MAIN);

由于默认透明度是透明，所以只改这个参数无法看到效果。

2.4.2 透明度

阴影的透明度通过 lv_obj_set_style_shadow_opa 改变。

lv_obj_set_style_shadow_opa(btn, LV_OPA_80, LV_PART_MAIN);

此时也看不太明显。

2.4.3 偏移坐标

这里的偏移坐标是基于对象左顶点的偏移。

  1. 改变 x 轴方向上的偏移：
lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);

这样看起来就非常明显了。

  1. 改变 y 轴方向上的偏移：
lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);

2.4.4 颜色
lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);

2.4.5 延伸

设置在每个方向上的延伸值。

lv_obj_set_style_shadow_spread(btn, 4, LV_PART_MAIN);

2.5 设置圆角弧度

通过 lv_style_set_radius 设置圆角弧度。

lv_obj_set_style_radius(btn, LV_PCT(20), LV_PART_MAIN);

2.6 修改其他状态下的显示

需要通过 Style 修改其他状态下的显示。例如如果采用 Check Button，选中后的颜色是红色，改为灰色。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_CHECKED);

为了简化按钮的使用，可以使用 lv_btn_get_state(btn) 来获取按钮的状态。它返回以下值之一：

  • LV_BTN_STATE_RELEASED 松开
  • LV_BTN_STATE_PRESSED 被点击
  • LV_BTN_STATE_CHECKED_RELEASED 点击后松开
  • LV_BTN_STATE_CHECKED_PRESSED 重复点击
  • LV_BTN_STATE_DISABLED 禁用
  • LV_BTN_STATE_CHECKED_DISABLED 禁止点击

使用 lv_btn_set_state(btn, LV_BTN_STATE_...) 可以手动更改按钮状态。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_PRESSED);
lv_obj_add_style(btn2, &style, LV_STATE_FOCUSED);

二、例程

代码比较简单，主要是样式的设置和事件的添加，运行效果和源码见下：

lv_obj_t *btn_speed_up;
lv_obj_t *btn_speed_down;
lv_obj_t *btn_stop;
lv_font_t *font = &lv_font_montserrat_16;
lv_obj_t *label_speed;
uint32_t speed_val;static void lv_example_label(void) {label_speed = lv_label_create(lv_scr_act());/* 创建速度显示标签 */lv_obj_set_style_text_font(label_speed, font, LV_PART_MAIN); /* 设置字体 */lv_label_set_text(label_speed, "Speed : 0 RPM"); /* 设置文本 *//* 设置标签位置 */lv_obj_align(label_speed, LV_ALIGN_TOP_MID, 0, 100);
}static void btn_event_cb(lv_event_t * e) {lv_obj_t *target = lv_event_get_target(e); /* 获取触发源 */if(target == btn_speed_up) { /* 加速按钮 */speed_val += 30;} else if(target == btn_speed_down) { /* 减速按钮 */speed_val -= 30;} else if(target == btn_stop) { /* 急停按钮 */speed_val = 0;}lv_label_set_text_fmt(label_speed, "Speed : %d RPM", speed_val);  /* 更新速度值 */
}static void lv_example_btn_up(void) {btn_speed_up = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */lv_obj_set_size(btn_speed_up, 200, 100);     /* 设置按钮大小 */lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -250, 0);  /* 设置按钮位置 */lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */lv_obj_t* label = lv_label_create(btn_speed_up);       /* 创建加速按钮标签 */lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */lv_label_set_text(label, "Speed +");                   /* 设置标签文本 */lv_obj_set_align(label,LV_ALIGN_CENTER);               /* 设置标签位置 */
}static void lv_example_btn_down(void) {btn_speed_down = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */lv_obj_set_size(btn_speed_down, 200, 100);  /* 设置按钮大小 */lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0);  /* 设置按钮位置 */lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */lv_obj_t* label = lv_label_create(btn_speed_down);      /* 创建减速按钮标签 */lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */lv_label_set_text(label, "Speed -");                    /* 设置标签文本 */lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}static void lv_example_btn_stop(void) {btn_stop = lv_btn_create(lv_scr_act());  /* 创建急停按钮 */lv_obj_set_size(btn_stop, 200, 100);     /* 设置按钮大小 */lv_obj_align(btn_stop, LV_ALIGN_CENTER, 250, 0);  /* 设置按钮位置 */lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60),  /* 设置按钮背景颜色（默认） */LV_STATE_DEFAULT);lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000),  /* 设置按钮背景颜色（按下） */LV_STATE_PRESSED);lv_obj_add_event_cb(btn_stop, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */lv_obj_t* label = lv_label_create(btn_stop);            /* 创建急停按钮标签 */lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */lv_label_set_text(label, "Stop");                       /* 设置标签文本 */lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}void my_gui(void) {lv_example_label();    /* 速度提示标签 */lv_example_btn_up();   /* 加速按钮 */lv_example_btn_down(); /* 减速按钮 */lv_example_btn_stop(); /* 急停按钮 */
}

这篇关于LVGL 控件之按钮（lv_button）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1123959。

相关文章

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
C# 防止按钮botton重复“点击”的方法

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候，经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发，因为C#采用的是消息队列机制，这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh
阅读更多...
Flutter Button使用

Flutter Button使用

Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。         基本的按钮特点：         1.按下时都会有“水波文动画”。         2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。
阅读更多...
小程序button控件上下边框的显示和隐藏

小程序button控件上下边框的显示和隐藏

问题 想使用button自带的loading图标功能，但又不需要button显示边框线 button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏 代码如下： <button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/} 解决方案 发现button控件有一个伪元素（::after
阅读更多...
MFC中Spin Control控件使用，同时数据在Edit Control中显示

MFC中Spin Control控件使用，同时数据在Edit Control中显示

实现mfc spin control 上下滚动，只需捕捉spin control 的 UDN_DELTAPOD 消息，如下：  OnDeltaposSpin1(NMHDR *pNMHDR, LRESULT *pResult) {  LPNMUPDOWN pNMUpDown = reinterpret_cast(pNMHDR);  // TODO: 在此添加控件通知处理程序代码    if
阅读更多...
PNG透明背景按钮的实现（MFC）

PNG透明背景按钮的实现（MFC）

问题描述： 当前要在对话框上添加一个以两个PNG图片作为背景的按钮，PNG图的背景是透明的，按钮也要做出相同的透明效果。并且鼠标不在按钮上时，按钮显示"bg1.png"；鼠标移动到按钮上时，按钮显示"bg2.png" 开发环境为VS2010。 解决办法： 使用GDI+库装载PNG图片，并使用MFC Button Control和CMFCButton类结合，调用CMFCButton
阅读更多...
MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

MFC 控件重绘(2) NM_CUSTOMDRAW, WM_DRAWITEM, 虚函数DrawItem

控件重绘有三种方法： 1 设定界面属性 2 利用Windows的消息机制，通过Windows消息映射(Message Mapping)和反映射(Message Reflecting)，在合适的时机修改控件的状态和行为。此方式涉及NM_CUSTOMDRAW和WM_DRAWITEM 3 利用虚函数机制，重载虚函数。即DrawItem虚函数。 对于NM_CUSTOMDRAW,某些支持此消息的控件
阅读更多...
C# 通过拖控件移动窗体

C# 通过拖控件移动窗体

目录 引言一、通过控件事件移动窗体1、创建窗体界面2、添加控件事件3、添加代码 二、通过windowsAPI移动窗体1、 构建窗体和添加事件2、代码展示 引言 在C#Form窗体设计中，如果我们不需要使用默认边框设计自己个性化的窗体（FromBorderStyle=none时），这时候你会发现拖动窗体的功能就没有了，这里需要自己构建方法让用户可以拖动整个窗体，这里我们使用前辈的
阅读更多...
Qt-常用控件（3）-多元素控件、容器类控件和布局管理器

Qt-常用控件（3）-多元素控件、容器类控件和布局管理器

1. 多元素控件 Qt 中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView xxWidget 和 xxView 之间的区别，以 QTableWidget 和 QTableView 为例. QTableView 是基于 MVC 设计的控件.QTableView 自身不持有数据,使用 QTab
阅读更多...
龙芯+FreeRTOS+LVGL实战笔记（新）——05部署主按钮

龙芯+FreeRTOS+LVGL实战笔记（新）——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇，主要的区别在于实时操作系统的不同，章节的安排和任务的推进保持一致，并对源码做了改进和优化，各位可以先到本人主页下去浏览另一专栏的博客列表（目前已撰写36篇，图1所示），再决定是否订阅。此外，也可以前往本人在B站的视频合集（图2所示）观看所有演示视频，合集首个视频链接为： 借助RT-Thread和LVGL
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2