1. 介绍

  和 lv_label标签控件一样重要,除了能显示文本外,它的主要用途是和用户进行交互,lv_btn 按钮其实就是一个 lv_cont容器的复杂变体,另外加上可选的子对象,最常用的子对象就是 lv_label 标签,在 littleVGL 中,lv_btn 按钮具有 5 种状态,如下所示:
LV_BTN_STATE_REL: 按钮的正常释放状态
LV_BTN_STATE_PR: 按钮的正常按下状态
LV_BTN_STATE_TGL_REL: 按钮的切换(Toggle)释放状态
LV_BTN_STATE_TGL_PR : 按钮的切换(Toggle)按下状态
LV_BTN_STATE_INA: 按钮的禁用无效状态

对于非切换按钮,当对其进行一次点击操作时(也就是先按下再松手的操作),它的状态转换如下所示：
LV_BTN_STATE_REL -> LV_BTN_STATE_PR -> LV_BTN_STATE_REL

对于切换按钮,当对其进行一次点击操作时(也就是先按下再松手的操作),它的状态转换根据其起始状态不同有 2 种情况,如下所示:
起始状态为正常态(也就是 LV_BTN_STATE_REL 释放子状态):
LV_BTN_STATE_REL -> LV_BTN_STATE_PR ->LV_BTN_STATE_TGL_REL
起始状态为切换态(也就是 LV_BTN_STATE_TGL_REL 释放子状态):
LV_BTN_STATE_TGL_REL -> LV_BTN_STATE_TGL_PR -> LV_BTN_STATE_REL

既然按钮有5种不同的状态,那么相应的,它也有5 种与之对应的样式,如下所示:
LV_BTN_STYLE_REL: 正常态下释放时的样式,默认值为 lv_style_btn_rel
LV_BTN_STYLE_PR: 正常态下按下时的样式,默认值为 lv_style_btn_pr
LV_BTN_STYLE_TGL_REL: 切换态下释放时的样式,默认值为lv_style_btn_tgl_rel
LV_BTN_STYLE_TGL_PR: 切换态下按下时的样式,默认值为lv_style_btn_tgl_pr
LV_BTN_STYLE_INA: 禁用无效时的样式,默认值为 lv_style_btn_ina

  你可以通过 lv_btn_set_style(btn, LV_BTN_STYLE_…, &style)接口来修改某种状态下的样式,而不再采用其默认样式值了,之前我们已经学过了 lv_cont 容器,因为 lv_btn 就是 lv_cont 的复杂变体,所以 lv_btn 同样也具有容器的 Layout 布局和 Fit 自适应特性。

2. lv_btn 的 API 接口

2.1 主要数据类型

2.1.1 按钮状态数据类型

enum {
LV_BTN_STATE_REL, //按钮的正常释放状态
LV_BTN_STATE_PR,//按钮的正常按下状态
LV_BTN_STATE_TGL_REL,//按钮的切换(Toggle)释放状态
LV_BTN_STATE_TGL_PR,//按钮的切换(Toggle)按下状态
LV_BTN_STATE_INA,//禁用无效状态
_LV_BTN_STATE_NUM,//无意义
};
typedef uint8_t lv_btn_state_t;

2.1.2 按钮样式数据类型

enum {
LV_BTN_STYLE_REL,//正常态下释放时的样式,默认值为 lv_style_btn_rel
LV_BTN_STYLE_PR,//正常态下按下时的样式,默认值为 lv_style_btn_pr
LV_BTN_STYLE_TGL_REL,//切换态下释放时的样式,默认值为 lv_style_btn_tgl_rel
LV_BTN_STYLE_TGL_PR,//切换态下按下时的样式,默认值为 lv_style_btn_tgl_pr
LV_BTN_STYLE_INA,//禁用无效时的样式,默认值为 lv_style_btn_ina
};
typedef uint8_t lv_btn_style_t;

2.2 API 接口

2.2.1 创建按钮

lv_obj_t * lv_btn_create(lv_obj_t * par, const lv_obj_t * copy);

参数:
par: 指向父对象
copy: 此参数可选,表示创建新对象时,把 copy 对象上的属性值复制过来
返回值:
返回新创建出来的按钮对象,如果为 NULL 的话,说明堆空间不足了

