修改lvgl tabview部件顶部框(选项卡)的默认样式

Posted 2022-01-27 挨踢民工biubiu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了修改lvgl tabview部件顶部框(选项卡)的默认样式相关的知识，希望对你有一定的参考价值。

文章目录

修改效果
前言
修改样式
代码总结
- 注意
- - 获取LVGL内置调色板的颜色：
  - 使用自定义颜色
lvgl视频教程
- 视频教程配套资料
- 相关学习资源

修改效果

前言

lvgl提供了非常多的部件(30多个)给用户使用，这些部件的所有样式都是可以修改的。它们都有默认的样式，但是当我们觉得默认的样式不合适自己项目的时候可以就需要进行修改了，本文来教大家怎么修改 tabview部件顶部框(选项卡)的默认样式。

配置：

codeblocks 20.03
lvgl v 8.1

修改样式

默认的样式

正常我们这样就可以创建出一个 tabview部件：

    static lv_obj_t* tv;
    static lv_obj_t* t1;
    static lv_obj_t* t2;

    tv = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, LV_DPI_DEF / 3);

    t1 = lv_tabview_add_tab(tv, "Selectors");
    t2 = lv_tabview_add_tab(tv, "Text input");

    lv_obj_t* tab_btns = lv_tabview_get_tab_btns(tv);

它的选项卡的默认样式是这样的：

背景色

修改背景色

我们一下它的被选中时的背景色，我们只需要后面添加修改样式的代码即可，这里我使用本地样式修改，你也可以使用共享样式：

lv_obj_set_style_bg_color(tab_btns, lv_palette_main(LV_PALETTE_RED), LV_PART_ITEMS | LV_STATE_CHECKED);

然后我们就能看到选中时的背景颜色被修改了：

去除背景色

如果我不想要背景色呢？那我们让背景色为透明即可：

lv_obj_set_style_bg_opa(tab_btns, LV_OPA_0, LV_PART_ITEMS | LV_STATE_CHECKED);

这样我们就能看到选中时没有高亮的背景色了：

边框颜色

修改边框颜色

我们也可以修改选中时的边框颜色，我们只需要后面添加修改样式的代码即可，这里我是用本地样式修改，你也可以使用共享样式：

lv_obj_set_style_border_color(tab_btns, lv_palette_main(LV_PALETTE_GREEN), LV_PART_ITEMS | LV_STATE_CHECKED);

然后我们就能看到选中时的边框颜色被修改了：

去除边框

如果我不想要边框呢？那我们让边框为透明即可：

lv_obj_set_style_border_opa(tab_btns, LV_OPA_0, LV_PART_ITEMS | LV_STATE_CHECKED);

这样我们就能看到选中时没有边框了：

代码总结

以上的代码贴在下面了，大家可以参考自己实验看看：

    static lv_obj_t* tv;
    static lv_obj_t* t1;
    static lv_obj_t* t2;

    tv = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, LV_DPI_DEF / 3);

    t1 = lv_tabview_add_tab(tv, "Selectors");
    t2 = lv_tabview_add_tab(tv, "Text input");

    lv_obj_t* tab_btns = lv_tabview_get_tab_btns(tv);

    //本地样式修改背景色
    //lv_obj_set_style_bg_color(tab_btns, lv_palette_main(LV_PALETTE_RED), LV_PART_ITEMS | LV_STATE_CHECKED);

    //本地样式修改透明度
    //lv_obj_set_style_bg_opa(tab_btns, LV_OPA_0, LV_PART_ITEMS | LV_STATE_CHECKED);

    //修改选中时边框的颜色
    //lv_obj_set_style_border_color(tab_btns, lv_palette_main(LV_PALETTE_GREEN), LV_PART_ITEMS | LV_STATE_CHECKED);

    //修改选中时边框的颜色透明度
    //lv_obj_set_style_border_opa(tab_btns, LV_OPA_0, LV_PART_ITEMS | LV_STATE_CHECKED);

注意

获取LVGL内置调色板的颜色：

lv_palette_main(LV_PALETTE_...)
其中 LV_PALETTE_... 有这些可选：

typedef enum 
    LV_PALETTE_RED,
    LV_PALETTE_PINK,
    LV_PALETTE_PURPLE,
    LV_PALETTE_DEEP_PURPLE,
    LV_PALETTE_INDIGO,
    LV_PALETTE_BLUE,
    LV_PALETTE_LIGHT_BLUE,
    LV_PALETTE_CYAN,
    LV_PALETTE_TEAL,
    LV_PALETTE_GREEN,
    LV_PALETTE_LIGHT_GREEN,
    LV_PALETTE_LIME,
    LV_PALETTE_YELLOW,
    LV_PALETTE_AMBER,
    LV_PALETTE_ORANGE,
    LV_PALETTE_DEEP_ORANGE,
    LV_PALETTE_BROWN,
    LV_PALETTE_BLUE_GREY,
    LV_PALETTE_GREY,
    _LV_PALETTE_LAST,
    LV_PALETTE_NONE = 0xff,
 lv_palette_t;

使用自定义颜色

除了使用 lv_palette_main(LV_PALETTE_...) 我们可以使用自定义的颜色值：

十六进制颜色码： lv_color_hex(0x000000)
RGB值：LV_COLOR_MAKE(0x00, 0x00, 0x00)

使用示例：

lv_obj_set_style_bg_color(tab_btns, lv_color_hex(0x000000), LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_bg_color(tab_btns,  LV_COLOR_MAKE(0x00, 0x00, 0x00), LV_PART_ITEMS | LV_STATE_CHECKED);

lvgl视频教程

百问网LVGL(v8)系列课程(韦东山·监制) 教程基于lvgl v8.1版本，课程适配多个平台、多款板子

百问网LVGL(v8)视频课程(韦东山·监制) 教程基于lvgl v8.1版本，课程适配多个平台、多款板子！视频学习地址：https://www.bilibili.com/video/BV1Ya411r7K2

视频教程配套资料

https://gitee.com/weidongshan/lvgl_100ask_course_materials