2. 程式人生 > >Qt高階——Qt自定義標題欄

Qt高階——Qt自定義標題欄

阿新 • • 發佈：2018-12-14

Qt高階——Qt自定義標題欄

一、Qt自定義標題欄簡介

QWidget及其子類窗體元件的標題欄受作業系統的控制，即標題欄的介面風格與作業系統的主題風格相同，工程實踐中需要開發者自行定義，達到美化應用程式介面的目的。

二、Qt自定義標題欄實現

1、自定義標題欄的功能

自定義標題欄需要完成功能如下：
（1）自定義標題欄需要包含最小化按鈕、最大化按鈕、關閉按鈕、標題標籤、圖示標籤等圖形元素。
（2）標題欄的拖拽。
（3）滑鼠雙擊標題欄實現窗體的最大化、最小化。

2、自定義標題欄的介面佈局

自定義標題欄的介面佈局如下：
Qt高階——Qt自定義標題欄

3、標題欄拖拽功能的實現

窗體的拖拽平移過程如下圖：
Qt高階——Qt自定義標題欄
當滑鼠在窗體的標題欄按下並移動時，窗體會按照滑鼠移動的軌跡進行平移。因此，窗體每次移動都是在當前位置按照滑鼠移動的向量進行移動。標題欄拖拽功能的實現需要實現mousePressEvent、mouseMoveEvent、mouseReleaseEvent三個事件處理函式。
MouseEvent中的globalPos()函式返回的是相對螢幕的位置座標，而pos()則是返回滑鼠在當前控制元件（即捕獲該滑鼠事件的控制元件）中的位置。
QWidget窗體的geometry().topLeft()則返回的是當前窗體的左上角在螢幕中的位置。

startPos = event->globalPos();// 滑鼠的全域性初始位置，按下時記住 
curWindowPos = geometry().topleft();// 窗體的全域性位置，移動時 
endPos = event->globalPos();// 滑鼠按下發生移動之後的位置，移動時 
move(curWindowPos+(startPos-endPos));// 根據向量移動方向是初始位置減去末位置，移動時 
startPos = endPos;// 將初始位置記為上次末位置，然後執行直到釋放拖拽，移動時

實現程式碼如下：

void TitleBar::mousePressEvent(QMouseEvent *event)
{
    // 滑鼠左鍵按下事件
    if (event->button() == Qt::LeftButton)
    {
        // 記錄滑鼠左鍵狀態
        m_leftButtonPressed = true;
        //記錄滑鼠在螢幕中的位置
        m_start = event->globalPos();
    }

}

void TitleBar::mouseMoveEvent(QMouseEvent *event)
{
    // 持續按住才做對應事件
    if(m_leftButtonPressed)
    {
        //將父窗體移動到父窗體原來的位置加上滑鼠移動的位置：event->globalPos()-m_start
        parentWidget()->move(parentWidget()->geometry().topLeft() +
                             event->globalPos() - m_start);
        //將滑鼠在螢幕中的位置替換為新的位置
        m_start = event->globalPos();
    }

}

void TitleBar::mouseReleaseEvent(QMouseEvent *event)
{
    // 滑鼠左鍵釋放
    if (event->button() == Qt::LeftButton)
    {
        // 記錄滑鼠狀態
        m_leftButtonPressed = false;
    }
}

4、標題欄雙擊實現最大化、最小化

滑鼠雙擊事件處理函式mouseDoubleClickEvent實現如下：

void TitleBar::mouseDoubleClickEvent(QMouseEvent *event)
{
    m_maximizeButton->click();
}

最大化、最小化、關閉按鈕的槽函式如下：

void TitleBar::onClicked()
{
    QPushButton *pButton = qobject_cast<QPushButton *>(sender());
    QWidget *pWindow = this->window();
    if (pWindow->isTopLevel())
    {
        if (pButton == m_minimizeButton)
        {
            pWindow->showMinimized();
        }
        else if (pButton == m_maximizeButton)
        {
            pWindow->isMaximized() ? pWindow->showNormal() : pWindow->showMaximized();
        }
        else if (pButton == m_closeButton)
        {
            pWindow->close();
        }
    }
}

三、Qt自定義窗體基類示例

1、自定義窗體基類的功能

自定義窗體基類的功能如下：
（1）自定義標題欄。
（2）增加內容元件，內容元件內部的介面佈局完全由具體的使用者決定。

2、自定義窗體基類的實現

TitleBar.h檔案：

#ifndef TITLEBAR_H
#define TITLEBAR_H

