目的
熟悉该UI的MessageBox的创建和使用。
功能描述
消息盒子用于提示选择的作用。用户可以根据自己功能的需要创建自己的消息盒子,用来做多重选择。
创建步骤和函数描述
创建步骤
一个消息盒子创建主要经过以下过程。
- 盒子即将显示父类窗口的创建,用于寄托于盒子,这样盒子可以在此窗口显示,通常就为一个obj即可;
- 修饰盒子的父类,由于一般消息盒子不会过度遮挡住引起产生这个消息盒子事件初始模块控件窗口,所以一般要配置盒子父类透明度;同时如果有需要,可以配置其父类的显示风格,以及弹出的动画效果;
- 盒子对象创建;
- 盒子功能按钮添加;
- 配置盒子的事件回调函数;
- 其他,可以配置盒子的style,着色,其动态自动关闭时间函数描述
函数描述
1. 函数创建
lv_obj_t *lv_mbox_create(lv_obj_t *par, constlv_obj_t *copy)
par:父类
copy:参考拷贝对象
2. 按钮创建配置和有效按钮状态获取
//添加按钮,根据字符串的个数决定按钮的个数
void lv_mbox_add_btns(lv_obj_t *mbox, const char **btn_mapaction)
mbox:要操作的对象
btn_mapaction:按钮的名字字符串队列如const char *txt[] = {“ok”, “close”, “”}
uint16_t lv_mbox_get_active_btn(lv_obj_t *mbox)//最后一次有效按钮号
const char *lv_mbox_get_active_btn_text(lv_obj_t *mbox)//最后一次有效按钮文本
3. 盒子文本创建
//即盒子的按钮上方的文本
void lv_mbox_set_text(lv_obj_t *mbox, const char *txt)
mbox:要被操作的对象
txt:文本,即字符串
const char *lv_mbox_get_text(constlv_obj_t *mbox)//文本获取
4. 盒子自动关机设置和自动关机等待的时间
这里关闭函数,会产生删除事件。
//配置盒子动态关机功能,初始化时间
void lv_mbox_start_auto_close(lv_obj_t *mbox, uint16_t delay)
//配置盒子动态时间,ms单位
void lv_mbox_set_anim_time(lv_obj_t *mbox, uint16_t anim_time)
void lv_mbox_stop_auto_close(lv_obj_t *mbox)//停止自动关机,会产生delete事件
uint16_t lv_mbox_get_anim_time(constlv_obj_t *mbox)//动态时间
5. 盒子的风格、着色配置
void lv_mbox_set_style(lv_obj_t *mbox, lv_mbox_style_ttype, const lv_style_t *style)
void lv_mbox_set_recolor(lv_obj_t *mbox, bool en)//着色使能,其着色深度由style的intense配置
const lv_style_t *lv_mbox_get_style(constlv_obj_t *mbox, lv_mbox_style_ttype)
bool lv_mbox_get_recolor(constlv_obj_t *mbox)
使用注意
需要注意的是,由于盒子的创建都是堆栈上创建,所以在使用的时候,用户一旦要关掉此盒子,切换别的页面,则需要删除掉这个堆栈,释放缓存。
案例和代码
当前案例实现了由一个按钮产生一个事件创造消息盒子,然后此消息盒子有两个按钮,一个为ok,一个为cancel。如果点击ok,则退出,删除当前消息盒子,如果cancel,则什么都不做。具体代码如下:
#include "ljy_messagebox.h"
#include "lvgl/lvgl.h"
#include "stdio.h"
static const char welcome_info[] = "Welcome to the modal message box demo!\n"
"Press the button to display a message box.";
static const char in_msg_info[] = "Notice that you cannot touch "//没有加\n不会主动换行
"the button again while the message box is open.";
static lv_obj_t *mbox, *info;
static void MboxEventCb(lv_obj_t *obj, lv_event_t evt)
{
if(evt == LV_EVENT_DELETE && obj == mbox ) {//由close产生的事件
lv_obj_del_async(lv_obj_get_parent(mbox));//删除父窗口则会删除父窗口和其所有子窗口
mbox = NULL;
lv_label_set_text(info, welcome_info);
printf("delete\n");
} else if(evt == LV_EVENT_VALUE_CHANGED && mbox == obj) {
if(lv_mbox_get_active_btn_text(obj) == "Ok"){
printf("ok\n");
}else{
printf("cancel\n");
return ;
}
lv_mbox_start_auto_close(mbox, 0);
}
}
void CreateMessageBox()
{
//================背景======================//
//1. 风格
static lv_style_t modal_style;
lv_style_copy(&modal_style, &lv_style_plain_color);
modal_style.body.main_color = modal_style.body.grad_color = LV_COLOR_BLACK;//主区域和渐变色都为黑色
modal_style.body.opa = LV_OPA_50;//设置不透明度
//2. 创建一个对象
lv_obj_t *obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_set_style(obj, &modal_style);//配置风格
lv_obj_set_pos(obj, 0, 0);//设置显示相对于父类的位置
lv_obj_set_size(obj, LV_HOR_RES, LV_VER_RES);//设置其大小
lv_obj_set_opa_scale_enable(obj, true);//使能不透明度缩放功能,由动态时间和动态起始值和终止值配合
//3. 创建动态修饰
lv_anim_t a;
lv_anim_init(&a);//初始化
lv_anim_set_time(&a, 1000, 0);//动态持续时间
lv_anim_set_values(&a, LV_OPA_TRANSP, LV_OPA_COVER);//动态不透明度的变化区间
lv_anim_set_exec_cb(&a, obj, (lv_anim_exec_xcb_t)lv_obj_set_opa_scale);//时间事件发生时,回调配置当前opa的函数,去操作obj
lv_anim_create(&a);//将当前配置的a拷贝到一个在堆栈创建的动态变量上
//============消息盒子===========//
//4. 建立一个消息盒子
static const char * btns2[] = {"Ok", "Cancel", ""};
mbox = lv_mbox_create(obj, NULL);//在背景上创建此消息盒子
lv_mbox_add_btns(mbox, btns2);
lv_mbox_set_text(mbox, "Hello world!");//文本
lv_obj_align(mbox, NULL, LV_ALIGN_CENTER, 0, 0);//在背景中的位置
//配置自动关闭时间
// lv_mbox_start_auto_close(mbox, 2000);
// lv_mbox_set_anim_time(mbox,5000);
lv_obj_set_event_cb(mbox, MboxEventCb);
}
static ButtonEventCb(lv_obj_t *btn, lv_event_t evt)
{
//1. 单击
if(evt == LV_EVENT_CLICKED){
CreateMessageBox();
lv_label_set_text(info, in_msg_info);//拷贝
}
}
void DrawMessageBox()
{
// 1. 创建一个按钮
lv_obj_t *btn = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_size(btn, 200, 60);//尺寸
lv_obj_set_event_cb(btn, ButtonEventCb);//配置回调函数
lv_obj_align(btn, NULL, LV_ALIGN_IN_TOP_MID, 20, 20);//显示在顶层靠左,20,20的相对位置
//2. 按键的label
lv_obj_t *label = lv_label_create(btn, NULL);
lv_label_set_text(label, "Display a message box!");
//3. 创建一个显示文本的label
info = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(info, welcome_info);//label的文字
lv_label_set_long_mode(info, LV_LABEL_LONG_BREAK); //设置info的自动换行功能,不影响其高?
// lv_obj_set_width(info, LV_HOR_RES - 10);//设置其信息显示宽度,当信息超过此宽度,会换行
lv_obj_align(info, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, -10);//对齐父窗口底部,并向上提10个相对值
}
以上有几个额外的小功能,一个是创建消息盒子载体的透明度采用动态的显示,第二个是消息盒子的删除,是通过调用消息盒子close函数,发生delete事件,然后用户可以在此事件中删除盒子这个对象。同时上文中将消息自动关闭函数屏蔽,想测试的,可以打开。
结论
初始界面
按下后,弹出消息盒子