Qt之QDockWidget嵌套布局详解-实现Visual Studio布局

最新推荐文章于 2024-09-20 07:30:00 发布
最新推荐文章于 2024-09-20 07:30:00 发布
阅读量3.2w 收藏 257
点赞数 62
分类专栏： 【-------Qt------】 【------C++------】 Qt编程指南 文章标签： QDockWidget Qt嵌套布局 C

概述

许多工程软件，如Qt Creator，VS，matlab等，都是使用dock布局窗口，这样用户可以自定义界面，自由组合窗口。
Qt的嵌套布局由QDockWidget完成，用Qt Creator拖界面得到的dock布置形式比较固定，不能得想要的任意组合形式，要得到如下图所示的效果，后续布局必须通过代码来完成。
这里写图片描述
下面说说如何实现完全自由的界面布局效果：

QDockWidget在QMainWindow的布局函数

要在QMainWindow里对dock进行布局，需要用到如下几个函数：

  • 添加dock函数
    此函数用于给dock指定位置，同时也可以更改dock的位置，此函数命名为addDockWidget有点容易误导，因为不仅仅有add的功能，还有chang的功能
void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget)
void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget, Qt::Orientation orientation)
  • splitDockWidget 分割dock窗口函数                                                                                                                                        

此函数的功能是把两个dock进行左右或上下并排布置，做成一个类似QSplit的功能

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

 

  • tabifyDockWidget tab化窗口函数
    此函数的功能是把多个dock变成一个tab形式的窗体
void QMainWindow::tabifyDockWidget(QDockWidget * first, QDockWidget * second)

 

  • 设置dock嵌套布局
    此函数是设置嵌套布局的关键
void QMainWindow::setDockNestingEnabled(bool enabled)

 

以上几个函数就能完成比较复杂的嵌套布局了。

设置嵌套布局

下面通过例子来讲解如何设置复杂的嵌套布局
先用Qt Creator拖放9个dock进视图里，为了好区分，给每个dock设置一个背景颜色：

这里写图片描述


dock属性随便设置，保证都任意区域可以停靠即可
由于这里不需要MainWindow的中间窗口，整个视图都由dock组成，因此先把QMainWindow的中间窗口部件去除：
在MainWindow的构造函数加入如下语句，即可把MainWindow的中间窗口去除，这时整个MainWindow只有Dock组成

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

 

编译出来的效果如图所示：

这里写图片描述


拖动dock可以发现，只能在两边进行组合，我想把dock放置到中间是无法实现的，这是由于为了简化dock的吸附，QMainWindow默认是把dock嵌套关闭的，需要我们手动设置，在MainWindow的构造函数里添加：

setDockNestingEnabled(true);

 

即可打开嵌套功能，这时编译出来的窗口能实现如下嵌套：

这里写图片描述


此时，整个窗口的布局将变得非常灵活且复杂，由于Qt Creator在ui编辑器中无法像编译出来的程序那样任意调整位置，因此需要手动对窗口进行设置。下面将介绍如何用代码设置复杂的dock
为了方便，添加两个函数和一个成员变量：
head：

public:
    //移除并隐藏所有dock
    void removeAllDock();
    //显示dock窗口
    void showDock(const QList<int>& index = QList<int>());
private:
    QList<QDockWidget*> 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 显示指定序号的dock
/// \param index 指定序号，如果不指定，则会显示所有
///
void MainWindow::showDock(const QList<int> &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();函数可以把所有的dock隐藏void showDock(const QList<int>& index = QList<int>())则可以显示指定的dock。
下面先对需要用到的几个函数进行示范：

addDockWidget

addDockWidget函数用于给MainWindow添加dock窗体，指定添加的区域，如果想改变dock的位置，也可以使用此函数进行移动。

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个dock按照上下左右布置，效果如下：

这里写图片描述

splitDockWidget

splitDockWidget

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

 

此函数可以把一个dock（QDockWidget * first）在其位置上进行嵌套，嵌套可以指定水平嵌套或者垂直嵌套，嵌套方向是从左到右，从上到下，也就是QDockWidget * first相对于QDockWidget * second永远在左边或者上边。
如：

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<int>()<< 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<int>()<< 0<<1<<2<<3<<4);

 

