Qt技術學習班開始了，更多精彩、好玩的內容等著你，趕緊報名吧! 群號：655815739

一、簡述

今天晚上就如何用Qt自定義視窗標題欄，寫了一個小例子，比較基礎，實用。在此分享一下。

首先Qt是跨平臺的，所以在不同的平臺上視窗的外觀是不一樣的。比如在windows平臺上，用Qt顯示的一個視窗就跟一般windows程式視窗的外觀一致，如下圖。

同時不同windows系統，視窗外觀顯示也不一致，上面左邊是我在win8系統上顯示的視窗，右邊是win7下顯示的視窗。可以看出兩個視窗外觀差別很大，同時在win8系統中標題內容居中了，win7標題則靠左。為了 解決視窗外觀在不同系統下不一致的問題，我們乾脆去掉視窗自帶的邊框，Qt中直接用一下程式碼即可去除視窗邊框效果

this->setWindowFlags(Qt::FramelessWindowHint);

上圖就是去除視窗邊框後的效果圖。這樣是不是看起來奇怪，是不是沒有了標題欄。

一般情況下一個標題欄提供了視窗圖示、視窗標題、最小化、最大化、關閉按鈕等幾個部分，這些對於一個視窗來說是十分重要的，視窗圖示標誌著這是一個什麼程式，標題就表明這個視窗是幹什麼的，最小化、最大化、關閉等按鈕則是使用者對該視窗的操作。

下圖是QQ的幾個視窗標題欄。可以看出QQ的視窗都用了同一個視窗圖示，一看到這個標誌就知道是QQ程式的視窗，同時每個視窗標題欄不同，代表著這個視窗的作用以及使用者可以在視窗中進行什麼樣的操作。

QQ音樂的標題欄

有道詞典的標題欄

PS軟體的標題欄

以上幾款軟體的標題欄都涵蓋了以上幾個重要的組成部分。

自定義標題欄的好處

• 首先自定義標題欄解決了我們程式在不同平臺乃至同一平臺不同的版本中樣式不同的問題，使用自定義標題欄，能夠保證外觀的一致性，這也是為什麼像QQ、有道詞典、360等軟體都沒有使用系統標題欄，都是自定義標題欄了。

• 正是因為自定義標題欄，我們可以自定義，不再受約束，想怎麼設計就怎麼設計。

• 自定義標題欄可以使用自己設計的圖示，當然比系統的圖示要美觀了，顏值當然更高了。

下面就講一講如何用Qt實現自定義視窗標題欄。

二、程式碼之路

這個是之前模仿QQ做的一個登入介面視窗。

這裡我們先看一下本程式中簡單一點的效果圖：

注意：

本程式的BaseWindow是繼承於QWidget，如果大家想要繼承QMainWindow，則需要把BaseWindow的基類改為QMainWindow。

// 標題欄類;

mytitlebar.h

#include <QWidget>
#include <QLabel>
#include <QPushButton>
#include <QTimer>

enum ButtonType
{
    MIN_BUTTON = 0,         // 最小化和關閉按鈕;
    MIN_MAX_BUTTON ,        // 最小化、最大化和關閉按鈕;
    ONLY_CLOSE_BUTTON       // 只有關閉按鈕;
};

class MyTitleBar : public QWidget
{
    Q_OBJECT

public:
    MyTitleBar(QWidget *parent);
    //這裡parent沒有給預設值NULL，保證在建立MyTitleBar物件時父指標必須得賦值;且賦值不為NULL;
    ~MyTitleBar();

    // 設定標題欄背景色及是否設定標題欄背景色透明;
    void setBackgroundColor(int r, int g, int b , bool isTransparent = false);
    // 設定標題欄圖示;
    void setTitleIcon(QString filePath , QSize IconSize = QSize(25 , 25));
    // 設定標題內容;
    void setTitleContent(QString titleContent , int titleFontSize = 9);
    // 設定標題欄長度;
    void setTitleWidth(int width);
    // 設定標題欄上按鈕型別;
    void setButtonType(ButtonType buttonType);
    // 設定標題欄中的標題是否會滾動;具體可以看效果;
    void setTitleRoll();
    // 設定視窗邊框寬度;
    void setWindowBorderWidth(int borderWidth);

    // 儲存/獲取 最大化前視窗的位置及大小;
    void saveRestoreInfo(const QPoint point, const QSize size);
    void getRestoreInfo(QPoint& point, QSize& size);

private:
    void paintEvent(QPaintEvent *event);
    void mouseDoubleClickEvent(QMouseEvent *event);
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);

    // 初始化控制元件;
    void initControl();
    // 訊號槽的繫結;
    void initConnections();
    // 載入樣式檔案;
    void loadStyleSheet(const QString &sheetName);

