Search code examples
pythonpyqtpyqt5qt5

PyQt5 move QDockWidget by dragging tab


The clip below shows dragging QDockWidgets between docking areas by dragging the tabs (not the title bar) - but when I try this with PyQt 5.15.0 it doesn't work, the tabs won't detach. How can I enable this behavior?

What I want:
https://www.screencast.com/t/lv83SoyVUhbd (from https://woboq.com/blog/qdockwidget-changes-in-56.html)

What I get:
https://www.screencast.com/t/bIUj4vLNTF

My code:

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt

if __name__ == "__main__":
    app = QtWidgets.QApplication([])

    main = QtWidgets.QMainWindow()

    dock1 = QtWidgets.QDockWidget("Blue")
    dock2 = QtWidgets.QDockWidget("Green")
    dock3 = QtWidgets.QDockWidget("Red")

    content1 = QtWidgets.QWidget()
    content1.setStyleSheet("background-color:blue;")

    content2 = QtWidgets.QWidget()
    content2.setStyleSheet("background-color:green;")

    content3 = QtWidgets.QWidget()
    content3.setStyleSheet("background-color:red;")

    dock1.setWidget(content1)
    dock2.setWidget(content2)
    dock3.setWidget(content3)

    dock1.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock2.setAllowedAreas(Qt.AllDockWidgetAreas)
    dock3.setAllowedAreas(Qt.AllDockWidgetAreas)

    main.addDockWidget(Qt.LeftDockWidgetArea, dock1)
    main.tabifyDockWidget(dock1, dock2)
    main.addDockWidget(Qt.RightDockWidgetArea, dock3)

    main.resize(400, 200)
    main.show()

    app.exec_()

Solution

  • The solution to my question was enabling the GroupedDragging with setDockOptions on the QMainWindow. I managed to get a really nice appearance & behavior exactly like I wanted with the code below.

    Demo: https://www.screencast.com/t/GU5Z2ysT

    from PyQt5 import QtCore, QtGui, QtWidgets
    from PyQt5.QtCore import Qt
    
    
    class DockWidget(QtWidgets.QDockWidget):
        def __init__(self, title: str):
            super().__init__(title)
            self.setTitleBarWidget(QtWidgets.QWidget())
            self.dockLocationChanged.connect(self.on_dockLocationChanged)
    
        def on_dockLocationChanged(self):
            main: QtWidgets.QMainWindow = self.parent()
            all_dock_widgets = main.findChildren(QtWidgets.QDockWidget)
    
            for dock_widget in all_dock_widgets:
                sibling_tabs = main.tabifiedDockWidgets(dock_widget)
                # If you pull a tab out of a group the other tabs still see it as a sibling while dragging...
                sibling_tabs = [s for s in sibling_tabs if not s.isFloating()]
    
                if len(sibling_tabs) != 0:
                    # Hide title bar
                    dock_widget.setTitleBarWidget(QtWidgets.QWidget())
                else:
                    # Re-enable title bar
                    dock_widget.setTitleBarWidget(None)
    
        def minimumSizeHint(self) -> QtCore.QSize:
            return QtCore.QSize(100, 100)
    
    
    if __name__ == "__main__":
        app = QtWidgets.QApplication([])
        main = QtWidgets.QMainWindow()
    
        dock1 = DockWidget("Blue")
        dock2 = DockWidget("Green")
        dock3 = DockWidget("Red")
    
        content1 = QtWidgets.QWidget()
        content1.setStyleSheet("background-color:blue;")
        content1.setMinimumSize(QtCore.QSize(50, 50))
    
        content2 = QtWidgets.QWidget()
        content2.setStyleSheet("background-color:green;")
        content2.setMinimumSize(QtCore.QSize(50, 50))
    
        content3 = QtWidgets.QWidget()
        content3.setStyleSheet("background-color:red;")
        content3.setMinimumSize(QtCore.QSize(50, 50))
    
        dock1.setWidget(content1)
        dock2.setWidget(content2)
        dock3.setWidget(content3)
    
        dock1.setAllowedAreas(Qt.AllDockWidgetAreas)
        dock2.setAllowedAreas(Qt.AllDockWidgetAreas)
        dock3.setAllowedAreas(Qt.AllDockWidgetAreas)
    
        main.addDockWidget(Qt.LeftDockWidgetArea, dock1)
        main.tabifyDockWidget(dock1, dock2)
        main.addDockWidget(Qt.RightDockWidgetArea, dock3)
    
        main.setDockOptions(main.GroupedDragging | main.AllowTabbedDocks | main.AllowNestedDocks)
    
        main.setTabPosition(Qt.AllDockWidgetAreas, QtWidgets.QTabWidget.North)
        main.resize(400, 200)
        main.show()
    
        app.exec_()