当前位置：首页 > news >正文

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第八讲)

news 来源：原创 2025/5/8 17:46:29

这一期我们来讲解GUI_guider中消息框的基本使用以及相关函数，消息框（Message Box）是一个用于显示消息、警告、通知或提示信息的常见 GUI 元素。消息框通常在需要向用户展示一条信息并等待用户响应时使用。例如，它可以用于展示错误信息、成功提示、警告信息，或者询问用户是否进行某些操作。
首先打开上一期讲的工程，讲消息框控件拖拽进界面，具体如图所示：
在这里插入图片描述
点击消息框控件右侧的属性栏可以控制改变消息框中的标题、文本、按键组等，具体如下图所示：

然后将标题改为“提示”、文本改为“账号或密码不得为空！！”、取消关闭按钮、删除close修改按键为”ok”，具体为如图所示：
在这里插入图片描述
消息框的美化，我们选择官方提供的第一种美化样式，然后选择背景中的不透明选项，具体如下：

以下是界面的代码：
//Write codes screen_2_msgbox_1
static const char * screen_2_msgbox_1_btns[] = {“ok”, “”};
//创建消息框
ui->screen_2_msgbox_1 = lv_msgbox_create(ui->screen_2, “提示”, “账号或密码不得为空！！”, screen_2_msgbox_1_btns, false);
//设置按钮按键尺寸
lv_obj_set_size(lv_msgbox_get_btns(ui->screen_2_msgbox_1), 60, 30);
//设置消息框的位置以及大小
lv_obj_set_pos(ui->screen_2_msgbox_1, 106, -177);
lv_obj_set_size(ui->screen_2_msgbox_1, 280, 150);
//Write style for screen_2_msgbox_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_2_msgbox_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景颜色
lv_obj_set_style_bg_color(ui->screen_2_msgbox_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景渐变方向
lv_obj_set_style_bg_grad_dir(ui->screen_2_msgbox_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框的宽度

lv_obj_set_style_border_width(ui->screen_2_msgbox_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_2_msgbox_1, 4, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影宽度
lv_obj_set_style_shadow_width(ui->screen_2_msgbox_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_2_msgbox_1_extra_title_main_default
//声明lv_style_t类型变量
static lv_style_t style_screen_2_msgbox_1_extra_title_main_default;
//初始化变量
ui_init_style(&style_screen_2_msgbox_1_extra_title_main_default);
//用于设置标题文本颜色
lv_style_set_text_color(&style_screen_2_msgbox_1_extra_title_main_default, lv_color_hex(0x00f93e));

//用于设置标题文本字体

lv_style_set_text_font(&style_screen_2_msgbox_1_extra_title_main_default, &lv_font_montserratMedium_19);
//用于设置标题文本透明度
lv_style_set_text_opa(&style_screen_2_msgbox_1_extra_title_main_default, 255);
//用于设置标题文本字母间隔
lv_style_set_text_letter_space(&style_screen_2_msgbox_1_extra_title_main_default, 0);
//用于设置标题文本行间隔
lv_style_set_text_line_space(&style_screen_2_msgbox_1_extra_title_main_default, 30);
//将样式应用到标题文本
lv_obj_add_style(lv_msgbox_get_title(ui->screen_2_msgbox_1), &style_screen_2_msgbox_1_extra_title_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_2_msgbox_1_extra_content_main_default

//声明lv_style_t类型变量
static lv_style_t style_screen_2_msgbox_1_extra_content_main_default;
//变量初始化
ui_init_style(&style_screen_2_msgbox_1_extra_content_main_default);
//设置内容文本颜色
lv_style_set_text_color(&style_screen_2_msgbox_1_extra_content_main_default, lv_color_hex(0x007f01));
//设置内容文本字体
lv_style_set_text_font(&style_screen_2_msgbox_1_extra_content_main_default, &lv_font_montserratMedium_14);
//设置内容文本透明度
lv_style_set_text_opa(&style_screen_2_msgbox_1_extra_content_main_default, 255);
//设置内容文本间字母间距
lv_style_set_text_letter_space(&style_screen_2_msgbox_1_extra_content_main_default, 0);
//设置内容文本行间距
lv_style_set_text_line_space(&style_screen_2_msgbox_1_extra_content_main_default, 10);
//将样式应用到内容文本
lv_obj_add_style(lv_msgbox_get_text(ui->screen_2_msgbox_1), &style_screen_2_msgbox_1_extra_content_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

//Write style state: LV_STATE_DEFAULT for &style_screen_2_msgbox_1_extra_btns_items_default

//声明lv_style_t类型变量
static lv_style_t style_screen_2_msgbox_1_extra_btns_items_default;
//初始化变量
ui_init_style(&style_screen_2_msgbox_1_extra_btns_items_default);
//设置按钮背景透明度
lv_style_set_bg_opa(&style_screen_2_msgbox_1_extra_btns_items_default, 0);
//设置按钮边框宽度
lv_style_set_border_width(&style_screen_2_msgbox_1_extra_btns_items_default, 2);
//设置按钮边框透明度
lv_style_set_border_opa(&style_screen_2_msgbox_1_extra_btns_items_default, 255);
//设置按钮边框颜色
lv_style_set_border_color(&style_screen_2_msgbox_1_extra_btns_items_default, lv_color_hex(0x299d9c));
//设置按钮边框显示方式
lv_style_set_border_side(&style_screen_2_msgbox_1_extra_btns_items_default, LV_BORDER_SIDE_FULL);
//设置按钮的圆角半径
lv_style_set_radius(&style_screen_2_msgbox_1_extra_btns_items_default, 4);
//设置按钮文本颜色
lv_style_set_text_color(&style_screen_2_msgbox_1_extra_btns_items_default, lv_color_hex(0x01798e));
//设置按钮文本字体
lv_style_set_text_font(&style_screen_2_msgbox_1_extra_btns_items_default, &lv_font_Alatsi_Regular_13);
//设置按钮文本透明度
lv_style_set_text_opa(&style_screen_2_msgbox_1_extra_btns_items_default, 255);
//将样式应用到按钮控件
lv_obj_add_style(lv_msgbox_get_btns(ui->screen_2_msgbox_1), &style_screen_2_msgbox_1_extra_btns_items_default, LV_PART_ITEMS|LV_STATE_DEFAULT);