使用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);

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

本文章由威三学社出品

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

相关推荐
共享ui设计和前端开发人才17 小时前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机17 小时前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机17 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
UI设计和前端开发从业者20 小时前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
ui设计前端开发老司机1 天前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX1 天前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Clair-Sean2 天前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
Zevalin爱灰灰2 天前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
前端开发与ui设计的老司机2 天前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui
前端开发与ui设计的老司机2 天前
数字孪生技术为UI前端注入灵魂:实现产品全生命周期的可视化管理
前端·ui·命令模式