Qt高级--（2）自定义标题栏

已于 2023-11-15 16:36:20 修改
阅读量1.3k 收藏 5
点赞数 2
分类专栏： QT 文章标签： qt
于 2023-11-15 16:34:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simple_core/article/details/134422980
版权

自定义标题栏

功能点

1.标题栏中最外层布局器使用水平布局器。
2.导航按钮、工具按钮和窗口功能按钮都是用水平布局器，边距和间隔可根据实际情况设置。
3.编写 QSS 样式，并将样式设置到窗口控件中。
4.实现最小化、最大化和关闭窗口按钮功能。
5.实现鼠标双击标题栏切换窗口状态，最大化状态时切换至正常状态，正常状态切换至最大化状态。
6.鼠标拖动标题栏可在屏幕中移动窗口。
7.鼠标拖动窗体切换窗口状态，拖动至屏幕顶部切换至最大化状态，拖动离开屏幕顶部切换至正常状态。

在这里插入图片描述

源代码

JTitleBar .h

#ifndef JTITLEBAR_H
#define JTITLEBAR_H

#include <QWidget>
#include <QMouseEvent>
#include "jnavibutton.h"

namespace Ui {
class JTitleBar;
}

class JTitleBar : public QWidget
{
    Q_OBJECT

public:
    explicit JTitleBar(QWidget *parent = 0);
    ~JTitleBar();

    enum WINSTATUS {NORMAL, MAXIMIZED, MINIMIZED};
    Q_ENUMS(WINSTATUS)

    void setTitleHeight(int height);

public Q_SLOTS:
    virtual void mousePressEvent(QMouseEvent *event) override;
    virtual void mouseReleaseEvent(QMouseEvent *event) override;
    virtual void mouseMoveEvent(QMouseEvent *event) override;
    virtual void mouseDoubleClickEvent(QMouseEvent *event) override;

Q_SIGNALS:
    void nbtnTab1_clicked();
    void nbtnTab2_clicked();
    void nbtnTab3_clicked();
    void configWin_clicked();
    void changeSkin_clicked();

private:
    void winStatus_changed();

private:
    Ui::JTitleBar *ui;

private:
    QList<JNaviButton*> m_listNaviButtons;
    QList<QPushButton*> m_listToolButtons;
    QList<QPushButton*> m_listWinButtons;
    int m_titleHeight;
    QPoint m_startPos;
    bool m_bLeftButtonPressed;
    WINSTATUS m_winStatus;
    bool m_bDragMax;
};

#endif // JTITLEBAR_H

.cpp

#include "jtitlebar.h"
#include "ui_jtitlebar.h"
#include <QHBoxLayout>