signals:
    // 按鈕觸發的訊號;
    void signalButtonMinClicked();
    void signalButtonRestoreClicked();
    void signalButtonMaxClicked();
    void signalButtonCloseClicked();

private slots:
    // 按鈕觸發的槽;
    void onButtonMinClicked();
    void onButtonRestoreClicked();
    void onButtonMaxClicked();
    void onButtonCloseClicked();
    void onRollTitle();

private:
    QLabel* m_pIcon;                    // 標題欄圖示;
    QLabel* m_pTitleContent;            // 標題欄內容;
    QPushButton* m_pButtonMin;          // 最小化按鈕;
    QPushButton* m_pButtonRestore;      // 最大化還原按鈕;
    QPushButton* m_pButtonMax;          // 最大化按鈕;
    QPushButton* m_pButtonClose;        // 關閉按鈕;

    // 標題欄背景色;
    int m_colorR;
    int m_colorG;
    int m_colorB;

    // 最大化，最小化變數;
    QPoint m_restorePos;
    QSize m_restoreSize;
    // 移動視窗的變數;
    bool m_isPressed;
    QPoint m_startMovePos;
    // 標題欄跑馬燈效果時鐘;
    QTimer m_titleRollTimer;
    // 標題欄內容;
    QString m_titleContent;
    // 按鈕型別;
    ButtonType m_buttonType;
    // 視窗邊框寬度;
    int m_windowBorderWidth;
    // 標題欄是否透明;
    bool m_isTransparent;
};

mytitlebar.cpp

#include "mytitlebar.h"
#include <QHBoxLayout>
#include <QPainter>
#include <QFile>
#include <QMouseEvent>

#define BUTTON_HEIGHT 30        // 按鈕高度;
#define BUTTON_WIDTH 30         // 按鈕寬度;
#define TITLE_HEIGHT 30         // 標題欄高度;

MyTitleBar::MyTitleBar(QWidget *parent)
    : QWidget(parent)
    , m_colorR(153)
    , m_colorG(153)
    , m_colorB(153)
    , m_isPressed(false)
    , m_buttonType(MIN_MAX_BUTTON)
    , m_windowBorderWidth(0)
    , m_isTransparent(false)
{
    // 初始化;
    initControl();
    initConnections();
    // 載入本地樣式 MyTitle.css檔案;
    loadStyleSheet("MyTitle");
}

MyTitleBar::~MyTitleBar()
{

}

// 初始化控制元件;
void MyTitleBar::initControl()
{
    m_pIcon = new QLabel;
    m_pTitleContent = new QLabel;

    m_pButtonMin = new QPushButton;
    m_pButtonRestore = new QPushButton;
    m_pButtonMax = new QPushButton;
    m_pButtonClose = new QPushButton;

    m_pButtonMin->setFixedSize(QSize(BUTTON_WIDTH, BUTTON_HEIGHT));
    m_pButtonRestore->setFixedSize(QSize(BUTTON_WIDTH, BUTTON_HEIGHT));
    m_pButtonMax->setFixedSize(QSize(BUTTON_WIDTH, BUTTON_HEIGHT));
    m_pButtonClose->setFixedSize(QSize(BUTTON_WIDTH, BUTTON_HEIGHT));

    m_pTitleContent->setObjectName("TitleContent");
    m_pButtonMin->setObjectName("ButtonMin");
    m_pButtonRestore->setObjectName("ButtonRestore");
    m_pButtonMax->setObjectName("ButtonMax");
    m_pButtonClose->setObjectName("ButtonClose");

    m_pButtonMin->setToolTip(QStringLiteral("最小化"));
    m_pButtonRestore->setToolTip(QStringLiteral("還原"));
    m_pButtonMax->setToolTip(QStringLiteral("最大化"));
    m_pButtonClose->setToolTip(QStringLiteral("關閉"));

    QHBoxLayout* mylayout = new QHBoxLayout(this);
    mylayout->addWidget(m_pIcon);
    mylayout->addWidget(m_pTitleContent);

    mylayout->addWidget(m_pButtonMin);
    mylayout->addWidget(m_pButtonRestore);
    mylayout->addWidget(m_pButtonMax);
    mylayout->addWidget(m_pButtonClose);

    mylayout->setContentsMargins(5, 0, 0, 0);
    mylayout->setSpacing(0);

    m_pTitleContent->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    this->setFixedHeight(TITLE_HEIGHT);
    this->setWindowFlags(Qt::FramelessWindowHint);
}

