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

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

阿新 • • 發佈：2019-01-22

前言

使用Qt自帶的標題欄可能沒有辦法適合我們的需求，例如標題欄的顏色，標題欄的寬度、高度，標題欄的放大、縮小、還原、關閉按鈕等都沒有辦法發生改變。因為預設的標題欄是和作業系統相關的、它會根據作業系統的變化而發生變化，在Window上不同風格的主題，在Qt程式產生的標題欄也會發生相應的變化，在linux上也是如此。而自定義標題欄則不會這樣，顏色，大小，按鈕圖示這完全有我們來控制，來達到標題欄的自由性和統一性。

/*mytitilebar.h*/
#ifndef MYTITLEBAR_H
#define MYTITLEBAR_H

#include <QWidget>
#include <QToolButton>
 

#include <QPixmap>
#include <QLabel>
#include <QColor>
#include <QPainter>
#include <QHBoxLayout>
#include <QMouseEvent>
#include <QStyle>
#include <QLabel>
#include <QtDebug>
#include <QLinearGradient>

#define  ICON_WIDTH     20
#define  ICON_HEIGHT    20
 

#define  BUTTON_WIDTH   30
#define  BUTTON_HEIGHT  30
#define  TITLE_HEIGHT   30

class myTitleBar : public QWidget
{
    Q_OBJECT
public:
    myTitleBar(QWidget *parent);
    void SetTitleBackground(QColor Color); // 供外部呼叫設定標題欄背景
    void SetTitleContent(QString content); // ……………設定標題欄內容
    void SetTitleIcon(QString iconPath);   // ……………設定標題欄圖示
 


public slots:
    void ShowSmall();      //槽函式，最小化
    void ShowMaxRestore(); // 槽函式 ，最大化或者還原
protected:
    void mousePressEvent(QMouseEvent *e);           // 滑鼠點選事件
    void mouseMoveEvent(QMouseEvent *e);            // 滑鼠移動事件
    void mouseDoubleClickEvent(QMouseEvent *e);     // 滑鼠雙擊事件

private:

    void InitTitleBar();                 // 初始化標題欄
    void paintEvent(QPaintEvent *event); // 過載繪畫函式


    QToolButton *m_Minimize;             // 最小化按鈕
    QToolButton *m_Maximize;             // 最大化按鈕
    QToolButton *m_Close;                // 關閉按鈕

    QPixmap *m_RestorePix;  // 還原按鈕的圖片
    QPixmap *m_MaxPix;      // 最大化按鈕的圖片
    QPixmap *m_MinPix;      // 最小化按鈕的圖片

    QPoint m_StartPos;      // 記錄視窗開始的位置
    QPoint m_ClickPos;

    QLabel *m_TitleIcon;    // 標題欄圖示
    QLabel *m_TitleConten;  // 標題欄標題
    QLabel m_TitleLabel;

    QColor m_ColorL;         // 標題欄漸變色
    QColor m_ColorR;         // 標題欄漸變色

    QWidget *m_Parent;       //父窗體

};

#endif // MYTITLEBAR_H

/*************************************************************************/
//File name:    mytitlebar.cpp
//Date:         2017.10.23
//Description:  自定義標題欄
/*************************************************************************/

#include "mytitlebar.h"

myTitleBar::myTitleBar(QWidget *parent):m_ColorL(QColor(0,0,0)),
m_ColorR(QColor(255,255,255)) // 初始化漸變色（白->黑漸變）
{

    this->setWindowFlags(Qt::FramelessWindowHint | Qt::Dialog);  // 隱藏預設的標題欄
    m_Parent = parent;       // 獲取標題欄的父窗體，用來控制視窗放大，縮小，關閉等行為
    m_MaxNormal = false;     // 初始化視窗不是最大化狀態
    InitTitleBar();          // 初始化標題欄

    // 連線標題欄三個按鈕到相應的槽函式中
    connect(m_Close, SIGNAL( clicked() ), m_Parent, SLOT(close() ));
    connect(m_Minimize, SIGNAL( clicked() ), this, SLOT(ShowSmall() ) );
    connect(m_Maximize, SIGNAL( clicked() ), this, SLOT(ShowMaxRestore() ) );
}