JTitleBar::JTitleBar(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::JTitleBar),
    m_titleHeight(30),
    m_bLeftButtonPressed(false),
    m_winStatus(NORMAL),
    m_bDragMax(false)
{
    ui->setupUi(this);
    
    QHBoxLayout *ui_hLayNaviButton = new QHBoxLayout;
    ui_hLayNaviButton->addWidget(ui->nbtnTab1);
    ui_hLayNaviButton->addWidget(ui->nbtnTab2);
    ui_hLayNaviButton->addWidget(ui->nbtnTab3);
    ui_hLayNaviButton->addStretch();
    ui_hLayNaviButton->setContentsMargins(QMargins(0,0,0,0));
    ui_hLayNaviButton->setSpacing(0);
    ui->nbtnTab1->setChecked(true);
    ui->nbtnTab1->setText(QStringLiteral("Tab1"));
    ui->nbtnTab2->setText(QStringLiteral("Tab2"));
    ui->nbtnTab3->setText(QStringLiteral("Tab3"));
    connect(ui->nbtnTab1, &JNaviButton::clicked, [=](){ emit nbtnTab1_clicked(); });
    connect(ui->nbtnTab2, &JNaviButton::clicked, [=](){ emit nbtnTab2_clicked(); });
    connect(ui->nbtnTab3, &JNaviButton::clicked, [=](){ emit nbtnTab3_clicked(); });
    m_listNaviButtons << ui->nbtnTab1 << ui->nbtnTab2 << ui->nbtnTab3;
    ui->nbtnTab1->setNormalIcon(QPixmap(":/icon/icon/tab1.png"));
    ui->nbtnTab1->setHoverIcon(QPixmap(":/icon/icon/tab1-hover.png"));
    ui->nbtnTab1->setCheckedIcon(QPixmap(":/icon/icon/tab1-hover.png"));
    ui->nbtnTab2->setNormalIcon(QPixmap(":/icon/icon/tab2.png"));
    ui->nbtnTab2->setHoverIcon(QPixmap(":/icon/icon/tab2-hover.png"));
    ui->nbtnTab2->setCheckedIcon(QPixmap(":/icon/icon/tab2-hover.png"));
    ui->nbtnTab3->setNormalIcon(QPixmap(":/icon/icon/tab3.png"));
    ui->nbtnTab3->setHoverIcon(QPixmap(":/icon/icon/tab3-hover.png"));
    ui->nbtnTab3->setCheckedIcon(QPixmap(":/icon/icon/tab3-hover.png"));
    for(auto btn : m_listNaviButtons) {
        btn->setShowIcon(true);// 设置导航按钮显示图标
        btn->setNormalBgColor(QColor(50, 57, 76, 0));
        btn->setHoverBgColor(QColor(0, 0, 0, 50));
        btn->setCheckedBgColor(QColor(0, 0, 0, 100));
        btn->setNormalTextColor(QColor(210, 210, 215));
        btn->setHoverTextColor(QColor(255, 255, 255));
        btn->setCheckedTextColor(QColor(255, 255, 255));
        btn->setIconSpace(20);// 设置图标左侧边距
        btn->setPaddingLeft(30);// 设置文字左侧边距
    }

    QHBoxLayout *ui_hlayToolButton = new QHBoxLayout;
    ui_hlayToolButton->addWidget(ui->btnProject);
    ui_hlayToolButton->addWidget(ui->btnEdit);
    ui_hlayToolButton->addWidget(ui->btnSetting);
    ui_hlayToolButton->addWidget(ui->btnAbout);
    QMargins margin = ui_hlayToolButton->contentsMargins();
    margin.setRight(margin.right() + 10);
    ui_hlayToolButton->setContentsMargins(margin);
    m_listToolButtons << ui->btnProject << ui->btnEdit << ui->btnSetting << ui->btnAbout;

    QHBoxLayout *ui_hlayWinButton = new QHBoxLayout;
    ui_hlayWinButton->addWidget(ui->btnSkin);
    ui_hlayWinButton->addWidget(ui->btnMin);
    ui_hlayWinButton->addWidget(ui->btnMax);
    ui_hlayWinButton->addWidget(ui->btnClose);
    ui_hlayWinButton->setSpacing(0);
    margin = ui_hlayWinButton->contentsMargins();
    margin.setLeft(margin.left() + 10);
    margin.setRight(margin.right() + 10);
    ui_hlayWinButton->setContentsMargins(margin);
    connect(ui->btnSetting, &QPushButton::clicked, [=](){ emit configWin_clicked(); });
    connect(ui->btnSkin, &QPushButton::clicked, [=](){ emit changeSkin_clicked(); });
    connect(ui->btnMin, &QPushButton::clicked, this, [=](){ parentWidget()->showMinimized(); });
    connect(ui->btnMax, &QPushButton::clicked, [=](){ winStatus_changed(); });
    connect(ui->btnClose, &QPushButton::clicked, [=](){ parentWidget()->close(); });
    m_listWinButtons << ui->btnSkin << ui->btnMin << ui->btnMax << ui->btnClose;





   
    QHBoxLayout *ui_hlayWindow = new QHBoxLayout;
    ui_hlayWindow->addWidget(ui->btnLogo);		// 添加 LOGO 按钮
    ui_hlayWindow->addLayout(ui_hLayNaviButton);// 添加导航按钮所在布局器
    ui_hlayWindow->addStretch();				// 添加一个弹簧
    ui_hlayWindow->addLayout(ui_hlayToolButton);// 添加工具按钮所在布局器
    ui_hlayWindow->addWidget(ui->frameLine);	// 添加竖线
    ui_hlayWindow->addLayout(ui_hlayWinButton);// 添加窗口功能按钮所在布局器
    ui->btnLogo->setMinimumWidth(180);			// 为 LOGO 按钮设置最小宽度
    ui->frameLine->setFixedSize(1, 20);			// 将竖线的尺寸设为固定值
    ui_hlayWindow->setContentsMargins(QMargins(0,0,0,0));
    ui_hlayWindow->setSpacing(0);


    setLayout(ui_hlayWindow);
    setAttribute(Qt::WA_StyledBackground, true);

/*
    QString style = "QWidget#JTitleBar{background: qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0 #313947,stop:1 #34375E);}"
                    "QPushButton{border: none;}"
                    "QPushButton#btnLogo{color:white;}"
                    "QPushButton#btnProject{image: url(:/icon/icon/project.png); color:white;}"
                    "QPushButton#btnProject:hover{image: url(:/icon/icon/project-hover.png);}"
                    "QPushButton#btnEdit{image: url(:/icon/icon/analysis.png); color:white;}"
                    "QPushButton#btnEdit:hover{image: url(:/icon/icon/analysis-hover.png);}"
                    "QPushButton#btnSetting{image: url(:/icon/icon/setting.png); color:white;}"
                    "QPushButton#btnSetting:hover{image: url(:/icon/icon/setting-hover.png);}"
                    "QPushButton#btnAbout{image: url(:/icon/icon/about.png);}"
                    "QPushButton#btnAbout:hover{image: url(:/icon/icon/about-hover.png);}"
                    "QPushButton#btnMin{image: url(:/icon/icon/min.png);}"
                    "QPushButton#btnMin:hover{image: url(:/icon/icon/min-hover.png);"
                    "background-color: red;}"
                    "QPushButton#btnMax{image: url(:/icon/icon/max.png);}"
                    "QPushButton#btnMax:hover{image: url(:/icon/icon/max-hover.png);"
                    "background-color: red;}"
                    "QPushButton#btnClose{image: url(:/icon/icon/close.png);}"
                    "QPushButton#btnClose:hover{image: url(:/icon/icon/close-hover.png);"
                    "background-color: red;}"
                    "QFrame#frameLine{background-color: black;}";
    setStyleSheet(style);
*/
}

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

