lvgl-04 按键按下效果样式实现

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);  //使能变暗 
}

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 btn_filter_demo(void)
{
    /*Initialize the style*/
    style_init();

    /*Create a button and use the new styles*/
    lv_obj_t * btn = 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(btn);
    lv_obj_set_pos(btn, 100, 100);
    lv_obj_set_size(btn, 60, 40);
    lv_obj_add_style(btn, &style_btn, 0);
    lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);

    /*Add a label to the button*/
    lv_obj_t * label = lv_label_create(btn);
    lv_label_set_text(label, "b1");
    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, 60, 100);
    lv_obj_set_size(btn2, 60, 40);
    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, "b2");
    lv_obj_center(label);
}
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
LVGL(Light and Versatile Graphics Library)中,可以通过自定义实体按键实现特定的交互功能。下面是一些基本的步骤来创建自定义实体按键: 1. 创建一个按钮对象:使用 `lv_obj_create()` 函数创建一个按钮对象,例如 `lv_obj_t *btn = lv_obj_create(lv_scr_act());`。 2. 设置按钮的位置和大小:使用 `lv_obj_set_pos()` 和 `lv_obj_set_size()` 函数设置按钮的位置和大小,例如 `lv_obj_set_pos(btn, x, y);` 和 `lv_obj_set_size(btn, width, height);`。 3. 添加样式:使用 `lv_btn_set_style()` 函数为按钮添加样式,例如 `lv_btn_set_style(btn, LV_BTN_STYLE_REL, &lv_style_btn_rel);`。可以根据需要选择不同的样式,如按下状态、释放状态等。 4. 添加按键事件回调函数:使用 `lv_obj_set_event_cb()` 函数为按钮添加按键事件回调函数,例如 `lv_obj_set_event_cb(btn, btn_event_cb);`。在回调函数中可以定义按键事件的逻辑。 5. 编写按键事件回调函数:编写按键事件回调函数 `btn_event_cb`,该函数会在按钮被按下或释放时被调用。在回调函数中可以处理按钮的逻辑,例如改变按钮的状态、执行特定的操作等。 下面是一个简单的示例代码,展示了如何创建一个自定义实体按键: ```c #include "lvgl/lvgl.h" static void btn_event_cb(lv_obj_t *btn, lv_event_t event) { if(event == LV_EVENT_CLICKED) { // 按钮被点击时执行的操作 } } void create_custom_button(void) { lv_obj_t *btn = lv_obj_create(lv_scr_act()); lv_obj_set_pos(btn, 100, 100); lv_obj_set_size(btn, 100, 50); lv_btn_set_style(btn, LV_BTN_STYLE_REL, &lv_style_btn_rel); lv_obj_set_event_cb(btn, btn_event_cb); } ``` 以上代码创建了一个位于 (100, 100) 坐标处,大小为 100x50 的按钮,并为按钮添加了点击事件的回调函数 `btn_event_cb`。你可以根据自己的需求修改和扩展该代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值