代码收藏家技术教程 2023-03-07

lvgl-按钮学习篇（三）

lvgl-按钮学习篇(三)

学习材料/工具

QT Creator 5.12.3

lvgl 源代码

lvgl 官方按钮例程

极客笔记

学习内容

零件和样式

用法

可检查

布局和适配

事件

按钮

范例

简单的按钮

按钮样式

简介

按钮(lv_btn) 是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，还可以启用它以单击时自动进入检查状态。

零件和样式

按钮仅具有一种主要样式，称为LV_BTN_PART_MAIN，并且可以使用以下组中的所有属性：

背景(background)

边界(border)

边框(outline)

阴影(shadow)

数值(value)

模式(pattern)

过渡(transitions)

启动布局或合适时，它还将使用padding属性。

用法

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

LV_BTN_STATE_RELEASED 松开

LV_BTN_STATE_PRESSEDN 被点击

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_…)可以手动更改按钮状态。

如果需要状态的更精确描述(例如，重点突出)，则可以使用常规lv_obj_get_state(btn)。

可检查

可以使用lv_btn_set_checkable(btn,true)将按钮配置为切换按钮。在这种情况下，单击时，按钮将自动进入LV_STATE_CHECKED状态，或再次单击时返回到LV_STATE_CHECKED状态。

布局和适配

与容器类似，按钮也具有布局和适合属性

lv_btn_set_layout(btn,LV_LAYOUT_…)设置布局。默认值为LV_LAYOUT_CENTER。因此，如果添加标签，则标签将自动与中间对齐，并且无法通过lv_obj_set_ops()移动。您可以使用lv_btn_set_layout(btn, LV_LAYOUT_OFF)禁用布局。

lv_btn_set_fit/fit2/fit4(btn, LV_FIT_…)允许根据子代，父代和合适类型自动设置按钮的宽度和高度。

事件

除了通用事件外，按钮还发送以下特殊事件：

LV_EVENT_VALUE_CHANGED-切换按钮时发送

了解有关事件的更多信息。

按键

以下按键由按钮处理：

LV_KEY_RIGHT/UP：如果启用了切换，则进入切换状态。

LV_KEY_LEFT/DOWN：如果启用了切换，则进入非切换状态。

请注意，LV_KEY_ENTER的状态已转换为LV_EVENT_PRESSED/PRESSING/RELEASED等。

进一步了解按键。

范例

创建两个简单的按钮

示例代码1


/**
 * @brief event_handler
 * @param e:事件码
 */
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("Clicded");
    }
    else if (code == LV_EVENT_VALUE_CHANGED) {

        LV_LOG_USER("Toggle");
    }

}

/**
 * @brief vSimple_Btn：简单的按钮
 */
void vSimple_Btn(void)
{
//    创建按钮容器
    lv_obj_t *pSleBtn = lv_btn_create(lv_scr_act());

//    添加按钮事件回调函数
    lv_obj_add_event_cb(pSleBtn,event_handler,LV_EVENT_ALL,NULL);

//    按钮屏幕居中对齐
    lv_obj_align(pSleBtn,LV_ALIGN_CENTER,0,-40);

//    设置按钮大小
    lv_obj_set_size(pSleBtn,100,35);

//    创建标签，其父对象是按钮
    lv_obj_t *pSleLbl = lv_label_create(pSleBtn);

//    设置标签文本值
    lv_label_set_text(pSleLbl,"Button");

    lv_obj_t *pSleBtnNoSystemStyle = lv_btn_create(lv_scr_act());

    lv_obj_add_event_cb(pSleBtnNoSystemStyle,event_handler,LV_EVENT_PRESSED,NULL);

    lv_obj_align(pSleBtnNoSystemStyle,LV_ALIGN_CENTER,0,40);

//    按钮添加点击的行为
    lv_obj_add_flag(pSleBtnNoSystemStyle,LV_OBJ_FLAG_CHECKABLE);

    lv_obj_t *pSleLblNoSystemStyle = lv_label_create(pSleBtnNoSystemStyle);

    lv_label_set_text(pSleLblNoSystemStyle,"Toggle");

}

创建添加样式按钮

示例代码2

/**
 * @brief darken：初始化颜色过滤器，并添加回调函数
 * @param dsc
 * @param color
 * @param opa
 * @return
 */
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);
}

/**
 * @brief prvstyle_init
 */