void JTitleBar::setTitleHeight(int height)
{
    if(m_titleHeight != height) {
        m_titleHeight = height;
        setFixedHeight(m_titleHeight);
        ui->btnLogo->setFixedHeight(m_titleHeight);
        for(auto btn : m_listNaviButtons) {
            btn->setFixedHeight(m_titleHeight);
//            btn->setFixedWidth(m_titleHeight * 3);
            btn->setTextAlign(JNaviButton::TextAlign_Center);
        }
    }
}

void JTitleBar::winStatus_changed()
{// 判断是鼠标左键
    if(NORMAL == m_winStatus) {// 当前处于正常状态则切换至最大化状态
        parentWidget()->setWindowState(Qt::WindowMaximized);
        m_winStatus = MAXIMIZED;
        return;
    }
    if(MAXIMIZED == m_winStatus){// 当前处于最大化状态则切换至正常状态
        parentWidget()->setWindowState(Qt::WindowNoState);
        m_winStatus = NORMAL;
        return;
    }
}

void JTitleBar::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton) {
        m_startPos = event->pos();
        m_bLeftButtonPressed = true;
    }
}

void JTitleBar::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton) {
        m_bDragMax = false;
        m_bLeftButtonPressed = false;
    }
}

void JTitleBar::mouseMoveEvent(QMouseEvent *event)
{
    if(m_bLeftButtonPressed) {
        if(m_bDragMax) {
            return;
        }
        if(MAXIMIZED == m_winStatus){// 当前处于最大化状态时切换至正常状态
            parentWidget()->setWindowState(Qt::WindowNoState);
            m_winStatus = NORMAL;
//            QPoint p = event->pos() - m_startPos;
//            parentWidget()->move(parentWidget()->x() + p.x(), parentWidget()->y() + p.y());
        }
        else {
            if(event->globalY() <= 2) {// 判断距离屏幕顶部，距离小于 2 时切换至最大化状态
                parentWidget()->setWindowState(Qt::WindowMaximized);
                m_winStatus = MAXIMIZED;
                m_bDragMax = true;
                return;
            }
            else {// 正常移动窗口
                QPoint p = event->pos() - m_startPos;
                parentWidget()->move(parentWidget()->x() + p.x(), parentWidget()->y() + p.y());
            }
        }
    }
}

