码上通QT实战07--主窗体消息栏设计

1、前言

主窗体消息栏设计要点

布局与位置

消息栏通常位于主窗体底部或顶部，固定高度，宽度与窗体一致。采用分栏设计，左侧显示消息内容，右侧可放置操作按钮（如清除、复制）。滚动条支持动态加载历史消息。

视觉样式

背景色与主窗体协调，消息文本使用对比色确保可读性。区分消息类型：成功（绿色）、警告（黄色）、错误（红色）、普通（灰色）。字体选择等宽字体（如Consolas）便于对齐。

交互功能

支持点击消息跳转到相关操作界面。右键菜单提供"复制消息"、"过滤类型"选项。实时消息需闪烁提示，持续3秒后自动恢复静态。

Qt 主窗体消息栏设计方法

使用 QStatusBar 实现基础消息栏

Qt 提供了 QStatusBar 类作为状态栏的标准组件，通常位于主窗口底部

对于更复杂的消息提示，可结合 QWidget 动画实现

通过 QTextEdit 或 QLabel 支持 HTML 格式的消息

通过 QSS 自定义外观：

分割状态栏为不同功能区域：

添加可点击的消息标签

使用 QTimeLine 实现平滑过渡：

2、抓紧干

1、标题栏设计

2、消息栏设计

QLabel 概述

QLabel 是 Qt 框架中用于显示文本或图像的控件，属于基础组件之一。支持纯文本、富文本、超链接、图片等内容，并可设置对齐方式、自动换行等属性。

显示文本

显示图片

属性设置

信号与槽

通过上述方法，可灵活实现文本、图片展示及交互功能。

QPushButton 概述

QPushButton 是 Qt 框架中用于创建按钮的组件，继承自 QAbstractButton。它常用于触发操作或命令，支持文本、图标、快捷键等特性。

设置按钮禁用/启用：

设置按钮图标

设置快捷键：

通过样式表修改按钮外观：

常用信号：

• clicked()：按钮被点击时触发。
• pressed()：按钮被按下时触发。
• released()：按钮被释放时触发。

3、内容区设计

StackedWidget 概述

StackedWidget 是 Qt 框架中的一个容器控件，用于管理多个子窗口或页面，但同一时间仅显示其中一个。它通过堆叠布局实现页面切换，适用于向导式界面、选项卡式视图等场景。

核心功能

• 多页面管理 ：可添加多个子控件（如 QWidget），通过索引或对象引用切换显示。
• 动态切换：支持平滑过渡效果（需自定义实现）。
• 内存效率：隐藏的页面仍驻留内存，适合频繁切换的场景。

进阶技巧

自定义切换动画

通过重写 QStackedWidget 的切换事件，结合 QPropertyAnimation 实现渐变或滑动效果。

动态页面管理

使用 insertWidget、removeWidget 动态增删页面，注意维护索引的一致性。

信号与槽
currentChanged(int index) 信号可在页面切换时触发逻辑，例如更新导航按钮状态。

注意事项

• 页面过多时需考虑内存占用，可结合懒加载优化。
• 设计响应式布局时，确保子页面能适应 StackedWidget 的尺寸变化。

4、主窗体事件

Qt 窗体事件处理

Qt 提供了多种方式来处理窗体事件，包括重写事件处理函数、安装事件过滤器和使用信号与槽机制。以下是常见的窗体事件处理方法：

重写事件处理函数

Qt 中的窗体事件可以通过重写 QWidget 或其子类的事件处理函数来实现。常用的事件处理函数包括：

void mousePressEvent(QMouseEvent *event) override;
void mouseReleaseEvent(QMouseEvent *event) override;
void mouseMoveEvent(QMouseEvent *event) override;
void keyPressEvent(QKeyEvent *event) override;
void keyReleaseEvent(QKeyEvent *event) override;
void paintEvent(QPaintEvent *event) override;
void resizeEvent(QResizeEvent *event) override;
void closeEvent(QCloseEvent *event) override;

常见窗体事件类型

Qt 中常见的事件类型包括：

• 鼠标事件：QEvent::MouseButtonPress, QEvent::MouseButtonRelease, QEvent::MouseMove
• 键盘事件：QEvent::KeyPress, QEvent::KeyRelease
• 绘制事件：QEvent::Paint
• 窗口事件：QEvent::Resize, QEvent::Move, QEvent::Close
• 焦点事件：QEvent::FocusIn, QEvent::FocusOut