void myTitleBar::InitTitleBar()
{

    m_Close= new QToolButton(this);                              // 關閉按鈕
    m_ClosePix  = new QPixmap(":/icon/close.png");               // 關閉按鈕圖片
    m_Close->setIcon(*m_ClosePix);
    m_Close->setToolTip("關閉");                                   // 顯示提示文字
    m_Close->setIconSize(QSize(ICON_WIDTH,ICON_HEIGHT));         // 設定圖片的大小
    m_Close->setFixedSize(m_ClosePix->size());                   // 設定按鈕大小為圖片的大小
    m_Close->setStyleSheet("border-style:flat");                 // 設定按鈕背景透明

    m_Maximize = new QToolButton(this);                          // 最大化按鈕
    m_MaxPix  = new QPixmap(":/icon/scale.png");
    m_RestorePix  = new QPixmap(":/icon/scale.png");
    m_Maximize->setIcon(*m_MaxPix);
    m_Maximize->setToolTip("最大化");
    m_Maximize->setIconSize(QSize(ICON_WIDTH,ICON_HEIGHT));
    m_Maximize->setFixedSize(m_MaxPix->size());
    m_Maximize->setStyleSheet("border-style:flat");

    m_Minimize = new QToolButton(this);                         // 最小化按鈕
    m_MinPix  = new QPixmap(":/icon/mi.png");
    m_Minimize->setIcon(*m_MinPix);
    m_Minimize->setToolTip("最小化");
    m_Minimize->setIconSize(QSize(ICON_WIDTH,ICON_HEIGHT));
    m_Minimize->setFixedSize(m_MinPix->size());
    m_Minimize->setStyleSheet("border-style:flat");

    m_TitleConten = new QLabel(this);                          // 標題欄文字
    QFont TitleFont; 
    TitleFont.setPointSize(12);
    m_TitleConten->setFont(TitleFont);
    m_TitleConten->setText(tr("自定義標題欄"));

    m_TitleIcon = new QLabel(this);                            // 標題欄左上角圖示
    m_TitleIcon->setPixmap(QPixmap(":/icon/icon.png"));


    QHBoxLayout *hbox = new QHBoxLayout(this);           // 新建水平容器，把所有控制元件放在容器中
    hbox->addWidget(m_TitleIcon);
    hbox->addWidget(m_TitleConten);
    hbox->addWidget(m_Minimize);
    hbox->addWidget(m_Maximize);
    hbox->addWidget(m_Close);

    hbox->setSpacing(5);                      // 設定容器的屬性，標題欄高度等
    hbox->setContentsMargins(5, 2, 5, 2);
    setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    this->setFixedHeight(TITLE_HEIGHT);
    this->setStyleSheet("border-style:flat");
    setAttribute(Qt::WA_TranslucentBackground);

}

/*用於重新繪製標題欄，當外部呼叫了設定標題欄相關屬性的函式時呼叫*/
void myTitleBar::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);

    QLinearGradient linearGradient(QPointF(0, 0), QPointF(0, this->height()));

    // 設定漸變的顏色，如果m_ColorL和m_ColorR相同時為純色，而不是漸變色
    linearGradient.setColorAt(0, m_ColorL);  
    linearGradient.setColorAt(1, m_ColorR);

    linearGradient.setSpread(QGradient::ReflectSpread);
    painter.setBrush(linearGradient);
    QPen pen(m_Color);
    painter.setPen(pen);
    QPainterPath pathBack;                 // 先在QPainterPath畫圖，再用QPainter顯示出來
    pathBack.setFillRule(Qt::WindingFill);
    pathBack.addRoundedRect(QRect(0, 0, this->width(), this->height()), 0, 0);

}

// 最小化
void myTitleBar::ShowSmall()
{
    parentWidget()->showMinimized();
}

//最大化/還原
void myTitleBar::ShowMaxRestore()
{
    if (m_MaxNormal) {
        parentWidget()->showNormal();
        m_MaxNormal = !m_MaxNormal;
        m_Maximize->setToolTip("最大化");
        m_Maximize->setIcon(*m_MaxPix);
    } else {
        parentWidget()->showMaximized();
        m_Maximize->setToolTip("向下還原");
        m_MaxNormal = !m_MaxNormal;
        m_Maximize->setIcon(*m_RestorePix);
    }
}

// 當滑鼠點選了標題欄，記錄下當時的位置
void myTitleBar::mousePressEvent(QMouseEvent *e)
{
    m_StartPos = e->globalPos();
    m_ClickPos = mapToParent(e->pos());
}

// 滑鼠移動
void myTitleBar::mouseMoveEvent(QMouseEvent *e)
{
    if (m_MaxNormal)  // 如果處於最大化狀態，則不能移動
        return;
    parentWidget()->move(e->globalPos() - m_ClickPos);
}

// 雙擊滑鼠左鍵和放大按鈕效果一致
void myTitleBar::mouseDoubleClickEvent(QMouseEvent *e)
{
    if(e->button() == Qt::LeftButton)
    {
        ShowMaxRestore();
    }
}



//設定標題欄的漸變色
void myTitleBar::SetTitleBackground(QColor ColorL,QColor ColorR )
{
    m_ColorL = ColorL;
    m_ColorR = ColorR;

    update();     // 通知更改，系統自動條用PainterEvent()函式
}


// 設定標題欄顯示的文字
void myTitleBar::SetTitleContent(QString content)
{
    m_TitleConten->setText(content);
}

// 設定標題欄左上角的圖示
void myTitleBar::SetTitleIcon(QString iconPath)
{
    QPixmap map(iconPath);
    m_TitleIcon->setPixmap(map);

}