// 訊號槽的繫結;
void MyTitleBar::initConnections()
{
    connect(m_pButtonMin, SIGNAL(clicked()), this, SLOT(onButtonMinClicked()));
    connect(m_pButtonRestore, SIGNAL(clicked()), this, SLOT(onButtonRestoreClicked()));
    connect(m_pButtonMax, SIGNAL(clicked()), this, SLOT(onButtonMaxClicked()));
    connect(m_pButtonClose, SIGNAL(clicked()), this, SLOT(onButtonCloseClicked()));
}

// 設定標題欄背景色,在paintEvent事件中進行繪製標題欄背景色;
// 在建構函式中給了預設值，可以外部設定顏色值改變標題欄背景色;
void MyTitleBar::setBackgroundColor(int r, int g, int b, bool isTransparent)
{
    m_colorR = r;
    m_colorG = g;
    m_colorB = b;
    m_isTransparent = isTransparent;
    // 重新繪製（呼叫paintEvent事件）;
    update();
}

// 設定標題欄圖示;
void MyTitleBar::setTitleIcon(QString filePath, QSize IconSize)
{
    QPixmap titleIcon(filePath);
    m_pIcon->setPixmap(titleIcon.scaled(IconSize));
}

// 設定標題內容;
void MyTitleBar::setTitleContent(QString titleContent, int titleFontSize)
{
    // 設定標題字型大小;
    QFont font = m_pTitleContent->font();
    font.setPointSize(titleFontSize);
    m_pTitleContent->setFont(font);
    // 設定標題內容;
    m_pTitleContent->setText(titleContent);
    m_titleContent = titleContent;
}

// 設定標題欄長度;
void MyTitleBar::setTitleWidth(int width)
{
    this->setFixedWidth(width);
}

// 設定標題欄上按鈕型別;
// 由於不同視窗標題欄上的按鈕都不一樣，所以可以自定義標題欄中的按鈕;
// 這裡提供了四個按鈕，分別為最小化、還原、最大化、關閉按鈕，如果需要其他按鈕可自行新增設定;
void MyTitleBar::setButtonType(ButtonType buttonType)
{
    m_buttonType = buttonType;

    switch (buttonType)
    {
    case MIN_BUTTON:
        {
            m_pButtonRestore->setVisible(false);
            m_pButtonMax->setVisible(false);
        }
        break;
    case MIN_MAX_BUTTON:
        {
            m_pButtonRestore->setVisible(false);
        }
        break;
    case ONLY_CLOSE_BUTTON:
        {
            m_pButtonMin->setVisible(false);
            m_pButtonRestore->setVisible(false);
            m_pButtonMax->setVisible(false);
        }
        break;
    default:
        break;
    }
}

// 設定標題欄中的標題是否會自動滾動，跑馬燈的效果;
// 一般情況下標題欄中的標題內容是不滾動的，但是既然自定義就看自己需要嘛，想怎麼設計就怎麼搞O(∩_∩)O！
void MyTitleBar::setTitleRoll()
{
    connect(&m_titleRollTimer, SIGNAL(timeout()), this, SLOT(onRollTitle()));
    m_titleRollTimer.start(200);
}

// 設定視窗邊框寬度;
void MyTitleBar::setWindowBorderWidth(int borderWidth)
{
    m_windowBorderWidth = borderWidth;
}

// 儲存視窗最大化前視窗的位置以及大小;
void MyTitleBar::saveRestoreInfo(const QPoint point, const QSize size)
{
    m_restorePos = point;
    m_restoreSize = size;
}

// 獲取視窗最大化前視窗的位置以及大小;
void MyTitleBar::getRestoreInfo(QPoint& point, QSize& size)
{
    point = m_restorePos;
    size = m_restoreSize;
}

// 繪製標題欄背景色;
void MyTitleBar::paintEvent(QPaintEvent *event)
{
    // 是否設定標題透明;
    if (!m_isTransparent)
    {
        //設定背景色;
        QPainter painter(this);
        QPainterPath pathBack;
        pathBack.setFillRule(Qt::WindingFill);
        pathBack.addRoundedRect(QRect(0, 0, this->width(), this->height()), 3, 3);
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.fillPath(pathBack, QBrush(QColor(m_colorR, m_colorG, m_colorB)));
    }   

    // 當視窗最大化或者還原後，視窗長度變了，標題欄的長度應當一起改變;
    // 這裡減去m_windowBorderWidth ，是因為視窗可能設定了不同寬度的邊框;
    // 如果視窗有邊框則需要設定m_windowBorderWidth的值，否則m_windowBorderWidth預設為0;
    if (this->width() != (this->parentWidget()->width() - m_windowBorderWidth))
    {
        this->setFixedWidth(this->parentWidget()->width() - m_windowBorderWidth);
    }
    QWidget::paintEvent(event);
}

