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

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

         这一期我们来讲解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);

下一期将讲解容器的使用以及相关代码。

本文章由威三学院出品

对课程感兴趣可以私信联系