QDockWidget嵌套布局詳解-實(shí)現(xiàn)Visual Studio布局

時(shí)間：2019-11-26 09:08:02

關(guān)鍵字： QT 界面

手機(jī)看文章

掃描二維碼
隨時(shí)隨地手機(jī)看文章

[導(dǎo)讀]概述許多工程軟件，如Qt Creator，VS，matlab等，都是使用dock布局窗口，這樣用戶(hù)可以自定義界面，自由組合窗口。 Qt的嵌套布局由QDockWidget完成，用Qt Creato

概述

許多工程軟件，如Qt Creator，VS，matlab等，都是使用dock布局窗口，這樣用戶(hù)可以自定義界面，自由組合窗口。
Qt的嵌套布局由QDockWidget完成，用Qt Creator拖界面得到的dock布置形式比較固定，不能得想要的任意組合形式，要得到如下圖所示的效果，后續(xù)布局必須通過(guò)代碼來(lái)完成。

ps:這是自己沒(méi)事寫(xiě)的一個(gè)數(shù)據(jù)可視化軟件
下面說(shuō)說(shuō)如何實(shí)現(xiàn)完全自由的界面布局效果：

QDockWidget在QMainWindow的布局函數(shù)

要在QMainWindow里對(duì)dock進(jìn)行布局，需要用到如下幾個(gè)函數(shù)：

添加dock函數(shù)
此函數(shù)用于給dock指定位置，同時(shí)也可以更改dock的位置，此函數(shù)命名為addDockWidget有點(diǎn)容易誤導(dǎo)，因?yàn)椴粌H僅有add的功能，還有chang的功能

void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget)
void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget, Qt::Orientation orientation)

分割dock窗口函數(shù)
此函數(shù)的功能是把兩個(gè)dock進(jìn)行左右或上下并排布置，做成一個(gè)類(lèi)似QSplit的功能

void QMainWindow::splitDockWidget(QDockWidget * first, QDockWidget * second, Qt::Orientation orientation)

tab化窗口函數(shù)
此函數(shù)的功能是把多個(gè)dock變成一個(gè)tab形式的窗體

void QMainWindow::tabifyDockWidget(QDockWidget * first, QDockWidget * second)

設(shè)置dock嵌套布局
此函數(shù)是設(shè)置嵌套布局的關(guān)鍵

void QMainWindow::setDockNestingEnabled(bool enabled)

以上幾個(gè)函數(shù)就能完成比較復(fù)雜的嵌套布局了。

設(shè)置嵌套布局

下面通過(guò)例子來(lái)講解如何設(shè)置復(fù)雜的嵌套布局
先用Qt Creator拖放9個(gè)dock進(jìn)視圖里，為了好區(qū)分，給每個(gè)dock設(shè)置一個(gè)背景顏色：

dock屬性隨便設(shè)置，保證都任意區(qū)域可以停靠即可
由于這里不需要MainWindow的中間窗口，整個(gè)視圖都由dock組成，因此先把QMainWindow的中間窗口部件去除：
在MainWindow的構(gòu)造函數(shù)加入如下語(yǔ)句，即可把MainWindow的中間窗口去除，這時(shí)整個(gè)MainWindow只有Dock組成

QWidget* p = takeCentralWidget();
    if(p)
        delete p;

編譯出來(lái)的效果如圖所示：

拖動(dòng)dock可以發(fā)現(xiàn)，只能在兩邊進(jìn)行組合，我想把dock放置到中間是無(wú)法實(shí)現(xiàn)的，這是由于為了簡(jiǎn)化dock的吸附，QMainWindow默認(rèn)是把dock嵌套關(guān)閉的，需要我們手動(dòng)設(shè)置，在MainWindow的構(gòu)造函數(shù)里添加：

setDockNestingEnabled(true);

即可打開(kāi)嵌套功能，這時(shí)編譯出來(lái)的窗口能實(shí)現(xiàn)如下嵌套：

此時(shí)，整個(gè)窗口的布局將變得非常靈活且復(fù)雜，由于Qt Creator在ui編輯器中無(wú)法像編譯出來(lái)的程序那樣任意調(diào)整位置，因此需要手動(dòng)對(duì)窗口進(jìn)行設(shè)置。下面將介紹如何用代碼設(shè)置復(fù)雜的dock
為了方便，添加兩個(gè)函數(shù)和一個(gè)成員變量：
head：

public:
    //移除并隱藏所有dock
    void removeAllDock();
    //顯示dock窗口
    void showDock(const QList& index = QList());
private:
    QList m_docks;///< 記錄所有dockWidget的指針

CPP:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //刪除中央窗體
    QWidget* p = takeCentralWidget();
    if(p)
        delete p;
    //允許嵌套dock
    setDockNestingEnabled(true);
    //記錄所有的dock指針
    m_docks.append(ui->dockWidget_1);
    m_docks.append(ui->dockWidget_2);
    m_docks.append(ui->dockWidget_3);
    m_docks.append(ui->dockWidget_4);
    m_docks.append(ui->dockWidget_5);
    m_docks.append(ui->dockWidget_6);
    m_docks.append(ui->dockWidget_7);
    m_docks.append(ui->dockWidget_8);
    m_docks.append(ui->dockWidget_9);
}