自定義標題欄的程式碼如上所示，但是上面的程式碼不能直接執行喲。這裡只是給出了自定義標題欄的程式碼，具體驗證的也挺簡單的，新建一個類，把預設的標題欄隱藏，直接new出來我們自定義的標題欄
myTitleBar *title = new myTitleBar(this)，然後通過move函式把，title放在視窗的最上面就可以了。這樣自定義標題欄就完成了。

相關推薦

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

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

QT自定義視窗(無邊框，自由拖動)

做專案中為了美觀，很少使用QT自帶的標題欄，取消邊框，自己實現邊框。自定義視窗，主要通過滑鼠事件實現。重寫QT視窗事件，具體參考程式碼註釋。 #ifndef CUSTOMWINDOW_H #defi

HTML5的自定義屬性data-*詳細介紹和JS操作實例

select 文章 red data scrip style box 實例 width 這篇文章主要介紹JS操作HTML自定義屬性的方法, 以實例形式分析了html中自定義屬性的設置與對應的javascript操作技巧 具體如下： HTML代碼如下（其中的d

Qt自定義無邊框介面（可放大、縮小及拖動）

Qt自定義無邊框介面 使用者介面(User Interface)是指對軟體的人機互動、操作邏輯、介面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。很多時候，Qt本地樣式可能無法實現讓我們的介面更簡化、美觀，那麼這

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果 通過繼承GridLayout實現的拖拽移位效果 首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implement

Android 自定義View(繼承原生元件)實現拖動移位效果

自定義View實現拖拽移位效果 通過繼承GridLayout實現的拖拽移位效果 首先建立Class類繼承GridLayout並重寫前三個構造方法 public class MyGridlayout extends GridLayout implements

android 自定義ImageView實現圖片手勢滑動 多點觸控放大縮小效果

                轉自：http://blog.csdn.net/jj120522/article/details/8467810首先呢，還是一貫作風，我們先來看看眾多應用中的示例：(這種效果是很常見的，可以說應用的必須品.)                           搜狐客戶端  

QT 自定義標題欄

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

qt自定義標題欄

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

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

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

QT自定義視窗標題欄實現拖動雙擊放大縮小

    去掉Qt視窗的標題邊框，重新定義標題欄，可以在標題欄上實現更多的功能，能滿足更多的開發需求，可以實現標題欄的拖動，雙擊，自定義放大縮小。      本文引用自：http://www.devbean.net/2011/10/custom-qt-titlebar/，感謝

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

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

QT 自定義選單欄

dialog和mainwindow mainwindow的ui檔案是預設有menubar，maintoolbar和statusbar的 dialog卻沒有，因此mainwindow可以直接在ui檔案中進行新增，而dialog只能通過程式碼進行自定義選單設定 本文主要介紹menubar

Qt重新實現QMouseEvent實現自定義視窗可拖動

(1)pro檔案中加入 QT += gui (2)h檔案的類中加入標頭檔案： #include <QMouseEvent> 類中加入函式和變數宣告： protected: void mouseMoveEvent(QMouseEvent* event);

Qt自定義工具欄，類似word

1.相關函式QToolBar類包含函式addWidget(QWidget *widget)和insertWidget(QAction *before, QWidget *widget)，說明工具欄不僅可以addAction，還可以新增已有的或者

Qt編寫自定義控制元件7-自定義可拖動多邊形

前言 自定義可拖動多邊形控制元件，原創作者是趙彥博(QQ:408815041 [email protected])，創作之初主要

Android自定義相機超詳細講解

了解 catch 實現 4.4 required form 需要 eset 自己 Android自定義相機超詳細講解 轉載請標明出處： http://blog.csdn.net/vinicolor/article/details/49642861； 由於網上關於Andr

Qt自定義標簽按鈕

cpp -c mit idg 方便 class als ren 中心 當你接觸到Qt時，你會為它極為方便的跨平臺方面感到吃驚，從而想嘗試著使用Qt。漸漸地你會發現Qt自帶的一些控件不能滿足自己的需要，此時就需要我們自己定義一個屬於自己的控件。總所周知，標簽的風格設置類比較多

Qt自定義按鈕及不同狀態下圖片的切換

q自定義窗體、任意形狀的窗體、qt自定義按鈕 好久沒有使用Qt了，最近在做窗體時做了一個自定義的鈕銨，剛開始是想通過修改其MASK和ICON的 方式來實現。確發現效果總是不太如意，如是幹脆自已定義了一個XPushButton。也將其實現方式記錄發 布出來。以方便日後自已使用和給有相應問題的朋友一個小小的

自定義Dialog的詳細步驟

sset als java 事件 and protect 數據 獲取 是不是 自定義Dialog的詳細步驟（實現自定義樣式一般原理） 現在很多App的提示對話框都非常有個性，然而你還用系統的對話框樣式，是不是覺得很落後呢，今天我就給大家講講怎樣自定義自己的Di