#include <QWidget>
#include <QPushButton>
#include <QLabel>
#include <QHBoxLayout>
#include <QEvent>
#include <QMouseEvent>
#include <QApplication>
#include <QPoint>
#include <QPixmap>
#include <QString>
/**
 * @brief 標題欄介面元件
 * @author 
 */

class TitleBar : public QWidget
{
    Q_OBJECT
public:
    explicit TitleBar(QWidget *parent = NULL);
    /**
     * @brief 設定標題欄標題
     * @param title，引數，設定的標題
     */
    void setWindowTitle(const QString& title);
    /**
     * @brief 設定標題欄的圖示
     * @param iconPath，引數，圖示的路徑
     */
    void SetTitleBarIcon(const QString& iconPath);

protected:
    /**
     * @brief 滑鼠雙擊事件處理函式
     * @param event，引數，事件
     * @note 雙擊標題欄進行介面的最大化/還原
     */
    virtual void mouseDoubleClickEvent(QMouseEvent *event);

    /**
     * @brief 滑鼠按下事件處理函式
     * @param event，引數，事件
     * @note 按下滑鼠左鍵
     */
    virtual void mousePressEvent(QMouseEvent *event);
    /**
     * @brief 滑鼠移動事件處理函式
     * @param event，引數，事件
     * @note 移動滑鼠
     */
    virtual void mouseMoveEvent(QMouseEvent *event);
    /**
     * @brief 滑鼠釋放事件處理函式
     * @param event，引數，事件
     * @note 釋放滑鼠
     */
    virtual void mouseReleaseEvent(QMouseEvent *event);

    /**
     * @brief 事件過濾處理器
     * @param obj，引數
     * @param event，引數，事件
     * @return 成功返回true，失敗返回false
     * @note 設定標題、圖示
     */
    virtual bool eventFilter(QObject *obj, QEvent *event);

    /**
     * @brief 最大化/還原
     */
    void updateMaximize();

protected slots:
    /**
     * @brief 最小化、最大化/還原、關閉按鈕點選時響應的槽函式
     */
    void onClicked();

private:
    QLabel* m_iconLabel;
    QLabel* m_titleLabel;
    QPushButton* m_minimizeButton;
    QPushButton* m_maximizeButton;
    QPushButton* m_closeButton;
    QPoint m_start;//起始點
    QPoint m_end;//結束點
    bool m_leftButtonPressed;//滑鼠左鍵按下標記
};

#endif // TITLEBAR_H

TitleBar.cpp檔案：

#include "TitleBar.h"