// 雙擊響應事件，主要是實現雙擊標題欄進行最大化和最小化操作;
void MyTitleBar::mouseDoubleClickEvent(QMouseEvent *event)
{
    // 只有存在最大化、還原按鈕時雙擊才有效;
    if (m_buttonType == MIN_MAX_BUTTON)
    {
        // 通過最大化按鈕的狀態判斷當前視窗是處於最大化還是原始大小狀態;
        // 或者通過單獨設定變數來表示當前視窗狀態;
        if (m_pButtonMax->isVisible())
        {
            onButtonMaxClicked();
        }
        else
        {
            onButtonRestoreClicked();
        }
    }   

    return QWidget::mouseDoubleClickEvent(event);
}

// 以下通過mousePressEvent、mouseMoveEvent、mouseReleaseEvent三個事件實現了滑鼠拖動標題欄移動視窗的效果;
void MyTitleBar::mousePressEvent(QMouseEvent *event)
{
    if (m_buttonType == MIN_MAX_BUTTON)
    {
        // 在視窗最大化時禁止拖動視窗;
        if (m_pButtonMax->isVisible())
        {
            m_isPressed = true;
            m_startMovePos = event->globalPos();
        }
    }
    else
    {
        m_isPressed = true;
        m_startMovePos = event->globalPos();
    }

    return QWidget::mousePressEvent(event);
}

void MyTitleBar::mouseMoveEvent(QMouseEvent *event)
{
    if (m_isPressed)
    {
        QPoint movePoint = event->globalPos() - m_startMovePos;
        QPoint widgetPos = this->parentWidget()->pos();
        m_startMovePos = event->globalPos();
        this->parentWidget()->move(widgetPos.x() + movePoint.x(), widgetPos.y() + movePoint.y());
    }
    return QWidget::mouseMoveEvent(event);
}

void MyTitleBar::mouseReleaseEvent(QMouseEvent *event)
{
    m_isPressed = false;
    return QWidget::mouseReleaseEvent(event);
}

// 載入本地樣式檔案;
// 可以將樣式直接寫在檔案中，程式執行時直接載入進來;
void MyTitleBar::loadStyleSheet(const QString &sheetName)
{
    QFile file(":/Resources/" + sheetName + ".css");
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        QString styleSheet = this->styleSheet();
        styleSheet += QLatin1String(file.readAll());
        this->setStyleSheet(styleSheet);
    }
}

// 以下為按鈕操作響應的槽;
void MyTitleBar::onButtonMinClicked()
{
    emit signalButtonMinClicked();
}

void MyTitleBar::onButtonRestoreClicked()
{
    m_pButtonRestore->setVisible(false);
    m_pButtonMax->setVisible(true);
    emit signalButtonRestoreClicked();
}

void MyTitleBar::onButtonMaxClicked()
{
    m_pButtonMax->setVisible(false);
    m_pButtonRestore->setVisible(true);
    emit signalButtonMaxClicked();
}

void MyTitleBar::onButtonCloseClicked()
{
    emit signalButtonCloseClicked();
}

// 該方法主要是讓標題欄中的標題顯示為滾動的效果;
void MyTitleBar::onRollTitle()
{
    static int nPos = 0;
    QString titleContent = m_titleContent;
    // 當擷取的位置比字串長時，從頭開始;
    if (nPos > titleContent.length())
        nPos = 0;

    m_pTitleContent->setText(titleContent.mid(nPos));
    nPos++;
}

// 視窗基類;

basewindow.h

#include <QWidget>
#include "mytitlebar.h"

class BaseWindow : public QWidget
{
    Q_OBJECT

public:
    BaseWindow(QWidget *parent = 0);
    ~BaseWindow();

private:
    void initTitleBar();
    void paintEvent(QPaintEvent *event);
    void loadStyleSheet(const QString &sheetName);

private slots:
    void onButtonMinClicked();
    void onButtonRestoreClicked();
    void onButtonMaxClicked();
    void onButtonCloseClicked();

protected:
    MyTitleBar* m_titleBar;

};

basewindow.cpp

#include "basewindow.h"
#include <QDesktopWidget>
#include <QApplication>
#include <QPainter>
#include <QFile>

