目錄

• 一、概述
• 二、效果展示
• 三、demo製作
  • 1、設計窗體
  • 2、雙擊放大
• 四、拖拽
• 五、相關文章

原文連結：Markdown模板

一、概述

用Qt進行開發介面時，既想要實現友好的使用者互動又想介面漂亮，那麼自定義介面就必不可少。其中有一個操作就是是我們每一個Qter開發者都要會的，而且是經常進行的。

Qt::FramelessWindowHint這個屬性想必大家都使用過，有些同學可能對這個屬性很瞭解，也用的是爐火純青，今天我們也來說說這個屬性。

關於這個無邊框屬性網上也有一些文章，有些談論的是bug，當然了這是針對不同os而言，也有些是跟其他第三方庫混合使用時的問題。可是問題歸問題，想要實現自定義的優秀介面這個屬性也是必不可少的。

今天我們就來實現一個無邊框窗體最大化時，支援拖拽標題欄進行還原的功能。

無邊框窗體支援縮放、移動這些不屬於本篇文章的內容，本篇文章主要講解怎麼實現最大化時拖拽標題欄進行還原窗體，本篇文章的程式碼依賴於博主之前封裝的一個拖拽代理類。

二、效果展示

如效果圖所示，做了一個簡單的事例，雙擊標題欄窗體最大化，這個時候如果進行標題欄拖拽，當滑鼠按下並移動一段距離時窗體恢復normal狀態。

恢復normal狀態下的窗體仍然支援放大和縮小，有介面可以設定。

三、demo製作

demo的製作過程還是比較簡單的，分為如下幾步

1、設計窗體

通過desinger設計器我們拖拽了一個大致窗體內容，為了更好的展示效果，標題欄加上了icon和背景色

2、雙擊放大

滑鼠雙擊標題欄放大這個功能實現起來方法也比較多，這裡博主選擇了程式碼量最少並且實現起來最簡單的方式，直接把標題欄的事件迴圈安裝到了主窗體上。

ui.widget->installEventFilter(this);

接下來我們就需要重寫主視窗的eventFilter函式即可

bool DragWidget::eventFilter(QObject * watched, QEvent * event)
{
    if (watched == ui.widget)
    {
        if (event->type() == QEvent::MouseButtonDblClick)
        {
            if (isMaximized())
            {
                showNormal();
                m_handler.setWidgetResizable(true);
                m_handler.setWidgetMovable(true);
            }
            else
            {
                showMaximized();
                m_handler.setWidgetResizable(false);
                m_handler.setWidgetMovable(false);
            }
        }
    }

    return QWidget::eventFilter(watched, event);
}
 

細心的同學就會發現程式碼裡有一個m_handler變數，這個類就是博主之前自己封裝的一個拖拽代理，通過介面可以設定被代理的窗體，並設定需要代理哪些行為。

本篇文章中所演示的事例程式碼，我們代理了主視窗上標題欄部分的移動事件和整個窗體的縮放事件，設定程式碼如下所示

m_handler.activateOn(this);
m_handler.useLocalMoveabled(true);
m_handler.addLocalWidget(ui.widget);
m_handler.setMaximumMove(true, true);

拖拽代理類內容比較多，本篇文章暫不講解。

四、拖拽

為了更好的理解本篇文章，這裡需要把拖拽代理類的標頭檔案放出來，這樣更有利於大家理解。

介面都比較簡單，程式碼中也有註釋，大家自行閱讀。

class WidgetResizeHandler : public QObject
{

public:
    explicit WidgetResizeHandler(QObject* parent = 0);
    ~WidgetResizeHandler();

public:
    void activateOn(QWidget * topLevelWidget);//新增topLevelWidget事件代理
    void removeFrom(QWidget * topLevelWidget);//移除topLevelWidget事件代理

    Qt::CursorShape CursorShape(QWidget * widget);

    //視窗移動 default：true
    void setWidgetMovable(bool movable);
    bool isWidgetMovable();

    //大小可變 default：true
    void setWidgetResizable(bool resizable);
    bool isWidgetResizable();

    // 橡膠式視窗移動 default：false
    void useRubberBandOnMove(bool use);
    bool isUsingRubberBandOnMove();

    //橡膠式修改大小 default：false
    void useRubberBandOnResize(bool use);
    bool isUsingRubberBandOnResisze();

    void setBorderWidth(int newBorderWidth);
    int borderWidth();

    //區域性可移動
    void useLocalMoveabled(bool use);
    void addLocalWidget(QWidget *);