MainWindow::~MainWindow()
{
    delete ui;
}
///
/// brief 移除并隱藏所有的dock
///
void MainWindow::removeAllDock()
{
    for(int i=0;i<9;++i)
    {
        removeDockWidget(m_docks[i]);
    }
}
///
/// brief 顯示指定序號(hào)的dock
/// param index 指定序號(hào)，如果不指定，則會(huì)顯示所有
///
void MainWindow::showDock(const QList &index)
{
    if (index.isEmpty())
    {
        for(int i=0;i<9;++i)
        {
            m_docks[i]->show();
        }
    }
    else
    {
        foreach (int i, index) {
            m_docks[i]->show();
        }
    }
}

void removeAllDock();函數(shù)可以把所有的dock隱藏void showDock(const QList& index = QList())則可以顯示指定的dock。
下面先對(duì)需要用到的幾個(gè)函數(shù)進(jìn)行示范：

addDockWidget

addDockWidget函數(shù)用于給MainWindow添加dock窗體，指定添加的區(qū)域，如果想改變dock的位置，也可以使用此函數(shù)進(jìn)行移動(dòng)。

void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget)
void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget, Qt::Orientation orientation)

如：

addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
addDockWidget(Qt::RightDockWidgetArea,ui->dockWidget_2);
addDockWidget(Qt::TopDockWidgetArea,ui->dockWidget_3);
addDockWidget(Qt::BottomDockWidgetArea,ui->dockWidget_4);

把4個(gè)dock按照上下左右布置，效果如下：

splitDockWidget

void QMainWindow::splitDockWidget(QDockWidget * first, QDockWidget * second, Qt::Orientation orientation)

此函數(shù)可以把一個(gè)dock（QDockWidget * first）在其位置上進(jìn)行嵌套，嵌套可以指定水平嵌套或者垂直嵌套，嵌套方向是從左到右，從上到下，也就是QDockWidget * first相對(duì)于QDockWidget * second永遠(yuǎn)在左邊或者上邊。
如：

removeAllDock();
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_2,Qt::Horizontal);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Horizontal);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_4,Qt::Horizontal);
splitDockWidget(ui->dockWidget_4,ui->dockWidget_5,Qt::Horizontal);
showDock(QList()<< 0<<1<<2<<3<<4);

得到如下效果：

若是：

removeAllDock();
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_2,Qt::Vertical);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Vertical);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_4,Qt::Vertical);
splitDockWidget(ui->dockWidget_4,ui->dockWidget_5,Qt::Vertical);
showDock(QList()<< 0<<1<<2<<3<<4);

那么效果變?yōu)椋?

此函數(shù)是實(shí)現(xiàn)嵌套布局的關(guān)鍵，首先指定基準(zhǔn)，然后開(kāi)始進(jìn)行分割，即可得到比較復(fù)雜的布局。
分割原則是：先水平，再豎直，從左到右，從上到下
下面顯示一個(gè)九宮格布局：

實(shí)現(xiàn)代碼

removeAllDock();
//原則，先左右，再上下
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_2,Qt::Horizontal);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Horizontal);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_4,Qt::Vertical);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_5,Qt::Vertical);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_6,Qt::Vertical);
splitDockWidget(ui->dockWidget_4,ui->dockWidget_7,Qt::Vertical);
splitDockWidget(ui->dockWidget_5,ui->dockWidget_8,Qt::Vertical);
splitDockWidget(ui->dockWidget_6,ui->dockWidget_9,Qt::Vertical);
showDock();

實(shí)現(xiàn)代碼：

removeAllDock();
//原則，先左右，再上下
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_2,Qt::Horizontal);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Horizontal);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_4,Qt::Vertical);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_6,Qt::Vertical);
splitDockWidget(ui->dockWidget_4,ui->dockWidget_7,Qt::Vertical);
splitDockWidget(ui->dockWidget_6,ui->dockWidget_9,Qt::Vertical);
showDock(QList()<< 0<<1<<2<<3<<5<<6<<8);

實(shí)現(xiàn)代碼：

removeAllDock();
addDockWidget(Qt::TopDockWidgetArea,ui->dockWidget_1);
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_2);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Horizontal);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_4,Qt::Horizontal);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_5,Qt::Horizontal);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_6,Qt::Horizontal);
splitDockWidget(ui->dockWidget_4,ui->dockWidget_7,Qt::Horizontal);
showDock(QList()<< 0<<1<<2<<3<<4<<5<<6);

反正就是用splitDockWidget和addDockWidget你想怎么布置就怎么布置。

tabifyDockWidget

此函數(shù)就是實(shí)現(xiàn)tab合并功能
直接看看下面例子：

實(shí)現(xiàn)原理：

removeAllDock();
addDockWidget(Qt::LeftDockWidgetArea,ui->dockWidget_1);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_2,Qt::Horizontal);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_3,Qt::Horizontal);
splitDockWidget(ui->dockWidget_1,ui->dockWidget_4,Qt::Vertical);
splitDockWidget(ui->dockWidget_2,ui->dockWidget_5,Qt::Vertical);
splitDockWidget(ui->dockWidget_3,ui->dockWidget_6,Qt::Vertical);
tabifyDockWidget(ui->dockWidget_1,ui->dockWidget_7);
tabifyDockWidget(ui->dockWidget_5,ui->dockWidget_8);
tabifyDockWidget(ui->dockWidget_3,ui->dockWidget_9);
showDock();

代碼：
本例代碼下載：本例代碼免積分-