Chapter 160 · XUI 弹出层与反馈

MsgTip 消息提示

MsgTip 内联消息提示条,支持 Info / Success / Warning / Error 类型,自动定时关闭。

160

概念

MsgTip 是页面内嵌的反馈提示条:
• 内联显示:嵌入控件树中,非浮层
• 类型图标:Info / Success / Warning / Error 四种
• 自动关闭:设定持续时间后自动消失
• 手动关闭:调用 Close 立即隐藏
• 独立句柄:使用 xui_msgtip 类型管理

API 速查

函数说明
int xuiMsgTipCreate(xui_context pCtx, xui_msgtip* ppTip, const xui_msgtip_desc_t* pDesc)创建消息提示
void xuiMsgTipDestroy(xui_msgtip pTip)销毁
int xuiMsgTipShow(xui_msgtip pTip, int iType, const char* sText, float fDuration)显示提示
int xuiMsgTipClose(xui_msgtip pTip)关闭
int xuiMsgTipSetType(xui_msgtip pTip, int iType)设置类型
int xuiMsgTipSetDuration(xui_msgtip pTip, float fDuration)持续时间
int xuiMsgTipSetIconSurface(xui_msgtip pTip, xui_surface pSurface, xui_rect_t tSrc)自定义图标

编译本章示例

gcc -O2 -I. -o ch160.exe ch160_main.c src\xui_*.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch160.exe

示例:表单验证反馈

xui_msgtip_desc_t desc = { 0 };

xui_msgtip pTip;
xuiMsgTipCreate(pCtx, &pTip, &desc);

// 将提示条加入表单顶部
xuiWidgetAddChild(pFormPanel, xuiMsgTipGetWidget(pTip));

// 验证失败时显示
if (!ValidateForm()) {
    xuiMsgTipShow(pTip, 3, "请填写所有必填字段", 3.0f);
}

// 提交成功
xuiMsgTipShow(pTip, 1, "保存成功!", 2.0f);

// 手动关闭
xuiMsgTipClose(pTip);

完整代码

将以下代码保存为 ch160_main.c,编译后运行即可看到 MsgTip 消息提示效果:

#include "xge.h"
#include "xui.h"

static xui_context g_pCtx;
static xui_msgtip  g_pTip;
static int         g_iType = 0;

static void OnBtnClick(xui_widget pW, int iValue, void* pUser) {
    (void)pW; (void)pUser;
    static const char* sMsgs[] = {
        "这是一条普通信息",
        "操作成功!",
        "注意:磁盘空间不足",
        "错误:网络连接失败"
    };
    xuiMsgTipShow(g_pTip, g_iType, sMsgs[g_iType], 3.0f);
    g_iType = (g_iType + 1) % 4;
}

static int onFrame(void* pUser) {
    (void)pUser;
    xgeClear(0x081114FF);
    xui_vec2_t pos; xgeMouseGet(&pos.x, &pos.y);
    xuiInputPointerMove(g_pCtx, pos.x, pos.y);
    if (xgeMouseDown(XGE_MOUSE_LEFT)) xuiInputPointerDown(g_pCtx, pos.x, pos.y, 0);
    else xuiInputPointerUp(g_pCtx, pos.x, pos.y, 0);
    xuiUpdate(g_pCtx, xgeGetDelta());
    xuiLayout(g_pCtx);
    xuiRender(g_pCtx, NULL, NULL, 0);
    return XGE_OK;
}

int main(void) {
    xge_desc_t d = {0};
    d.iWidth = 800; d.iHeight = 600;
    d.sTitle = "ch160 - MsgTip";
    d.iFlags = XGE_INIT_VSYNC;
    xgeInit(&d);
    xuiCreate(&g_pCtx);
    /* XGE 官方代理由 xuiProxyXge() 提供 */
    xui_proxy_t tXgeProxy = xuiProxyXge();
xuiSetProxy(g_pCtx, &tXgeProxy);
    xuiSetViewportSize(g_pCtx, 800, 600);

    /* 根面板 */
    xui_widget pRoot;
    xuiPanelCreate(g_pCtx, &pRoot, NULL);
    xuiWidgetSetRect(pRoot, (xui_rect_t){0, 0, 800, 600});

    /* 消息提示条 */
    xui_msgtip_desc_t tipDesc = {0};
    xuiMsgTipCreate(g_pCtx, &g_pTip, &tipDesc);
    xuiWidgetAddChild(pRoot, xuiMsgTipGetWidget(g_pTip));

    /* 触发按钮 */
    xui_widget pBtn;
    xuiButtonCreate(g_pCtx, &pBtn, NULL);
    xuiWidgetSetRect(pBtn, (xui_rect_t){0, 0, 160, 36});
    xuiWidgetSetRect(pBtn, (xui_rect_t){320, 300, 160, 36});
    xuiButtonSetText(pBtn, "显示提示");
    xuiButtonSetClick(pBtn, OnBtnClick, NULL);
    xuiWidgetAddChild(pRoot, pBtn);

    xgeRun(onFrame, NULL);
    xuiMsgTipDestroy(g_pTip);
    xuiDestroy(g_pCtx);
    xgeUnit();
    return 0;
}

代码讲解

  • xuiMsgTipCreate:创建消息提示条,返回独立句柄 g_pTip。
  • xuiMsgTipGetWidget:获取提示条对应的 widget 以便加入控件树。
  • xuiMsgTipShow:显示指定类型(0-3)的提示,fDuration=3.0f 表示 3 秒后自动关闭。
  • 循环切换类型:每次点击按钮切换 Info→Success→Warning→Error。
  • xuiMsgTipDestroy:程序退出前销毁提示条释放资源。

要点与陷阱

  • Duration:单位秒,0 表示不自动关闭需手动 Close。
  • Type:0=Info, 1=Success, 2=Warning, 3=Error。
  • 内联:MsgTip 占据布局空间,显示/隐藏影响兄弟控件位置。
  • 复用:同一 MsgTip 可反复 Show 不同内容,无需重建。

进阶练习

  1. 网络状态条:断网时显示 Error,恢复后显示 Success 并自动消失。
  2. 自定义图标:替换默认图标为业务相关 Surface。
MsgTip 消息提示效果
图:MsgTip 消息提示渲染效果