    //最大化時支援拖拽 引數2表示是否可放大縮小
    void setMaximumMove(bool move, bool resize = false);

protected:
    virtual bool eventFilter(QObject * obj, QEvent * event) Q_DECL_OVERRIDE;

private:
    WidgetResizeHandlerImpl * d_ptr;
};

值得注意的是最後一個setMaximumMove介面，他就是我們今天的豬腳-是否支援最大化時拖拽。當我們設定了這個介面後，窗體最大化時也就能進行拖拽，並還原到之前的normal狀態。

文章第三小節講解demo時，說過主窗體已經被代理拖拽類進行了事件代理，那麼主窗體的所有事件首先都會傳遞給這個代理類，這裡我們需要重點關注下滑鼠按下時移動事件。

void WidgetData::handleMouseMoveEvent(QMouseEvent* event)
{
    if (mLeftButtonPressed)
    {
        if (d_ptr->mWidgetResizable && mPressedMousePos.onEdges)
        {
            resizeWidget(event->globalPos());
        }
        else if (d_ptr->mWidgetMovable)
        {
            moveWidget(event->globalPos());
        }
        else if (d_ptr->mMaxMovable)
        {
            if (mWidget->isMaximized() && TryMoveWidget(event))
            {
                d_ptr->mWidgetMovable = true;
                //d_ptr->mWidgetResizable = true;
            }
        }
    }
    else if (d_ptr->mWidgetResizable)
    {
        updateCursorShape(event->globalPos());
    }
}

這段程式碼包含有其他縮放窗體和正常移動的邏輯，最大化時支援移動的邏輯應該不難找木九十TryMoveWidget這個函式，該函式中我們進行了充分的邏輯判斷，一旦觸發了窗體移動，那麼我們把mWidgetMovable變數置為true，下一次滑鼠按下移動事件就會觸發正常的拖拽邏輯。

仔細思考上邊一段話，其中有2個關鍵資訊

1. 觸發窗體移動，並還原到之前的normal狀態
2. 進行了第一步後，需要把mWidgetMovable變數置為true，之後走正常的窗體移動流程

窗體移動

嘗試移動窗體，當滑鼠當前位置距離滑鼠按下時的距離大於20px時，進行窗體還原操作，並返回true，代表窗體已經被重置到normal態。

bool WidgetData::TryMoveWidget(QMouseEvent* event)
{
    QPoint distance = event->globalPos() - mDragPos;
    int length = distance.manhattanLength();
    if (length > 20)
    {
        QRect rect = mWidget->normalGeometry();
        int desX = mDragPos.x() * rect.width() / mWidget->geometry().width();
        int desY = mDragPos.y();
        rect.moveTopLeft(event->globalPos() - QPoint(desX, desY));

        mWidget->showNormal();
        mWidget->setGeometry(rect);

        mDragPos = QPoint(desX, desY);
        mIsMaxMove = true;

        return true;
    }

    return false;
}

上述程式碼中的mIsMaxMove標識是為了在一次窗體還原操作後，釋放滑鼠時可以正常的設定縮放標識而設。

有了上述程式碼之後，窗體就能還原到最大化之前的大小，並且為之也移動到了滑鼠相應的位置，關於這個新位置的計算這裡需要說明下。

x座標

x軸座標使用了比例計算方式。窗體全屏時滑鼠按下的位置在窗體上的位置在窗體還原後依然保持不變，這樣計算比較簡單而且不會出錯，保證窗體還原後，滑鼠會一直在標題欄內。

如果需要優化x軸座標的計算方法，只需要重新計算上述程式碼中的desX值即可。

y座標

y軸座標這裡沒有做特殊處理。因為窗體還原時，標題欄的高度是沒有發生變化的，因此這裡不需要做特殊處理。

講到這裡，本篇文章的主要內容基本完成，關於代理拖拽類，不屬於本篇文章內容，因此就不做過多解釋。

五、相關文章

值得一看的優秀文章：

1. 財聯社-產品展示
2. 廣聯達-產品展示
3. Qt定製控制元件列表
4. 牛逼哄哄的Qt庫

如果您覺得文章不錯，不妨給個打賞，寫作不易，感謝各位的支援。您的支援是我最大的動力，謝謝！！！

很重要--轉載宣告

1. 本站文章無特別說明，皆為原創，版權所有，轉載時請用連結的方式，給出原文出處。同時寫上原作者：朝十晚八 or Twowords

2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時通過修改本文達到有利於轉載者的目的。