BaseWindow::BaseWindow(QWidget *parent)
    : QWidget(parent)
{
    // FramelessWindowHint屬性設定視窗去除邊框;
    // WindowMinimizeButtonHint 屬性設定在視窗最小化時，點選工作列視窗可以顯示出原視窗;
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);
    // 設定視窗背景透明;
    setAttribute(Qt::WA_TranslucentBackground);

    // 注意！！！如果是主視窗不要設定WA_DeleteOnClose屬性;
    // 關閉視窗時釋放資源;
    setAttribute(Qt::WA_DeleteOnClose);
    // 初始化標題欄;
    initTitleBar();
}

BaseWindow::~BaseWindow()
{

}

void BaseWindow::initTitleBar()
{
    m_titleBar = new MyTitleBar(this);
    m_titleBar->move(0, 0);

    connect(m_titleBar, SIGNAL(signalButtonMinClicked()), this, SLOT(onButtonMinClicked()));
    connect(m_titleBar, SIGNAL(signalButtonRestoreClicked()), this, SLOT(onButtonRestoreClicked()));
    connect(m_titleBar, SIGNAL(signalButtonMaxClicked()), this, SLOT(onButtonMaxClicked()));
    connect(m_titleBar, SIGNAL(signalButtonCloseClicked()), this, SLOT(onButtonCloseClicked()));

}

void BaseWindow::paintEvent(QPaintEvent* event)
{
    //設定背景色;
    QPainter painter(this);
    QPainterPath pathBack;
    pathBack.setFillRule(Qt::WindingFill);
    pathBack.addRoundedRect(QRect(0, 0, this->width(), this->height()), 3, 3);
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true);
    painter.fillPath(pathBack, QBrush(QColor(238, 223, 204)));

    return QWidget::paintEvent(event);
}

void BaseWindow::loadStyleSheet(const QString &sheetName)
{
    QFile file(":/Resources/" + sheetName + ".css");
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        QString styleSheet = this->styleSheet();
        styleSheet += QLatin1String(file.readAll());
        this->setStyleSheet(styleSheet);
    }
}

void BaseWindow::onButtonMinClicked()
{
    showMinimized();
}

void BaseWindow::onButtonRestoreClicked()
{
    QPoint windowPos;
    QSize windowSize;
    m_titleBar->getRestoreInfo(windowPos, windowSize);
    this->setGeometry(QRect(windowPos, windowSize));
}

void BaseWindow::onButtonMaxClicked()
{
    m_titleBar->saveRestoreInfo(this->pos(), QSize(this->width(), this->height()));
    QRect desktopRect = QApplication::desktop()->availableGeometry();
    QRect FactRect = QRect(desktopRect.x() - 3, desktopRect.y() - 3, desktopRect.width() + 6, desktopRect.height() + 6);
    setGeometry(FactRect);
}

void BaseWindow::onButtonCloseClicked()
{
    close();
}

以上程式碼實現了自定義標題欄,新建的視窗類直接繼承BaseWindow類，並對標題欄進行設定即可，下面就測試一下吧！

測試程式碼

NoFocusWidget.cpp

#include "nofocuswidget.h"

NoFocusWidget::NoFocusWidget(QWidget *parent)
    : BaseWindow(parent)
{
    ui.setupUi(this);
    // 初始化標題欄;
    initTitleBar();
}

NoFocusWidget::~NoFocusWidget()
{

}

void NoFocusWidget::initTitleBar()
{
    // 設定標題欄跑馬燈效果，可以不設定;
    m_titleBar->setTitleRoll();

    m_titleBar->setTitleIcon(":/Resources/titleicon.png");
    m_titleBar->setTitleContent(QStringLiteral("前行中的小豬-前行之路還需前行"));
    m_titleBar->setButtonType(MIN_MAX_BUTTON);
    m_titleBar->setTitleWidth(this->width());
}

main.cpp

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    NoFocusWidget w;
    w.show();
    return a.exec();
}

NoFocusWidget為新建的視窗類，通過繼承了BaseWindow類，並在initTitleBar()方法中對標題欄進行設定即可。下圖為NoFocusWidget視窗的設計圖。

動態效果圖

最大化、還原效果圖

注意

如果在設定視窗屬性時不加上Qt::FramelessWindowHint 就是左圖效果。

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);

如果不加上 Qt::WindowMinimizeButtonHint 就是左圖效果。加上之後可以看右圖效果。

尾

以上程式碼用Qt實現了自定義視窗標題欄，程式碼很簡單，但是很實用，可以應用到每一個視窗中去，保持每個視窗外觀的一致性，同時自定義的標題欄也比系統自帶的漂亮很多，所以還是非常實用的。

目前我們在MyTitleBar類以及BaseWindow類中只添加了一些基礎功能，小夥伴們可以根據需要新增更多自定義的功能，而其他視窗只需繼承BaseWindow類即可。

歡迎大家一起交流 O(∩_∩)O！

#程式碼下載