void JTitleBar::mouseDoubleClickEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton) {
        winStatus_changed();
    }
}
Simple_core
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Qt 之 自定义窗口标题栏
前行之路还需前行
12-06 7万+
首先自定义标题栏解决了我们程序在不同平台乃至同一平台不同的版本中样式不同的问题，使用自定义标题栏，能够保证外观的一致性，这也是为什么像QQ、有道词典、360等软件都没有使用系统标题栏，都是自定义标题栏了。正是因为自定义标题栏，我们可以自定义不再受约束，想怎么设计就怎么设计。自定义标题栏可以使用自己设计的图标，当然比系统的图标要美观了，颜值当然更高了。下面就讲一讲如何用Qt实现自定义窗口标题栏。
qt 的顶部标题栏(ActionBar)
12-29
顶部标题栏（ActionBar），这个项目是基于qt for android的版本，不过也适用于桌面版本。
【Qt】仿360安全卫士界面(自定义标题栏).rar
01-13
【Qt】仿360安全卫士界面(自定义标题栏).rar
Qt 实现 自定义窗口标题栏
12-07
以上代码用Qt实现了自定义窗口标题栏，非常实用，提供了窗口图标、窗口标题、最小化、最大化、关闭按钮等几个部分。可以应用到每一个窗口中去，保持每个窗口外观的一致性，同时自定义的标题栏也比系统自带的漂亮很多。
Qt自定义标题栏
最新发布
2301_80434259的博客
05-27 1138
qDebug()
QT 自定义简单标题栏
qq_36500197的博客
05-03 576
系统自带的标题栏不知道怎么给它设置样式，所以自己写一个吧，将就用
27、Qt自定义标题栏
Viciower的博客
05-10 1009
Qt自定义标题栏
QT自定义标题栏
m0_37668227的博客
09-07 570
qt 自定义 标题栏
QT自定义标题栏（最大化、最小化和无边框拉伸等--可直接使用）和样式设计（美化）
weixin_51071912的博客
01-09 1944
提供可直接使用的自定义窗口，内有自定义标题栏，实现了最大化、最小化、关闭、无边框拉伸等功能，直接继承窗口使用
【QT】 Qt高级——Qt自定义标题栏
qq_43331089的博客
05-05 3515
自定义标题栏需要完成功能如下：（1）自定义标题栏需要包含最小化按钮、最大化按钮、关闭按钮、标题标签、图标标签等图形元素。（2）标题栏的拖拽。（3）鼠标双击标题栏实现窗体的最大化、最小化。自定义窗体基类的功能如下：（ 1 ）自定义标题栏。（ 2 ）增加内容组件，内容组件内部的界面布局完全由具体的用户决定。* @brief 标题栏界面组件* @author/*** @brief 设置标题栏标题* @param title，参数，设置的标题/*** @brief 设置标题栏的图标。
Qt实用技巧：自定义窗口标题栏
热门推荐
长沙创微智能科技官方博客
02-01 5万+
若该文为原创文章，未经允许不得转载 原博主博客地址：https://blog.csdn.net/qq21497936 本文章博客地址：https://blog.csdn.net/qq21497936/article/details/79223848 目录 需求 原理 Demo下载地址 关于切图 实现Demo步骤 Qt实用技巧：自定义窗口标题栏 需求 制作窗口...
Qt 修改标题栏图标
weixin_42426713的博客
12-20 427
参考博客：https://blog.csdn.net/sinat_41752325/article/details/128605210。项目中发现并未对QMessageBox设置标题栏图标，但是却不是默认的图标。最终发现在pro文件中进行了设置，在此记录。
Qt-Advanced-Docking-System：Qt的高级扩展坞系统
01-29
拖动停靠栏的标题栏时，将拖动与该选项卡相连的所有选项卡。 因此，您可以将完整的选项卡式窗口小部件组移动到浮动窗口小部件中，或从一个停靠区移动到另一个停靠区。 快速切换完整主窗口布局的观点 透视图定义了主...
Qt-Advanced-Docking-System-master
08-12
2. 堆叠窗格：多个小部件可以堆叠在一起，用户可以通过点击标题栏来切换显示的内容。 3. 自定义布局：用户可以保存和恢复自定义的停靠布局，满足不同工作环境和需求。 4. 拖放操作：通过拖放小部件，用户可以轻松...
qt自定义标题栏文本编辑器
06-06
QT自定义标题栏文本编辑器是一种利用Qt5框架开发的C++应用程序，它允许开发者对窗口的标题栏进行个性化定制，同时提供基本的文本编辑功能。这个应用的独特之处在于，它可以将文本信息直接存储到图片中，这在某些特定...
Qt 自定义标题栏，最小化、最大化、关闭窗口，双击最大化，鼠标拖动等效果实现
wang_chao118的博客
08-29 9264
本次实验内容为Qt自定义标题栏，最小化、最大化、关闭窗口，双击最大化，鼠标拖动等界面软件的基本常规操作。我们在做一个软件界面的时候，有时需要其任务栏显示一些文本、图片甚至一些自定义控件的内容，但是通过Qt自动创建的窗口类仅自带系统风格的标题栏，往往并不能满足我们的自定义设计需求。在这种情况下，需要用Qt设计自定义标题栏内的相关内容。本篇博客记录本人实现这一功能的前后代码过程，并不一定是标准方式，仅作一个记录，在后面项目用的时候进行查阅。......
QT自定义TitleBar
yinyuchen1的博客
11-08 3923
头文件 #ifndef TITLEBAR_H #define TITLEBAR_H /************************************************* 功能：重写标题栏 作者: YYC 时间：2017-10-13 *************************************************/
Qt自定义标题栏（可拖动标题栏编辑修改窗口大小）
weixin_46246664的博客
06-06 6288
记录下Qt的自定义标题栏
qt 自定义标题栏
05-25
在 Qt 中，可以通过自定义 QWidget 的 paintEvent() 函数来实现自定义标题栏。具体步骤如下： 1.创建一个新的 QWidget，用于作为自定义标题栏。 2.将 QWidget 的窗口标志设置为 Qt::WindowFlags(Qt::FramelessWindowHint)，这样可以去掉默认的标题栏。 3.重写 QWidget 的 paintEvent() 函数，在该函数中绘制自定义标题栏。 4.将 QWidget 设置为 QMainWindow 的标题栏，即调用 QMainWindow 的 setWindowTitle() 函数，并将其参数设置为自定义标题栏的指针。 下面是一个简单的示例代码： ``` #include <QtWidgets> // 继承 QWidget，作为自定义标题栏 class CustomTitleBar : public QWidget { public: CustomTitleBar(QWidget *parent = nullptr) : QWidget(parent) { // 设置窗口标志 setWindowFlags(Qt::FramelessWindowHint); } protected: void paintEvent(QPaintEvent *) override { QPainter painter(this); painter.fillRect(rect(), Qt::blue); painter.drawText(rect(), Qt::AlignCenter, "Custom Title Bar"); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QMainWindow mainWindow; // 设置主窗口标题 mainWindow.setWindowTitle("Main Window"); // 创建自定义标题栏 CustomTitleBar *titleBar = new CustomTitleBar(&mainWindow); // 设置自定义标题栏为主窗口的标题栏 mainWindow.setMenuWidget(titleBar); mainWindow.show(); return app.exec(); } ``` 运行该程序，可以看到自定义的蓝色标题栏。你可以根据自己的需要修改 paintEvent() 函数，来实现各种不同样式的标题栏。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值