LVGL8学习之Button Styles

上一篇学习了Button，这一篇学习为按钮添加样式，样式存储在lv_style_t变量中。样式变量应该是静态的、全局的或动态分配的。换句话说，它们不能成为函数中当函数存在时被破坏的局部变量。在使用样式之前，应该使用lv_style_init(&my_style)初始化该样式。初始化样式后，可以设置或添加到样式属性。还是通过codeblock来模拟代码的运行，下面是代码

// 定义三个style变量
static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;

static void button_style_init()
{
    lv_style_reset(&style_btn); // 重置按钮样式
    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); // 设置边框透明度为20%
    lv_style_set_border_width(&style_btn, 2); // 设置边框宽度为2
    lv_style_set_text_color(&style_btn, lv_color_black()); //设置字体颜色为黑色

    /*
     创建一个颜色过滤器，用于修改button对象按下时的颜色样式
    */
    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, color_darken); // 初始化颜色过滤器，并添加回调函数
    lv_style_reset(&style_btn_pressed);
    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); // 过滤颜色透明度为20%

    // 创建一个样式
    lv_style_reset(&style_btn_red);
    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)); // 样式背景渐变色为淡红色
}


/**
创建button对象，并添加样式
 */
void lv_button_with_style_test()
{
    lv_obj_t* label = NULL;

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

    /*创建button对象并使用新的样式*/
    lv_obj_t* btn = lv_btn_create(lv_scr_act());
    if (btn != NULL)
    {
        /*
         从当前主题移除所有样式
         注意：大小和位置也是样式属性，lv_obj_remove_style_all也会移除对象的大小和位置
        */
        lv_obj_remove_style_all(btn);
        lv_obj_set_pos(btn, 400, 200); // 设置按钮对象的位置X和Y
        lv_obj_set_size(btn, 120, 50); // 设置按钮对象的宽度和高度

        lv_obj_add_style(btn, &style_btn, LV_STATE_DEFAULT); // 给按钮对象添加默认样式
        lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED); // 给按钮对象添加按下状态的样式

        label = lv_label_create(btn); // 给按钮添加标签
        if (label != NULL)
        {
            lv_label_set_text(label, "Button1"); // 设置标签文本
            lv_obj_center(label); // 标签居中显示
        }
    }

    // 创建一个按钮对象并添加红色样式
    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());
    if (btn2 != NULL)
    {
        lv_obj_remove_style_all(btn2); // 从当前主题移除所有样式
        lv_obj_set_pos(btn2, 400, 280); // 设置按钮对象的位置X和Y
        lv_obj_set_size(btn2, 120, 50); // 设置按钮对象的宽度和高度

        lv_obj_add_style(btn2, &style_btn, LV_STATE_DEFAULT); // 添加对象的默认样式
        lv_obj_add_style(btn2, &style_btn_red, LV_STATE_DEFAULT); // 添加对象的默认红色样式
        lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED); // 添加对象的按下状态样式
        lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0);  // 添加按钮对象的圆角弧度样式

        label = lv_label_create(btn2); // 给btn2对象创建标签
        if (label != NULL)
        {
            lv_label_set_text(label, "Button 2"); // 设置标签文本
            lv_obj_center(label); // 标签对象居中显示
        }
    }
}

运行效果：