static void prvstyle_init(void)
{
//    初始化样式
    lv_style_init(&puxStyleBtn);

//    设置样式的圆角半径
    lv_style_set_radius(&puxStyleBtn,10);

//    设置样式背景的透明度
    lv_style_set_bg_opa(&puxStyleBtn,LV_OPA_COVER);

//    设置样式背景色为淡灰色
    lv_style_set_bg_color(&puxStyleBtn,lv_palette_lighten(LV_PALETTE_GREY,3));

//    设置样式渐变色为深灰色
    lv_style_set_bg_grad_color(&puxStyleBtn,lv_palette_main(LV_PALETTE_GREY));

//    设置样式渐变的方向
    lv_style_set_bg_grad_dir(&puxStyleBtn,LV_GRAD_DIR_VER);

//    设置样式边框颜色
    lv_style_set_border_color(&puxStyleBtn,lv_color_black());

//    设置样式边框透明度为20%
    lv_style_set_border_opa(&puxStyleBtn,LV_OPA_20);

//    设置样式边框宽度
    lv_style_set_border_width(&puxStyleBtn,2);

//    设置样式字体文本颜色
    lv_style_set_text_color(&puxStyleBtn,lv_color_black());

//    创建一个颜色过滤器，用于修改button对象按下时的颜色样式
    static lv_color_filter_dsc_t puxcolor_filter;

//    初始化颜色过滤器，并添加回调函数
    lv_color_filter_dsc_init(&puxcolor_filter,darken);

//    初始化按钮按下的样式
    lv_style_init(&puxStyleBtn_Pressed);

//    给当前样式设置颜色过滤器
    lv_style_set_color_filter_dsc(&puxStyleBtn_Pressed,&puxcolor_filter);

//    过滤颜色透明度为20%
    lv_style_set_color_filter_opa(&puxStyleBtn_Pressed,LV_OPA_20);

//    创建一个样式
    lv_style_init(&puxStyleBtn_Red);

//    样式背景色为红色
    lv_style_set_bg_color(&puxStyleBtn_Red,lv_palette_main(LV_PALETTE_RED));

//    样式背景渐变色为红色
    lv_style_set_bg_grad_color(&puxStyleBtn_Red,lv_palette_lighten(LV_PALETTE_RED,3));


}

/**
 * @brief vButton_Start：初始化按钮
 */
void vCustomizeStyle_Btn(void)
{

//    按钮样式初始化
    prvstyle_init();

    lv_obj_t *src = lv_scr_act();

//    创建button对象并使用新的样式
    lv_obj_t *btn = lv_btn_create(src);

//    移除容器对象系统样式
    lv_obj_remove_style_all(btn);

//    设置容器对象的位置
    lv_obj_set_pos(btn,10,10);

//    设置容器对象的大小
    lv_obj_set_size(btn,120,50);

//    添加容器对象的样式表
    lv_obj_add_style(btn,&puxStyleBtn,0);

//    添加容器对象按下时的样式表
    lv_obj_add_style(btn,&puxStyleBtn_Pressed,LV_STATE_PRESSED);

//    容器对象居中显示
    lv_obj_center(btn);

    lv_obj_t *lable = lv_label_create(btn);
    lv_label_set_text(lable,"button");
    lv_obj_center(lable);

    lv_obj_t *btn2 = lv_btn_create(src);
    lv_obj_remove_style_all(btn2);
    lv_obj_set_pos(btn2,10,80);
    lv_obj_set_size(btn2,120,50);
    lv_obj_add_style(btn2,&puxStyleBtn,0);
    lv_obj_add_style(btn2,&puxStyleBtn_Red,0);
    lv_obj_add_style(btn2,&puxStyleBtn_Pressed,LV_STATE_PRESSED);

//    设置容器对象的圆角半径
    lv_obj_set_style_radius(btn2,LV_RADIUS_CIRCLE,0);

    lv_obj_t *label1 = lv_label_create(btn2);
    lv_label_set_text(label1,"button2");
    lv_obj_center(label1);

}

创建过渡性样式按钮

示例代码3

/**
 * @brief vGummy_Btn
 */
void vGummy_Btn(void)
{
//    Properties to transition 过渡属性
    static lv_style_prop_t prvProps[] = {

        LV_STYLE_TRANSFORM_WIDTH,LV_STYLE_TRANSFORM_HEIGHT,LV_STYLE_TEXT_LETTER_SPACE,0
    };

    /*Transition descriptor when going back to the default state.
        *Add some delay to be sure the press transition is visible even if the press was very short*/
    static lv_style_transition_dsc_t prvTransiton_dsc_def;
    lv_style_transition_dsc_init(&prvTransiton_dsc_def,prvProps,lv_anim_path_overshoot,250,100,NULL);

    /*Transition descriptor when going to pressed state.
        *No delay, go to presses state immediately*/
    static lv_style_transition_dsc_t prvTransition_dsc_pr;
    lv_style_transition_dsc_init(&prvTransition_dsc_pr,prvProps,lv_anim_path_ease_in_out,250,0,NULL);

    /*Add only the new transition to he default state*/
    static lv_style_t prvStyle_def;
    lv_style_init(&prvStyle_def);
    lv_style_set_transition(&prvStyle_def,&prvTransiton_dsc_def);

    static lv_style_t prvStyle_pr;
    lv_style_init(&prvStyle_pr);
    lv_style_set_transform_width(&prvStyle_pr,10);
    lv_style_set_transform_height(&prvStyle_pr,-10);
    lv_style_set_text_letter_space(&prvStyle_pr,10);
    lv_style_set_transition(&prvStyle_pr,&prvTransition_dsc_pr);

    lv_obj_t *pGummyBtn = lv_btn_create(lv_scr_act());
    lv_obj_align(pGummyBtn,LV_ALIGN_CENTER,0,-80);
    lv_obj_add_style(pGummyBtn,&prvStyle_pr,LV_STATE_PRESSED);
    lv_obj_add_style(pGummyBtn,&prvStyle_def,0);

    lv_obj_t *pGummyLbl = lv_label_create(pGummyBtn);
    lv_label_set_text(pGummyLbl,"Gum");
}