TitleBar::TitleBar(QWidget *parent) : QWidget(parent)
{
    setFixedHeight(30);
    setWindowFlags(Qt::FramelessWindowHint);
    m_iconLabel = new QLabel(this);
    m_iconLabel->setFixedSize(20, 20);
    m_iconLabel->setScaledContents(true);

    m_titleLabel = new QLabel(this);
    m_titleLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);

    m_minimizeButton = new QPushButton(this);
    m_minimizeButton->setFixedSize(27, 22);
    m_minimizeButton->setObjectName("minimizeButton");

    m_maximizeButton = new QPushButton(this);
    m_maximizeButton->setFixedSize(27, 22);
    m_maximizeButton->setObjectName("maximizeButton");

    m_closeButton = new QPushButton(this);
    m_closeButton->setFixedSize(27, 22);
    m_closeButton->setObjectName("closeButton");

    QHBoxLayout* layout = new QHBoxLayout;
    layout->addWidget(m_iconLabel);
    layout->addStretch(1);
    layout->addWidget(m_titleLabel);
    layout->addStretch(1);
    layout->addWidget(m_minimizeButton);
    layout->addWidget(m_maximizeButton);
    layout->addWidget(m_closeButton);
    setLayout(layout);

    setProperty("titleBar", true);
    setObjectName("titleBar");

    connect(m_minimizeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
    connect(m_maximizeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
    connect(m_closeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
}

void TitleBar::setWindowTitle(const QString &title)
{
    m_titleLabel->setAlignment(Qt::AlignCenter);
    m_titleLabel->setText(title);
}

void TitleBar::SetTitleBarIcon(const QString &iconPath)
{
    QPixmap map(iconPath);
    m_iconLabel->setPixmap(map);
}

void TitleBar::mouseDoubleClickEvent(QMouseEvent *event)
{
    m_maximizeButton->click();
}

void TitleBar::mousePressEvent(QMouseEvent *event)
{
    // 滑鼠左鍵按下事件
    if (event->button() == Qt::LeftButton)
    {
        // 記錄滑鼠左鍵狀態
        m_leftButtonPressed = true;
        //記錄滑鼠在螢幕中的位置
        m_start = event->globalPos();
    }

}

void TitleBar::mouseMoveEvent(QMouseEvent *event)
{
    // 持續按住才做對應事件
    if(m_leftButtonPressed)
    {
        //將父窗體移動到父窗體原來的位置加上滑鼠移動的位置：event->globalPos()-m_start
        parentWidget()->move(parentWidget()->geometry().topLeft() +
                             event->globalPos() - m_start);
        //將滑鼠在螢幕中的位置替換為新的位置
        m_start = event->globalPos();
    }

}

void TitleBar::mouseReleaseEvent(QMouseEvent *event)
{
    // 滑鼠左鍵釋放
    if (event->button() == Qt::LeftButton)
    {
        // 記錄滑鼠狀態
        m_leftButtonPressed = false;
    }
}

bool TitleBar::eventFilter(QObject *obj, QEvent *event)
{
    switch(event->type())
    {
    //設定標題
    case QEvent::WindowTitleChange:
    {
        QWidget *pWidget = qobject_cast<QWidget *>(obj);
        if (pWidget)
        {
            m_titleLabel->setText(pWidget->windowTitle());
            return true;
        }
    }
    //設定圖示
    case QEvent::WindowIconChange:
    {
        QWidget *pWidget = qobject_cast<QWidget *>(obj);
        if (pWidget)
        {
            QIcon icon = pWidget->windowIcon();
            m_iconLabel->setPixmap(icon.pixmap(m_iconLabel->size()));
            return true;
        }
    }
    // 視窗狀態變化、視窗大小變化
    case QEvent::WindowStateChange:
    case QEvent::Resize:
        updateMaximize();
        return true;
    }
    return QWidget::eventFilter(obj, event);
}

void TitleBar::updateMaximize()
{
    QWidget *pWindow = this->window();
    if (pWindow->isTopLevel())
    {
        bool bMaximize = pWindow->isMaximized();
        if (bMaximize)
        {
            m_maximizeButton->setToolTip(tr("Restore"));
            m_maximizeButton->setProperty("maximizeProperty", "restore");
        }
        else
        {
            m_maximizeButton->setProperty("maximizeProperty", "maximize");
            m_maximizeButton->setToolTip(tr("Maximize"));
        }

        m_maximizeButton->setStyle(QApplication::style());
    }
}

void TitleBar::onClicked()
{
    QPushButton *pButton = qobject_cast<QPushButton *>(sender());
    QWidget *pWindow = this->window();
    if (pWindow->isTopLevel())
    {
        if (pButton == m_minimizeButton)
        {
            pWindow->showMinimized();
        }
        else if (pButton == m_maximizeButton)
        {
            pWindow->isMaximized() ? pWindow->showNormal() : pWindow->showMaximized();
        }
        else if (pButton == m_closeButton)
        {
            pWindow->close();
        }
    }
}

QWindowBase.h檔案：

#ifndef QWINDOWBASE_H
#define QWINDOWBASE_H

#include <QFrame>
#include <QWidget>
#include <QVBoxLayout>
#include "TitleBar.h"

/**
 * @brief 介面元件基類
 * @note QWindowBase介面元件主要用作頂層視窗，對於非頂層視窗的介面元件使用QWidget。
 */
class QWindowBase : public QFrame
{
    Q_OBJECT
public:
    QWindowBase(QFrame* parent = NULL);
    /**
     * @brief 設定標題
     * @param title，輸入引數，標題內容
     */
    void setWindowTitle(const QString& title);
    /**
     * @brief 設定標題欄的圖示
     * @param iconPath，輸入引數，圖示資源路徑
     */
    void SetTitleBarIcon(const QString& iconPath);
    /**
     * @brief 獲取內容元件物件指標
     * @return 返回QWidget*
     */
    QWidget* contentWidget();
    /**
     * @brief 設定標題欄高度
     * @param h，輸入引數，標題欄高度
     */
    void setWindowTitleHeight(int h);

private:
    QWidget* m_contentWidget;//內容元件
    TitleBar* m_titleBar;//標題欄
    QVBoxLayout* m_layout;//佈局管理器
};

#endif // QWINDOWBASE_H

QWindowBase.cpp檔案：

#include "QWindowBase.h"

QWindowBase::QWindowBase(QFrame *parent): QFrame(parent)
{
    setWindowFlags(windowFlags() | Qt::FramelessWindowHint);
    m_titleBar = new TitleBar(this);
    m_contentWidget = new QWidget(this);
    m_contentWidget->setObjectName("Contents");
    m_layout = new QVBoxLayout;
    m_layout->addWidget(m_titleBar);
    m_layout->addWidget(m_contentWidget);
    m_layout->setSpacing(0);
    m_layout->setContentsMargins(0, 0, 0, 0);

    setLayout(m_layout);
}

void QWindowBase::setWindowTitle(const QString &title)
{
    m_titleBar->setWindowTitle(title);
}

void QWindowBase::SetTitleBarIcon(const QString &iconPath)
{
    m_titleBar->SetTitleBarIcon(iconPath);
}

QWidget *QWindowBase::contentWidget()
{
    return m_contentWidget;
}

void QWindowBase::setWindowTitleHeight(int h)
{
    m_titleBar->setFixedHeight(h);
}

CommonHelper.h檔案：

#ifndef COMMONHELPER_H
#define COMMONHELPER_H

#include <QString>
#include <QFile>
#include <QApplication>
#include <QDebug>
#include <QColor>
#include <QPalette>

/**
 * @brief 通用功能輔助類
 */
class CommonHelper
{
public:
    /**
     * @brief 為應用程式設定QSS樣式表
     * @param filepath，輸入引數，QSS檔案路徑
     */
    static void setStyleSheet(const QString& filepath)
    {
        //載入樣式檔案
        QFile qss(filepath);
        if(qss.open(QFile::ReadOnly))
        {
            QString stylesheet = QLatin1String(qss.readAll());
            QString paletteColor = stylesheet.mid(20, 7);
            qApp->setPalette(QPalette(QColor(paletteColor)));
            qApp->setStyleSheet(stylesheet);
        }
    }
};

#endif // COMMONHELPER_H

main.cpp檔案：

#include <QApplication>
#include "CommonHelper.h"
#include "QWindowBase.h"
#include <QPushButton>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QTreeView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWindowBase w;
    w.setWindowTitle("WidgetBase");
    QPushButton* button1 = new QPushButton("OK");
    QHBoxLayout* hLayout1 = new QHBoxLayout;
    hLayout1->addStretch(1);
    hLayout1->addWidget(button1);

    QVBoxLayout* layout = new QVBoxLayout;
    QTreeView* treeView = new QTreeView;
    layout->addWidget(treeView);
    layout->addLayout(hLayout1);
    layout->addStretch(1);
    w.contentWidget()->setLayout(layout);
    w.setWindowTitleHeight(40);
    w.show();
    CommonHelper::setStyleSheet("://qss/lightblue.qss");
    return a.exec();
}

工程檔案：

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = TitleBarDemo
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which has been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
        main.cpp \
    TitleBar.cpp \
    QWindowBase.cpp

HEADERS += \
    TitleBar.h \
    CommonHelper.h \
    QWindowBase.h

RESOURCES += \
    TitileBarDemo.qrc

工程目錄結構：
Qt高階——Qt自定義標題欄

3、自定義窗體基類結果展示

執行結果：
Qt高階——Qt自定義標題欄

相關推薦

Qt高階——Qt自定義標題欄

Qt高階——Qt自定義標題欄 一、Qt自定義標題欄簡介 QWidget及其子類窗體元件的標題欄受作業系統的控制，即標題欄的介面風格與作業系統的主題風格相同，工程實踐中需要開發者自行定義，達到美化應用程式介面的目的。 二、Qt自定義標題欄實現 1、自定義標題欄的功能 自定義標題欄需要完成功能如下：（1

QT 自定義標題欄

1、去除舊的標題欄 //去除QDialog對話方塊有上角問號 Qt::WindowFlags flags=Qt::Dialog;flags |=Qt::WindowCloseButtonHint;flags |=Qt::FramelessWindowHint; set

qt自定義標題欄

寫一個qt介面程式，但是系統的標題欄太醜了，一看就像個demo，為了做的高階一點，必須去掉這個標題欄； 需要注意的幾個地方，首先要將系統的標題欄隱藏掉，然後新增自己的關閉最大化最小化按鈕，最後還要設定視窗的拖拽事件（因為去掉系統標題欄後不能拖拽） 1.隱藏系統標題欄

【Qt】Qt之自定義介面（新增自定義標題欄）【轉】

簡述 通過上節內容，我們實現了自定義窗體的移動，但是我們缺少一個標題欄來顯示窗體的圖示、標題，以及控制窗體最小化、最大化、關閉的按鈕。 自定義標題欄後，所有的控制元件我們都可以定製，比如：在標題欄中新增換膚、設定按鈕以及其他控制元件。 簡述 效果 自定義標題欄 實現 介面說明

Qt自定義標題欄詳細介紹(可拖動、放大縮小、關閉、標題欄具有漸變色)

前言 使用Qt自帶的標題欄可能沒有辦法適合我們的需求，例如標題欄的顏色，標題欄的寬度、高度，標題欄的放大、縮小、還原、關閉按鈕等都沒有辦法發生改變。因為預設的標題欄是和作業系統相關的、它會根據作業系統的變化而發生變化，在Window上不同風格的主題，在Qt程式

QT自定義標題欄之拖動窗體

1，定義兩個成員變數     bool        m_pressed;     QPoint        m_movePos; 2，重寫mousePressed，mouseMove,mouseRelease void mousePressEvent(QMouseE

QT對話方塊自定義標題、最小化，最大化，關閉，幫助

去掉關閉按鈕，去掉幫助按鈕： setWindowFlags(windowFlags()&~Qt::WindowCloseButtonHint&~Qt::WindowContextHelpButtonHint); 保留：開啟自定義開關，使能視窗標題、最

自定義標題欄右鍵菜單

mman size sub append pan prot base rri import 摘自：http://stackoverflow.com/questions/4615940/how-can-i-customize-the-system-menu-of-a-wind

Android 自定義標題欄

list nis pub com .text reat oid post line 前言： 　　自定義標題欄應該是Android標配了，也是我從網上摳下來的，做一下記錄，感謝各位前輩栽樹。 自定義標題欄： 　　首先： 1 package com.example.util

WPF中自定義標題欄時窗體最大化處理之WindowChrome

注意： 本文方法基礎是WindowChrome，而WindowChrome在.NET Framework 4.5之後才整合釋出的。見：WindowChrome Class 在.NET Framework 4.0中使用WindowChrome，需要安裝Ribbon來支援WindowCh

簡單的自定義標題欄（不使用Toolbar）

比較簡單的自定義標題欄，這裡直接封裝成一個類似控制元件的樣子，先上效果圖： 我們可以先寫一個BaseView來，用來做標題欄的基礎佈局： /** * 自定義View的基類 * @author */ public class BaseView extends FrameL

Android自定義標題欄

補充： 這位大佬的方法設定完成後是白色的背景，如果需要自定義背景可以在style中新增： <style name="CustomWindowTitleBackground"> <item name="android:backg

Flutter自定義標題欄之處理狀態列高度

App在很多情況下由於各種需求需要自定義標題欄，而在能夠構建Android和IOS應用的Flutter中，如果不在Scaffold中使用AppBar會發現預設是沉浸式。 猜想：我們使用自定義標題欄好像需要知道狀態列的高度，我看到網上很多人想要自定義標題欄，卻老是去找怎麼獲取狀態列的高度 解惑：其

ToolBar自定義標題欄

.style.xml <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Ligh

android中如何自定義標題欄

          首先，修改標題欄的寬度和背景，在strings.xml中新增： <item name="android:background">@drawable/title_bg</item> </style> &l

React Native自定義標題欄元件

大家好，今天講一下如何實現自定義標題欄元件，我們都知道RN有一個優點就是可以元件化，在需要使用該元件的地方直接引用並傳遞一些引數就可以了，這種方式確實提交了開發效率。 標題欄是大多數應用介面必不可少的

Android封裝一個自定義標題欄

標題欄是Android開發最基礎的一個元件，但是應用也多種多樣，因為應對需求的多樣化，想要做一個萬能的標題欄基本是不可能，因此跟大家分享一下自己簡易封裝的標題欄，並不具備多大含金量，應對於以下一些樣式。 1： 2： 3： 4： 5：

ReactNative 自定義標題欄 ReactNative 自定義導航欄

/** * Created by 李卓原 on 2018/7/6. * email: [email protected] * */ import React from 'react'; import { Text, S

android 修改窗體標題的字型式樣和背景圖(自定義標題欄)

今天google了一下，關於android自定義窗體標題欄的問題， 解決方法大概如下：     自定義一個layout，然後通過requestWindowFeature和getWindow().setFeatureInt方法呼叫，     但是存在填充不滿的問題，而且比較麻煩

Android自定義標題欄：顯示網頁載入進度

  這陣子在做Lephone的適配，測試組提交一個bug：標題欄的文字較長時沒有顯示完全，其實這並不能算個bug，並且這個問題在以前其他機器也沒有出現，只是說在Lephone的這個平臺上顯示得不怎麼美觀，因為聯想將原生的標題欄UI進行了修改。修改的過程中遇到了一個難題，系統自帶的那個標題欄進度總能夠到達100