那么效果变为：

这里写图片描述


此函数是实现嵌套布局的关键，首先指定基准，然后开始进行分割，即可得到比较复杂的布局。
分割原则是：先水平，再竖直，从左到右，从上到下
下面显示一个九宫格布局：

这里写图片描述


实现代码

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();

这里写图片描述


实现代码：

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<int>()<< 0<<1<<2<<3<<5<<6<<8);

这里写图片描述


实现代码：

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<int>()<< 0<<1<<2<<3<<4<<5<<6);

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

tabifyDockWidget

此函数就是实现tab合并功能
直接看看下面例子：

这里写图片描述


实现原理：

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();
ooMelloo
关注
专栏目录
QDockWidget详解
chenlong12580的专栏
06-11 7万+
QDockWidget类详解 【详细描述】 QDockWidget类提供了一个特殊的窗口部件，它可以是被锁在QMainWindow窗口内部或者是作为顶级窗口悬浮在桌面上。 QDockWidget类提供了dock widget的概念，dock widget也就是我们熟悉的工具面板或者是工具窗口。Dock window是放置在 QMindow窗口周围的dock widget区域中的。 如
QDockWidget布局设置（大小、停靠方式、背景色）
weixin_43935474的博客
06-04 1万+
QT版本：Qt 5.5.1 (MSVC 2013, 32 bit) Qt Creator版本：Qt Creator 3.5.1 (opensource) 系统：win10 最近需要做qt界面布局，稍微研究了一下QDockWidget，写了个例子，如下： //实例化两个QDockWidget dock1 = new QDockWidget; dock2 = new QDockWidget; //设置...
QDockWidget嵌套布局详解-实现Visual Studio布局
热门推荐
尘中远的程序开发记录
04-22 4万+
概述许多工程软件，如Qt Creator，VS，matlab等，都是使用dock布局窗口，这样用户可以自定义界面，自由组合窗口。 Qt的嵌套布局由QDockWidget完成，用Qt Creator拖界面得到的dock布置形式比较固定，不能得想要的任意组合形式，要得到如下图所示的效果，后续布局必须通过代码来完成。 ps:这是自己没事写的一个数据可视化软件 下面说说如何实现完全自由的界面布局效
Qt窗口——QDockWidget
最新发布
Dirty_artist的博客
09-20 330
QDockWidget(浮动窗口)基本使用（创建、设置窗口标题、添加子控件）
【Qt 学习笔记】Qt窗口 | 浮动窗口 | QDockWidget的使用及说明
小黄鸭的博客
05-24 2265
浮动窗口是计算机图形界面中一种常见的窗口类型，它可以悬浮在其他窗口之上并且可以自由移动。浮动窗口通常被用于显示一些特定的信息或功能，例如实时监测数据、通知消息、弹出菜单等。浮动窗口可以在屏幕上的任何位置出现，用户可以根据需要将其拖动到合适的位置。QDockWidget是Qt中的一个窗口部件，它提供了一个可停靠的面板，可用于显示和编辑各种内容。QDockWidget可以在主窗口中创建并停靠在不同的位置，如左侧、右侧、顶部或底部。它可以通过拖动和放置的方式来改变其位置和大小。
QDockWidget多层嵌套布局示例
04-22
千万别下载，csdn私自修改我设置的积分（还不能改回来），去https://github.com/czyt1988/czyBlog/tree/master/tech/QDockWidget_VSStudioMode，下载源码。具体可见：http://blog.csdn.net/czyt1988/article/details/51209619
Qt 布局(QSplitter 类&QDockWidget 类) 总结
wei_Embedded_z的博客
10-16 1922
Qt 布局(QSplitter 类&QDockWidget 类) 总结
QT中QDockWidget使用详解
aoxuestudy的专栏
03-31 9099
QT中QDockWidget使用详解，QListWidget加入多张图片
Qt之QDockWidget窗口布局初级学习
面包不要的博客
05-30 1835
QDockWidget 的布局设计，背景色的初步设置，以及QDockWidget::toggleViewAction函数的使用
《八》QSplitter拆分器以及QDockWidget窗口详解
ayf9999的博客
04-18 1270
QSplitter拆分器允许用户通过拖动子部件之间的边界来控制它们的大小。单个拆分器可以控制任意数量的小部件。QSplitter的典型用法是创建几个小部件，并使用insertWidget()或addWidget()添加它们。QDockWidget类提供了一个特殊的窗口部件，它可以是被锁在QMainWindow窗口内部或者是作为顶级窗口悬浮在桌面上。QDockWidget类提供了dock widget的概念，dock widget也就是我们熟悉的工具面板或者是工具窗口。
QT页面纯代码实现
qq_45179361的博客
05-04 1744
QT页面纯代码实现。
QT开发学习笔记，环境搭建、QML
sunny_orc的专栏
07-19 1488
QT学习，环境搭建，QWdiget项目创建，QT+VS环境，QML语法学习
【qt】QDockWidget 浮动窗口
qq_74047911的博客
05-20 728
QDockWidget浮动窗口的基本用法都在这里了
QDockWidget布局方式
qq_37447786的博客
09-20 800
上图为DockWidget多控件效果图 QDockWidget dock(QLatin1String("Last filters")); QWidget* multiWidget = new QWidget(); QVBoxLayout* layout = new QVBoxLayout(); QPushButton* filter1 = new QPushButton(QLatin1String("Filter number 1")); QPushButton* filter2 = new QPushB.
QDockWidget嵌套布局--仿PS组件拖拽/吸附效果
贝勒里恩的博客
06-06 1323
QDockWidget的使用示例，仿PS的组件窗口效果。
qdockwidget嵌套布局
11-01
QDockWidget是一个可以嵌入在QMainWindow中的可调整大小的窗口部件，可以用来创建多个可停靠的子窗口。嵌套布局是指在QDockWidget中使用其他布局管理器来管理内部子部件的摆放。 在使用QDockWidget创建子窗口时，我们可以通过setWidget方法将一个QWidget对象设置为QDockWidget的内部部件。这样我们就可以在QWidget中使用其他布局管理器来控制内部子部件的布局。 常用的布局管理器有QVBoxLayout、QHBoxLayout、QGridLayout等。我们可以在QWidget中使用这些布局管理器来实现各种复杂的子部件布局。 例如，我们可以通过QVBoxLayout来在QDockWidget中嵌套垂直布局，然后再在垂直布局中添加其他QWidget子部件。具体的代码如下所示： ``` QDockWidget *dockWidget = new QDockWidget("Dock Widget", this); QWidget *widget = new QWidget(dockWidget); QVBoxLayout *layout = new QVBoxLayout(widget); QPushButton *button1 = new QPushButton("Button 1"); QPushButton *button2 = new QPushButton("Button 2"); QPushButton *button3 = new QPushButton("Button 3"); layout->addWidget(button1); layout->addWidget(button2); layout->addWidget(button3); dockWidget->setWidget(widget); addDockWidget(Qt::LeftDockWidgetArea, dockWidget); ``` 在这个例子中，我们创建了一个QDockWidget对象，并将其命名为"Dock Widget"。然后我们创建了一个QWidget对象并设置为QDockWidget的内部部件，最后我们创建了一个垂直布局管理器，并将三个QPushButton子部件添加到布局中。最后，我们将QWidget设置为QDockWidget的内部部件，并通过addDockWidget方法将QDockWidget添加到主窗口中。 通过这种方式，我们可以根据需求嵌套多个布局管理器，并灵活地控制子部件的布局方式，达到更加丰富和灵活的界面设计效果。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值