Qt 停靠布局QDockWidget使用
基本使用
QDockWidget是一个可以停靠在QMainWindow内的窗口控件，它可以保持浮动状态或在指定位置作为子窗口附加到主窗口中。停靠窗口QDockWidget类是应用程序中经常用到的，设置停靠窗口的一般流程如下。
- 创建一个QDockWidget对象的停靠窗体。
- 设置此停靠窗体的属性，通常调用setFeatures()及setAllowedAreas()两种方法。
- 新建一个要插入停靠窗体的控件，常用的有QListWidget和QTextEdit。
- 将控件插入停靠窗体，调用QDockWidget的setWidget()方法。
- 使用addDockWidget()方法在MainWindow中加入此停靠窗体。
这里使用Qt Designer ，随意拖拽添加QDockWidget到MainWindow任意区域可以停靠即可，在代码中对QDockWidget进行管理。Qt Designer无法任意调整位置，可以使用代码初始化QDockWidget布局。
布局相关
停靠特性
setFeatures()方法设置停靠窗体的特性，参数QDockWidget::DockWidgetFeatures指定停靠窗体的特性，包括以下几种参数。
① QDockWidget::DockWidgetClosable：停靠窗体可关闭。
② QDockWidget::DockWidgetMovable：停靠窗体可移动。
③ QDockWidget::DockWidgetFloatable：停靠窗体可浮动。
④ QDockWidget::AllDockWidgetFeatures：此参数表示拥有停靠窗体的所有特性。
⑤ QDockWidget::NoDockWidgetFeatures：不可移动、不可关闭、不可浮动。
停靠区域
setAllowedAreas()方法设置停靠窗体可停靠的区域，参数Qt::DockWidgetAreas指定了停靠窗体可停靠的区域，包括以下几种参数。
① Qt::LeftDockWidgetArea：可在主窗口的左侧停靠。
② Qt::RightDockWidgetArea：可在主窗口的右侧停靠。
③ Qt::TopDockWidgetArea：可在主窗口的顶端停靠。
④ Qt::BottomDockWidgetArea：可在主窗口的底部停靠。
⑤ Qt::AllDockWidgetArea：可在主窗口任意（以上四个）部位停靠。
⑥ Qt::NoDockWidgetArea：只可停靠在插入处。
添加dock
addDockWidget()方法用于添加dock，给dock指定位置，同时也可以更改dock的位置。
void QMainWindow::addDockWidget(Qt::DockWidgetArea area, QDockWidget * dockwidget)
分割dock
splitDockWidget()方法用于分割dock窗口，是把两个dock进行左右或上下并排布置，做成一个类似QSplit的功能，分割原则是：水平从左到右，竖直从上到下。
void QMainWindow::splitDockWidget(QDockWidget * first, QDockWidget * second, Qt::Orientation orientation)
dock tab化窗口
tabifyDockWidget()方法用于tab化窗口，把多个dock变成一个tab形式的窗体。
void QMainWindow::tabifyDockWidget(QDockWidget * first, QDockWidget * second)
初始化大小
靠左右布局的QDockWidget的高度是自适应的，宽度需要初始化设置，同理靠上下布局的高度需要初始化设置。使用splitDockWidget分割、tabifyDockWidget tab化窗口的QDockWidget的初始化大小与其依赖的QDockWidget(参数first)初始化大小一样。
void QMainWindow::resizeDocks(const QList<QDockWidget *> &docks, const QList<int> &sizes, Qt::Orientation orientation)
它的第一个参数是用来配置是哪个dock窗口需要调整大小；第二个参数是用来配置dock所占的像素大小，如果配置大于或者小于QMainWindow本身空间，Qt会根据所配置的像素大小的相对权重分配到dock中；第三个参数用来配置调整的方向，如果为Qt::Horizontal，调整dock宽度，Qt::Vertical调整dock高度，确定了停靠位置后resizeDocks才起作用。需要注意的是Qt官方文档上有注明这个方法在Qt5.6中引入，所以比Qt5.6低的版本并不能使用本方法。resizeDocks在多行或多列时初始化高宽无效问题！
使用setFeatures、setAllowedAreas、addDockWidget、splitDockWidget、tabifyDockWidget、resizeDocks可以满足基本的Dock布局了。
标题栏设置
去掉标题栏，但是不能拖动了。
QWidget *Widget = new QWidget;
ui->dockwidget_dockWidget_1->setTitleBarWidget(Widget);
自定义QWidget即可以自定义标题栏。
标题栏竖起
ui->dockwidget_dockWidget_6->setFeatures(QDockWidget::DockWidgetVerticalTitleBar);
其他问题
当使用tabifyDockWidgets进行tab化窗口时对Tabbar设置背景色时发现Tabbar上方有一行间隙。在QSS中使用qproperty-drawBase: 0;可以使得背景色填充到间隙中，但是发现Tabbar超过两个后其他的Tabbar不生效！！！
QTabBar {
qproperty-drawBase: 0;
background: rgb(45, 45, 45);
}
直接在代码中遍历Tabbar设置DrawBase属性可以解决Tabbar上方有一行间隙无法填充背景色问题。
Q_FOREACH (QTabBar *bar, this->findChildren<QTabBar *>())
{
bar->setDrawBase(false);
}
当tab个数大于一定个数时，会出现如下图左侧白线所示，这个是Qt自带的，作用是点击回到第一个tab，但是显示不好看，这里隐藏掉
QTabBar::tear {
width: 0px;
border: none;
}
后续
- 自定义标题栏。
- 补充还原布局。
效果
相关代码
#include "dockwidget.h"
#include QWidget#dockwidget {
border: none;
background-color: rgb(30, 30, 30);
}
QDockWidget#dockwidget_dockWidget_1,
#dockwidget_dockWidgetContents_1 {
border: none;
background-color: rgb(189, 79, 60);
}
QDockWidget#dockwidget_dockWidget_2,
#dockwidget_dockWidgetContents_2 {
border: none;
background-color: rgb(189, 133, 60);
}
QDockWidget#dockwidget_dockWidget_3,
#dockwidget_dockWidgetContents_3 {
border: none;
background-color: rgb(161, 189, 60);
}
QDockWidget#dockwidget_dockWidget_4,
#dockwidget_dockWidgetContents_4 {
border: none;
background-color: rgb(60, 189, 109);
}
QDockWidget#dockwidget_dockWidget_5,
#dockwidget_dockWidgetContents_5 {
border: none;
background-color: rgb(60, 152, 189);
}
QDockWidget#dockwidget_dockWidget_6,
#dockwidget_dockWidgetContents_6 {
border: none;
background-color: rgb(62, 60, 189);
}
QDockWidget#dockwidget_dockWidget_7,
#dockwidget_dockWidgetContents_7 {
border: none;
background-color: rgb(105, 60, 189);
}
QDockWidget#dockwidget_dockWidget_8,
#dockwidget_dockWidgetContents_8 {
border: none;
background-color: rgb(178, 60, 189);
}
QDockWidget#dockwidget_dockWidget_9,
#dockwidget_dockWidgetContents_9 {
border: none;
background-color: rgb(189, 60, 120);
}
/* QDockWidget之间的间距调整 */
QMainWindow::separator {
width: 0px;
height: 0px;
margin: 0px;
/* 如果将两个QDockWidget之间的间距调为0后，QDockWidget将没办法拉拽，所以留出一点小缝隙 */
padding: 0, 1px;
}
QDockWidget {
color: white;
}
/* 标题设置 */
QDockWidget::title {
/* 标题字体在这里设置无效，要在QDockWidget中设置！ */
/* color: white; */
text-align: left;
/* 不设置背景色时标题栏下方有空隙！ */
background: rgb(45, 45, 48);
padding-left: 5px;
}
/* 按钮图标 */
QDockWidget {
border: 1px solid rgb(45, 45, 48);
titlebar-close-icon: url(:/dockwidget/resources/image/dockwidget/close.png);
titlebar-normal-icon: url(:/dockwidget/resources/image/dockwidget/normal.png);
}
QDockWidget::close-button,
QDockWidget::float-button {
/* 不设置border则hover、pressed时的background颜色不生效！ */
border: 1px solid transparent;
background: rgb(45, 45, 48);
/* 会影响标题栏高度 */
/* padding: 0px; */
/* 不起作用！ */
icon-size: 32px;
}
QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
color: rgb(0, 151, 251);
background: rgb(62, 62, 64);
}
QDockWidget::close-button:pressed,
QDockWidget::float-button:pressed {
background: rgb(37, 37, 38);
padding: 1px -1px -1px 1px;
}
/* tabifyDockWidgets TabBar设置*/
QTabBar {
qproperty-drawBase: 0;
background: rgb(45, 45, 48);
}
QTabBar::tab {
color: white;
background: rgb(45, 45, 48);
padding: 4px;
border: 1px solid transparent;
}
QTabBar::tab:hover {
color: rgb(0, 151, 251);
}
QTabBar::tab:selected {
color: rgb(0, 151, 251);
background: rgb(37, 37, 38);
border-bottom-color: rgb(0, 151, 251);
}
/* 当tab个数大于一定个数时，会出现如下图左侧白线所示，这个是Qt自带的，作用是点击回到第一个tab，但是显示不好看，这里隐藏掉 */
QTabBar::tear {
width: 0px;
border: none;
}
github
https://github.com/weichangk/helloqt
参考：
https://doc.qt.io/qt-5/qdockwidget.html
https://doc.qt.io/qt-5/qmainwindow.html#resizeDocks
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qdockwidget
https://github.com/czyt1988/czyBlog/tree/master/tech/QDockWidget_VSStudioMode
https://zhuanlan.zhihu.com/p/381444869
https://forum.qt.io/topic/88409/stylesheet-and-qtabbar-which-element-is-this