2.2.2 设置为 Toggle 切换按钮

void lv_btn_set_toggle(lv_obj_t * btn, bool tgl);

参数:
btn: 按钮对象
tgl: 是否设置为 toggle 切换按钮

2.2.3 手动设置按钮的状态

void lv_btn_set_state(lv_obj_t * btn, lv_btn_state_t state);

参数:
btn: 按钮对象
state: 按钮的状态

2.2.4 设置按钮的布局和自适应方式

static inline void lv_btn_set_layout(lv_obj_t * btn, lv_layout_t layout);

参数:
btn: 按钮对象
layout: 布局方式

  说的再本质一点,lv_btn 其实就是 lv_cont 容器,无非就是多增加了点击效果,所以 lv_cont容器拥有的特性,lv_btn 按钮是全部都拥有的。与此类似的 API接口还有下面几个跟自适应特性相关的接口:

void lv_btn_set_fit4(lv_obj_t * btn, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom);
void lv_btn_set_fit2(lv_obj_t * btn, lv_fit_t hor, lv_fit_t ver);
void lv_btn_set_fit(lv_obj_t * btn, lv_fit_t fit);

  对于这 4 个 API 接口的用法是跟 lv_cont 容器中的用法是一模一样的。

2.2.5 设置按钮的波纹点击效果

void lv_btn_set_ink_in_time(lv_obj_t * btn, uint16_t time);
void lv_btn_set_ink_wait_time(lv_obj_t * btn, uint16_t time);
void lv_btn_set_ink_out_time(lv_obj_t * btn, uint16_t time);

参数:
btn: 按钮对象
time: 时长,单位为 ms

  所谓的波纹点击效果就是当点击按钮时,会从按钮的点击处开始出现一个小圆圈,然后慢慢扩大至按钮的整个背景,就跟往静止的水面上扔一个小石头后,泛起的波纹效果一样,在littleVGL 中,我们可以把这个波纹点击效果分解成 3 个时长,如下所示:
1)波纹效果的入场动画时长
此动画时长由 lv_btn_set_ink_in_time 接口来设置
2)波纹效果的维持等待时长
此动画时长由 lv_btn_set_ink_wait_time 接口来设置
3)波纹效果的出场动画时长
此动画时长由 lv_btn_set_ink_out_time 接口来设置,注意出场动画是一种淡出动画。

  如果想要实现这种波纹点击效果,那么至少得调用 lv_btn_set_ink_in_time 接口来设置入场动画的时长,至于lv_btn_set_ink_wait_time 和 lv_btn_set_ink_out_time 接口可调可不调,下
面举个简单的例子:

lv_obj_t* btn = lv_btn_create(lv_scr_act(),NULL);//创建按钮
lv_obj_set_pos(btn,50,50);//设置坐标
lv_btn_set_ink_in_time(btn,2000);//设置入场动画的时长
lv_btn_set_ink_wait_time(btn,3000);//设置维持等待的时长
lv_btn_set_ink_out_time(btn,1000);//设置出场动画的时长

  当点击按钮时,先是做入场动画,耗时2000毫秒,接着进入3000毫秒的维持等待,最后再做出场动画,耗时 1000 毫秒,下面只给出入场动画过程中的 3 张效果图：


注:想要实现按钮的波纹点击效果,必须得先把 lv_conf.h 文件中的 LV_BTN_INK_EFFECT 宏给置 1,否则是看不到效果的。

2.2.6 设置按钮的样式

void lv_btn_set_style(lv_obj_t * btn, lv_btn_style_t type, const lv_style_t * style);

参数:
btn: 按钮对象
type: 设置哪一种状态下的样式,可选值有 5 个,分别为:
LV_BTN_STYLE_REL //默认值为 lv_style_btn_rel
LV_BTN_STYLE_PR //默认值为 lv_style_btn_pr
LV_BTN_STYLE_TGL_REL //默认值为 lv_style_btn_tgl_rel
LV_BTN_STYLE_TGL_PR //默认值为 lv_style_btn_tgl_pr
LV_BTN_STYLE_INA //默认值为 lv_style_btn_ina
style: 样式

  还有一些简单的 get 类型 API 接口,我这里就不一一列举了,请自行查阅 lv_btn.h 头文件。