使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第二十二讲)
LVGL (Light and Versatile Graphics Library) 提供了一个名为 lv_menu 的组件，用于实现嵌套的菜单系统，它可以轻松地创建多级结构、列表和导航，且具有灵活的样式和布局设置。在嵌入式设备上非常适合用来创建用户界面菜单，如设置页、多级目录导航等应用。
菜单特点包括以下：
• 支持嵌套结构：菜单可以由多个页面组成，具有父页面和子页面的关系。
• 快速导航：支持快速切换菜单页面（子菜单）。
• 丰富的样式选项：支持自定义样式，适配不同界面需求。
• 响应用户交互：可以通过事件处理回调实现菜单项的功能。
（1） 菜单对象：通过 lv_menu_create 来创建菜单对象并添加到屏幕中。它是菜单的根对象，包含多个页面。
（2） 页面：菜单由多个页面组成，每个页面可以包含若干项。页面呈现为一组内容，在需要时可以通过 API 切换显示不同页面。
（3） 菜单项：每个页面包含若干菜单项，菜单项可以是按钮、文本或其他组件，并且可以设置功能与操作。
其中GUI_Guider菜单控件的初始设置以及样式如下图所示：
标头为menu（菜单），下面为菜单选项与选项卡类似，当点击不同的菜单项会切换到不同的子界面。
以下是创建菜单以及样式设置的代码：
//Write codes screen_1_menu_1
//菜单主体创建
ui->screen_1_menu_1 = lv_menu_create(ui->screen_1);
//Create sidebar page for menu screen_1_menu_1
//创建带标题"菜单"的侧边栏页面
ui->screen_1_menu_1_sidebar_page = lv_menu_page_create(ui->screen_1_menu_1, “菜单”);
//设置为菜单的默认侧边栏
lv_menu_set_sidebar_page(ui->screen_1_menu_1, ui->screen_1_menu_1_sidebar_page);
//禁用滚动条显示
lv_obj_set_scrollbar_mode(ui->screen_1_menu_1_sidebar_page, LV_SCROLLBAR_MODE_OFF);
//Create subpage for screen_1_menu_1
//创建空白子页面1
ui->screen_1_menu_1_subpage_1 = lv_menu_page_create(ui->screen_1_menu_1, NULL);
//在侧面添加容器以及标签
ui->screen_1_menu_1_cont_1 = lv_menu_cont_create(ui->screen_1_menu_1_sidebar_page);
ui->screen_1_menu_1_label_1 = lv_label_create(ui->screen_1_menu_1_cont_1);
//设置标签文本为参数配置
lv_label_set_text(ui->screen_1_menu_1_label_1, “参数配置”);
//设置标签宽度为100%，高度自适应
lv_obj_set_size(ui->screen_1_menu_1_label_1, LV_PCT(100), LV_SIZE_CONTENT);
//禁用子页面滚动
lv_obj_set_scrollbar_mode(ui->screen_1_menu_1_subpage_1, LV_SCROLLBAR_MODE_OFF);
//绑定事件
lv_menu_set_load_page_event(ui->screen_1_menu_1, ui->screen_1_menu_1_cont_1, ui->screen_1_menu_1_subpage_1);
//Create subpage for screen_1_menu_1
//创建子页面，仅文本不同
ui->screen_1_menu_1_subpage_2 = lv_menu_page_create(ui->screen_1_menu_1, NULL);
ui->screen_1_menu_1_cont_2 = lv_menu_cont_create(ui->screen_1_menu_1_sidebar_page);
ui->screen_1_menu_1_label_2 = lv_label_create(ui->screen_1_menu_1_cont_2);
lv_label_set_text(ui->screen_1_menu_1_label_2, “显示配置”);
lv_obj_set_size(ui->screen_1_menu_1_label_2, LV_PCT(100), LV_SIZE_CONTENT);
lv_obj_set_scrollbar_mode(ui->screen_1_menu_1_subpage_2, LV_SCROLLBAR_MODE_OFF);
lv_menu_set_load_page_event(ui->screen_1_menu_1, ui->screen_1_menu_1_cont_2, ui->screen_1_menu_1_subpage_2);
//Create subpage for screen_1_menu_1
//创建子页面，仅文本不同
ui->screen_1_menu_1_subpage_3 = lv_menu_page_create(ui->screen_1_menu_1, NULL);
ui->screen_1_menu_1_cont_3 = lv_menu_cont_create(ui->screen_1_menu_1_sidebar_page);
ui->screen_1_menu_1_label_3 = lv_label_create(ui->screen_1_menu_1_cont_3);
lv_label_set_text(ui->screen_1_menu_1_label_3, “文件保存”);
lv_obj_set_size(ui->screen_1_menu_1_label_3, LV_PCT(100), LV_SIZE_CONTENT);
lv_obj_set_scrollbar_mode(ui->screen_1_menu_1_subpage_3, LV_SCROLLBAR_MODE_OFF);
lv_menu_set_load_page_event(ui->screen_1_menu_1, ui->screen_1_menu_1_cont_3, ui->screen_1_menu_1_subpage_3);
lv_event_send(ui->screen_1_menu_1_cont_1, LV_EVENT_CLICKED, NULL);
lv_obj_set_pos(ui->screen_1_menu_1, 74, 105);
lv_obj_set_size(ui->screen_1_menu_1, 340, 259);
lv_obj_set_scrollbar_mode(ui->screen_1_menu_1, LV_SCROLLBAR_MODE_OFF);
//Write style for screen_1_menu_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置菜单主题样式
//不透明度255
lv_obj_set_style_bg_opa(ui->screen_1_menu_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//背景浅灰色
lv_obj_set_style_bg_color(ui->screen_1_menu_1, lv_color_hex(0xb4b4b4), LV_PART_MAIN|LV_STATE_DEFAULT);
//无渐变
lv_obj_set_style_bg_grad_dir(ui->screen_1_menu_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui->screen_1_menu_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_opa(ui->screen_1_menu_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//黑色全边框
lv_obj_set_style_border_color(ui->screen_1_menu_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_side(ui->screen_1_menu_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//圆角
lv_obj_set_style_radius(ui->screen_1_menu_1, 10, LV_PART_MAIN|LV_STATE_DEFAULT);
//无阴影
lv_obj_set_style_shadow_width(ui->screen_1_menu_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_menu_1_extra_sidebar_page_main_default
//设置侧边栏样式
static lv_style_t style_screen_1_menu_1_extra_sidebar_page_main_default;
ui_init_style(&style_screen_1_menu_1_extra_sidebar_page_main_default);
//设置不透明度
lv_style_set_bg_opa(&style_screen_1_menu_1_extra_sidebar_page_main_default, 255);
//设置背景颜色
lv_style_set_bg_color(&style_screen_1_menu_1_extra_sidebar_page_main_default, lv_color_hex(0xf2f2f2));
lv_style_set_bg_grad_dir(&style_screen_1_menu_1_extra_sidebar_page_main_default, LV_GRAD_DIR_NONE);
lv_style_set_radius(&style_screen_1_menu_1_extra_sidebar_page_main_default, 0);
lv_obj_add_style(ui->screen_1_menu_1_sidebar_page, &style_screen_1_menu_1_extra_sidebar_page_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_menu_1_extra_option_btns_main_default
//设置菜单默认样式
static lv_style_t style_screen_1_menu_1_extra_option_btns_main_default;
ui_init_style(&style_screen_1_menu_1_extra_option_btns_main_default);
//设置文本颜色
lv_style_set_text_color(&style_screen_1_menu_1_extra_option_btns_main_default, lv_color_hex(0x000000));
//设置文本字体
lv_style_set_text_font(&style_screen_1_menu_1_extra_option_btns_main_default, &lv_font_Alatsi_Regular_18);
//设置文本不透明度
lv_style_set_text_opa(&style_screen_1_menu_1_extra_option_btns_main_default, 255);
lv_style_set_text_align(&style_screen_1_menu_1_extra_option_btns_main_default, LV_TEXT_ALIGN_CENTER);
lv_style_set_pad_top(&style_screen_1_menu_1_extra_option_btns_main_default, 6);
lv_style_set_pad_bottom(&style_screen_1_menu_1_extra_option_btns_main_default, 7);
lv_obj_add_style(ui->screen_1_menu_1_cont_3, &style_screen_1_menu_1_extra_option_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_add_style(ui->screen_1_menu_1_cont_2, &style_screen_1_menu_1_extra_option_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_add_style(ui->screen_1_menu_1_cont_1, &style_screen_1_menu_1_extra_option_btns_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style state: LV_STATE_CHECKED for &style_screen_1_menu_1_extra_option_btns_main_checked
//设置菜单选中样式
static lv_style_t style_screen_1_menu_1_extra_option_btns_main_checked;
ui_init_style(&style_screen_1_menu_1_extra_option_btns_main_checked);
//设置字体背景颜色
lv_style_set_text_color(&style_screen_1_menu_1_extra_option_btns_main_checked, lv_color_hex(0x000000));
//设置字体样式
lv_style_set_text_font(&style_screen_1_menu_1_extra_option_btns_main_checked, &lv_font_Alatsi_Regular_20);
lv_style_set_text_opa(&style_screen_1_menu_1_extra_option_btns_main_checked, 255);
lv_style_set_text_align(&style_screen_1_menu_1_extra_option_btns_main_checked, LV_TEXT_ALIGN_CENTER);
lv_style_set_border_width(&style_screen_1_menu_1_extra_option_btns_main_checked, 2);
lv_style_set_border_opa(&style_screen_1_menu_1_extra_option_btns_main_checked, 255);
lv_style_set_border_color(&style_screen_1_menu_1_extra_option_btns_main_checked, lv_color_hex(0x000000));
lv_style_set_border_side(&style_screen_1_menu_1_extra_option_btns_main_checked, LV_BORDER_SIDE_BOTTOM);
lv_style_set_radius(&style_screen_1_menu_1_extra_option_btns_main_checked, 2);
lv_style_set_bg_opa(&style_screen_1_menu_1_extra_option_btns_main_checked, 255);
lv_style_set_bg_color(&style_screen_1_menu_1_extra_option_btns_main_checked, lv_color_hex(0xd2d2d2));
lv_style_set_bg_grad_dir(&style_screen_1_menu_1_extra_option_btns_main_checked, LV_GRAD_DIR_HOR);
lv_style_set_bg_grad_color(&style_screen_1_menu_1_extra_option_btns_main_checked, lv_color_hex(0xffffff));
lv_style_set_bg_main_stop(&style_screen_1_menu_1_extra_option_btns_main_checked, 0);
lv_style_set_bg_grad_stop(&style_screen_1_menu_1_extra_option_btns_main_checked, 0);
lv_obj_add_style(ui->screen_1_menu_1_cont_3, &style_screen_1_menu_1_extra_option_btns_main_checked, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_add_style(ui->screen_1_menu_1_cont_2, &style_screen_1_menu_1_extra_option_btns_main_checked, LV_PART_MAIN|LV_STATE_CHECKED);
lv_obj_add_style(ui->screen_1_menu_1_cont_1, &style_screen_1_menu_1_extra_option_btns_main_checked, LV_PART_MAIN|LV_STATE_CHECKED);
//Write style state: LV_STATE_DEFAULT for &style_screen_1_menu_1_extra_main_title_main_default
//设置标题栏样式
static lv_style_t style_screen_1_menu_1_extra_main_title_main_default;
ui_init_style(&style_screen_1_menu_1_extra_main_title_main_default);
lv_style_set_text_color(&style_screen_1_menu_1_extra_main_title_main_default, lv_color_hex(0x3f4657));
lv_style_set_text_font(&style_screen_1_menu_1_extra_main_title_main_default, &lv_font_Alatsi_Regular_25);
lv_style_set_text_opa(&style_screen_1_menu_1_extra_main_title_main_default, 255);
lv_style_set_text_align(&style_screen_1_menu_1_extra_main_title_main_default, LV_TEXT_ALIGN_CENTER);
lv_style_set_bg_opa(&style_screen_1_menu_1_extra_main_title_main_default, 255);
lv_style_set_bg_color(&style_screen_1_menu_1_extra_main_title_main_default, lv_color_hex(0xd0d0d0));
lv_style_set_bg_grad_dir(&style_screen_1_menu_1_extra_main_title_main_default, LV_GRAD_DIR_NONE);
lv_style_set_pad_top(&style_screen_1_menu_1_extra_main_title_main_default, 7);
lv_style_set_pad_bottom(&style_screen_1_menu_1_extra_main_title_main_default, 7);
lv_menu_t * screen_1_menu_1_menu= (lv_menu_t *)ui->screen_1_menu_1;
lv_obj_t * screen_1_menu_1_title = screen_1_menu_1_menu->sidebar_header_title;
lv_obj_set_size(screen_1_menu_1_title, LV_PCT(100), LV_SIZE_CONTENT);
lv_obj_add_style(lv_menu_get_sidebar_header(ui->screen_1_menu_1), &style_screen_1_menu_1_extra_main_title_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);
下一期讲解其他控件的使用。
本文章由威三学社出品
对课程感兴趣可以私信联系