5、运行测试

完整代码

#include "mainwindow.h"
#include "systemutils.h"
#include "ui_mainwindow.h"
#include <QMessageBox>
#include <QMouseEvent>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 1.设置窗口无边框和窗口透明
    this->setWindowFlags(Qt::FramelessWindowHint);
    this->setAttribute(Qt::WA_TranslucentBackground);


    // 设置相关阴影效果
    SystemUtils * utils=new SystemUtils();
    utils->SetDropShadowEffect(ui->wdg_root,Qt::gray,10);

    //设置关闭，最小，最大的图标
    // 设置相关字体图标
    QFont font=QFont(QString("zx_icons"),9);
    // 关闭
    ui->pb_close->setFont(font);
    ui->pb_close->setText(QChar(0xe653));
    // 最大化
    ui->pb_max->setFont(font);
    ui->pb_max->setText(QChar(0xe694));
    // 最小化
    ui->pb_min->setFont(font);
    ui->pb_min->setText(QChar(0xe7e6));
    //设置第二行消息的图标
    ui->lbl_message_icon->setFont(font);
    ui->lbl_message_icon->setText(QChar(0xe7ff));

    //设置标题字体
    QFont font2=QFont(QString("钉钉进步体"),14);
    ui->lbl_title->setFont(font2);


}

MainWindow::~MainWindow()
{
    delete ui;
}




//鼠标按下事件
void MainWindow::mousePressEvent(QMouseEvent *event){
    if (event->button() == Qt::LeftButton) {  // 如果按下左边按钮
        m_drag = true;//表示要移动
        // 获取当前光标的位置
        m_dragPos = event->pos();
        // 当前鼠标点相对于桌面屏幕左上角的坐标(0,0)，全局坐标；
        m_resizeDownPos = event->globalPosition().toPoint();
        // 获取当前窗口的相关参数，包括位置，大小等等各种参数
        m_mouseDownRect = this->rect();
    }
}

//鼠标移动事件
void MainWindow::mouseMoveEvent(QMouseEvent *event){
    // 如果是鼠标在拖动时，当前窗口是全屏，不做任何处理
    if (isFullScreen()) {
        return;
    }
    if (m_move) {
        move(event->globalPosition().toPoint() - m_dragPos);
        return;
    }

    setCursor(Qt::ArrowCursor);
    if (m_drag && (event->buttons() & Qt::LeftButton)) {
        m_move = true;
        move(event->globalPosition().toPoint() - m_dragPos);
    }
}

//鼠标释放事件
void MainWindow::mouseReleaseEvent(QMouseEvent *event){
    Q_UNUSED(event)
    m_drag = false;
    if (m_move) {
        m_move = false;
    }
    setCursor(Qt::ArrowCursor);
}

//关闭事件
void MainWindow::on_pb_close_clicked()
{
    int ret=QMessageBox::question(this,"关闭系统运行","您确定要退出系统吗？","确认","取消");
    if(ret==0){
        this->close();
    }

}
//最大化
void MainWindow::on_pb_max_clicked()
{
    this->showFullScreen();  // 全屏展示
}
//最小化
void MainWindow::on_pb_min_clicked()
{
    this->showMinimized();
}

//窗体双击事件
void MainWindow::mouseDoubleClickEvent(QMouseEvent *event)
{
    if (isFullScreen()) {
        showNormal();  // 如果是全屏，就恢复到非全屏
    } else {
        showFullScreen();  // 否则就变成全屏的
    }
}

3、小结

主窗体消息栏设计要点

布局与位置

消息栏通常位于主窗体底部或顶部，固定高度，宽度与窗体一致。采用分栏设计，左侧显示消息内容，右侧可放置操作按钮（如清除、复制）。滚动条支持动态加载历史消息。

视觉样式

背景色与主窗体协调，消息文本使用对比色确保可读性。区分消息类型：成功（绿色）、警告（黄色）、错误（红色）、普通（灰色）。字体选择等宽字体（如Consolas）便于对齐。

交互功能

支持点击消息跳转到相关操作界面。右键菜单提供"复制消息"、"过滤类型"选项。实时消息需闪烁提示，持续3秒后自动恢复静态。

原创不易，打字不易，截图不易，撸码不易，整理不易，走过路过，不要错过，欢迎点赞，收藏，转载，复制，抄袭，留言，灌水，请动动你的金手指，祝您早日实现财务自由。