目录

LVGL图片按钮

LVGL选项卡部件

LVGL平铺视图部件

LVGL窗口部件

LVGL消息框部件

LVGL微调器

LVGL表格部件

---

LVGL图片按钮

图片按钮部件类似于按钮部件，不同的是，用户可以在其中设置图片。

图片按钮部件组成部分：

        主体（LV_PART_MAIN）

创建图片按钮部件：

lv_obj_t *imgbtn = lv_imgbtn_create(parent);

设置图片源、按钮大小：

lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_mid, src_right);    /* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64 * 3, 64);                                             /* 设置图片按钮大小 */

设置按钮状态：

lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);    /* 设置按下状态 */

扩展知识点：如何显示带有透明度通道的图片？

1、准备一张带有透明度通道的图片。

2、官方图片转换工具中，色彩格式选择：CF_TRUE_COLOR_ALPHA

3、声明图片并调用即可。

LV_IMG_DECLARE(img_cool);

static void event_cb(lv_event_t *e)
{
    lv_obj_set_style_img_recolor(imgbtn, lv_color_hex(0x007ffe), LV_STATE_DEFAULT);
    lv_obj_set_style_img_recolor_opa(imgbtn, 150, LV_STATE_DEFAULT);
}

lv_obj_t *imgbtn = lv_imgbtn_create(parent);
lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASEED, NULL, &img_cool, NULL);    /* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64, 64);                                                /* 设置图片按钮大小 */
lv_obj_add_event_cb(imgbtn, event_cb, LV_EVENT_PRESSED, NULL);

LVGL选项卡部件

选项卡部件可以实现多页面切换，用户可以在不同的页面上添加内容。

选项卡部件组成部分：

        主体（lv_obj）

        按钮（lv_btnmatrix）

 创建选项卡部件：

lv_obj_t *tabview = lv_tabview_create(parent, LV_DIR_..., tab_size);

添加选项卡：

lv_obj_t *tab1 = lv_tabview_add_table(tabview, "Tab 1");
lv_obj_t *tab2 = lv_tabview_add_table(tabview, "Tab 2");

设置当前选中的选项卡：

lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);    /* 索引从0开始 */

获取按钮部分：

lv_obj_t *btn = lv_tabview_get_tab_btns(tabview);    /* 获取按钮部分 */

/* 未选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(0xb7472a), LV_PART_ITEMS | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS | LV_STATE_DEFAULT);
lv_obj_set_style_text_color(btn, lv_color_hex(0xf33f3), LV_PART_ITEMS | LV_STATE_DEFAULT);

/* 选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(Oxelele1), LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_text_color(btn, lv_color_hex(Oxb7472a), LV_PART_ITEMS | LV_STATE_CHECKED);
lv_obj_set_style_border_width(btn, O, LV_PART_ITEMS | LV_STATE_CHECKED);

获取主体部分：

lv_obj_t *obj = lv_tabview_get_content(tabview);    /* 获取主体部分 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff), LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(obj, 255, LV_STATE_DEFAULT);

LVGL平铺视图部件

平铺视图部件可以实现不同方向的页面切换，用户可以页面中添加内容。

平铺视图部件组成部分：

        主体（LV_PART_MAIN）

        滚动条（LV_PART_SCROLLBAR）

 创建平铺视图部件：

lv_obj_t *tileview = lv_tileview_create(parent);

添加页面：

lv_obj_t *tile1 = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_RIGHT);
lv_obj_t *tile2 = lv_tileview_add_tile(tileview, 1, 0, LV_DIR_LEFT);

设置当前显示页面：

lv_obj_update_layout(tileview);                    /* 更新参数 */
lv_obj_set_tile(tileview, tile2, LV_ANIM_OFF);     /* 根据页面对象设置 */
lv_obj_set_tile_id(tileview, 1, 0, LV_ANIM_OFF);   /* 根据页面行列设置 */

移除滚动条：

lv_obj_remove_style(tileview, NULL, LV_PART_SCROLLBAR);    /* 移除滚动条 */

LVGL窗口部件

窗口部件可以作为一个容器，展现不同功能的页面。

窗口部件组成部分：

        头部（Header）

        主体（Content）

创建窗口部件：

lv_obj_t *win = lv_win_create(parent, header_height);

添加标题、按钮：

lv_obj_t *title = lv_win_add_title(win, "Setting");
lv_obj_t *btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 20);

添加主体内容：

lv_obj_t *content = lv_win_get_content(win);    /* 获取主体 */
lv_obj_t *label = lv_label_create(content);     /* 添加内容 */

设置边框大小和圆角：

lv_obj_set_style_border_width(win, 1, LV_STATE_DEFAULT);
lv_obj_set_style_radius(win, 10, LV_STATE_DEFAULT);

隐藏窗口：

lv_obj_add_flag(win, LV_OBJ_FLAG_HIDDEN);

LVGL消息框部件

消息框部件可以实现弹窗提示，常用于消息通知、确定操作等。

消息框部件组成部分：

        主体（obj）

        标题（title）

        关闭按钮（close_btn）

        内容（content）

        按钮矩阵（btnmatrix）

创建消息框部件：

static const char *btns[] = {"Continue", "Close", ""};

/* Notice-标题，Do you want to continue?-主体文本，btns-按钮矩阵，true -关闭按钮 */
lv_obj_t *msgbox = lv_msgbox_create(lv_scr_act(), "Notice", "Do you want to continue?", btns, true);

关闭消息框：

lv_msgbox_close(msgbox);

获取按钮索引、文本：

lv_obj_t *target = lv_event_get_current_target(e);    /* 获取当前触发源 */
lv_msgbox_get_active_btn(target);                     /* 获取按钮索引 */
lv_msgbox_get_active_btn_text(target);                /* 获取按钮文本 */

清除消息框隐藏属性，出现弹窗提示：

lv_obj_clear_flag(msgbox, LV_OBJ_FLAG_HIDDEN);

LVGL微调器

微调器部件本质上就是一个数字文本，常用于精确调节某个参数的值。

微调器部件组成部分：

        主体（LV_PART_MAIN）

        光标（LV_PART_CURSOR）

创建微调器部件：

lv_obj_t *spinbox = lv_spinbox_create(parent);

数值递增、递减：

lv_spinbox_increment(spinbox);    /* 递增 */
lv_spinbox_decrement(spinbox);    /* 递减 */

设置步进值、范围值：

lv_spinbox_set_step(spinbox, 200);             /* 设置步进值，默认为1 */
lv_spinbox_set_range(spinbox, -1000, 1000);    /* 设置范围值，默认±99999 */

设置当前值：

lv_spinbox_set_value(spinbox, 400);

设置数字格式、光标位置：

lv_spinbox_set_digit_format(spinbox, 4, 2);    /* 设置数字位数、小数点位置 */
lv_spinbox_set_pos(spinbox, 3);                /* 设置光标位置 */

获取当前值：

lv_spinbox_get_value(spinbox);    /* 返回值为整数，而非小数 */

LVGL表格部件

表格部件由一个个单元格组成，它的单元格中只能存放文本形式的内容。

表格部件组成部分：

        主体（LV_PART_MAIN）

        单元格（LV_PART_ITEMS）

创建表格部件：

lv_obj_t *table = lv_table_create(parent);

设置行数、列数：

lv_table_set_row_cnt(table, 2);            /* 设置行数 */
lv_table_set_col_cnt(table, 2);            /* 设置列数 */
lv_table_set_col_width(table, 1, 200);     /* 设置列的宽度 */

设置单元格的内容：

lv_table_set_cell_value(table, 0, 0, "123");
lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100);    /* 格式化输入，类似printf */