{"id":5252,"date":"2022-10-15T08:03:56","date_gmt":"2022-10-15T08:03:56","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=5252"},"modified":"2022-10-15T11:32:10","modified_gmt":"2022-10-15T11:32:10","slug":"pyqt-qdockwidget","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/pyqt\/pyqt-qdockwidget\/","title":{"rendered":"PyQt QDockWidget"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the PyQt QDockWidget<\/code> class to create a docked widget.<\/p>\n\n\n\n

Introduction to the PyQt QDockWidget class #<\/a><\/h2>\n\n\n\n

The QDockWidget<\/code> class allows you to create a widget that can be docked inside the QMainWidow<\/code> or floated as a top-level window:<\/p>\n\n\n\n

\"PyQt<\/figure>\n\n\n\n

A QDockWidget<\/code> has a title bar and a content area. The title bar displays the dock widget title, a float<\/em> button, and a close button.<\/p>\n\n\n\n

To create a dock widget and add it to the main window, you follow these steps<\/p>\n\n\n\n

First, create a dock widget using the QDockWidget<\/code> class:<\/p>\n\n\n

dock = QDockWidget(tite)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, set the dock widget features using the setFeatures()<\/code><\/code> method of the QDockWidget<\/code> object. For example, you can disable all dock features using the setFeatures()<\/code><\/code> method like this:<\/p>\n\n\n
dock.setFeatures(QDockWidget.DockWidgetFeature.NoDockWidgetFeatures)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, add the dock widget to the main window using the addDockWidget()<\/code> method. For example, the following adds the dock widget to the left docking area:<\/p>\n\n\n
self.addDockWidget(Qt.DockWidgetArea.LeftDockWidgetArea, dock)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, the dock widget is empty.<\/p>\n\n\n\n
To add widgets to a dock widget, you wrap the widgets inside the QWidget<\/code> and use the setWidget()<\/code> method of the QDockWidget<\/code> to set the widget for the dock widget.<\/p>\n\n\n
# create a widget<\/span>\nwidget = QWidget()\n\n# add widgets to the widget<\/span>\n# ...<\/span>\n\n# add the widget the dock wiget<\/span>\ndock.setWidget(widget)\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
If a dock is closed, you can show it again using the show() method:<\/p>\n\n\n
dock<\/span>.show<\/span>()<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The following program shows how to create a dock widget for the Text Editor program:<\/p>\n\n\n
import<\/span> sys\r\nimport<\/span> re\r\nfrom<\/span> pathlib import<\/span> Path\r\nfrom<\/span> PyQt6.QtWidgets import<\/span> QApplication, QMainWindow, QTextEdit, QFileDialog, QMessageBox, QToolBar, QLabel, QDockWidget, QWidget, QFormLayout, QLineEdit, QPushButton\r\nfrom<\/span> PyQt6.QtGui import<\/span> QIcon, QAction\r\nfrom<\/span> PyQt6.QtCore import<\/span> QSize\r\nfrom<\/span> PyQt6.QtCore import<\/span> Qt\r\n\r\n\r\nclass<\/span> MainWindow<\/span>(QMainWindow)<\/span>:<\/span>\r\n    def<\/span> __init__<\/span>(self, *args, **kwargs)<\/span>:<\/span>\r\n        super().__init__(*args, **kwargs)\r\n\r\n        self.setWindowIcon(QIcon('.\/assets\/editor.png'<\/span>))\r\n        self.setGeometry(100<\/span>, 100<\/span>, 500<\/span>, 300<\/span>)\r\n\r\n        self.title = 'Editor'<\/span>\r\n        self.filters = 'Text Files (*.txt)'<\/span>\r\n\r\n        self.set_title()\r\n\r\n        self.path = None<\/span>\r\n\r\n        self.text_edit = QTextEdit(self)\r\n        self.text_edit.textChanged.connect(self.text_changed)\r\n        self.setCentralWidget(self.text_edit)\r\n\r\n        menu_bar = self.menuBar()\r\n\r\n        file_menu = menu_bar.addMenu('&File'<\/span>)\r\n        edit_menu = menu_bar.addMenu('&Edit'<\/span>)\r\n        view_menu = menu_bar.addMenu('&View'<\/span>)\r\n        help_menu = menu_bar.addMenu('&Help'<\/span>)\r\n\r\n        # new menu item<\/span>\r\n        new_action = QAction(QIcon('.\/assets\/new.png'<\/span>), '&New'<\/span>, self)\r\n        new_action.setStatusTip('Create a new document'<\/span>)\r\n        new_action.setShortcut('Ctrl+N'<\/span>)\r\n        new_action.triggered.connect(self.new_document)\r\n        file_menu.addAction(new_action)\r\n\r\n        # open menu item<\/span>\r\n        open_action = QAction(QIcon('.\/assets\/open.png'<\/span>), '&Open...'<\/span>, self)\r\n        open_action.triggered.connect(self.open_document)\r\n        open_action.setStatusTip('Open a document'<\/span>)\r\n        open_action.setShortcut('Ctrl+O'<\/span>)\r\n        file_menu.addAction(open_action)\r\n\r\n        # save menu item<\/span>\r\n        save_action = QAction(QIcon('.\/assets\/save.png'<\/span>), '&Save'<\/span>, self)\r\n        save_action.setStatusTip('Save the document'<\/span>)\r\n        save_action.setShortcut('Ctrl+S'<\/span>)\r\n        save_action.triggered.connect(self.save_document)\r\n        file_menu.addAction(save_action)\r\n\r\n        file_menu.addSeparator()\r\n\r\n        # exit menu item<\/span>\r\n        exit_action = QAction(QIcon('.\/assets\/exit.png'<\/span>), '&Exit'<\/span>, self)\r\n        exit_action.setStatusTip('Exit'<\/span>)\r\n        exit_action.setShortcut('Alt+F4'<\/span>)\r\n        exit_action.triggered.connect(self.quit)\r\n        file_menu.addAction(exit_action)\r\n\r\n        # edit menu<\/span>\r\n        undo_action = QAction(QIcon('.\/assets\/undo.png'<\/span>), '&Undo'<\/span>, self)\r\n        undo_action.setStatusTip('Undo'<\/span>)\r\n        undo_action.setShortcut('Ctrl+Z'<\/span>)\r\n        undo_action.triggered.connect(self.text_edit.undo)\r\n        edit_menu.addAction(undo_action)\r\n        \r\n        redo_action = QAction(QIcon('.\/assets\/redo.png'<\/span>), '&Redo'<\/span>, self)\r\n        redo_action.setStatusTip('Redo'<\/span>)\r\n        redo_action.setShortcut('Ctrl+Y'<\/span>)\r\n        redo_action.triggered.connect(self.text_edit.redo)\r\n        edit_menu.addAction(redo_action)\r\n\r\n\r\n        view_search_action = QAction(QIcon('.\/assets\/search.png'<\/span>),'Search'<\/span>,self)\r\n        view_search_action.setStatusTip('Show the search dock'<\/span>)\r\n        view_search_action.setShortcut('Ctrl+F'<\/span>)\r\n        view_search_action.triggered.connect(self.show_search_dock)\r\n        view_menu.addAction(view_search_action)\r\n\r\n        about_action = QAction(QIcon('.\/assets\/about.png'<\/span>), 'About'<\/span>, self)\r\n        help_menu.addAction(about_action)\r\n        about_action.setStatusTip('About'<\/span>)\r\n        about_action.setShortcut('F1'<\/span>)\r\n\r\n        # toolbar<\/span>\r\n        toolbar = QToolBar('Main ToolBar'<\/span>)\r\n        self.addToolBar(toolbar)\r\n        toolbar.setIconSize(QSize(16<\/span>, 16<\/span>))\r\n\r\n        toolbar.addAction(new_action)\r\n        toolbar.addAction(save_action)\r\n        toolbar.addAction(open_action)\r\n        toolbar.addSeparator()\r\n\r\n        toolbar.addAction(undo_action)\r\n        toolbar.addAction(redo_action)\r\n        toolbar.addSeparator()\r\n\r\n        toolbar.addAction(exit_action)\r\n\r\n        # status bar<\/span>\r\n        self.status_bar = self.statusBar()\r\n\r\n        # display the a message in 5 seconds<\/span>\r\n        self.status_bar.showMessage('Ready'<\/span>, 5000<\/span>)\r\n\r\n        # add a permanent widget to the status bar<\/span>\r\n        self.character_count = QLabel(\"Length: 0\"<\/span>)\r\n        self.status_bar.addPermanentWidget(self.character_count)\r\n\r\n        # dock widget<\/span>\r\n        self.dock = QDockWidget('Search'<\/span>)\r\n        self.addDockWidget(Qt.DockWidgetArea.LeftDockWidgetArea, self.dock)\r\n\r\n        search_form = QWidget()\r\n        layout = QFormLayout(search_form)\r\n        search_form.setLayout(layout)\r\n\r\n        self.search_term = QLineEdit(search_form)\r\n        self.search_term.setPlaceholderText(\"Enter a search term\"<\/span>)\r\n        layout.addRow(self.search_term)\r\n\r\n        btn_search = QPushButton('Go'<\/span>, clicked=self.search)\r\n        layout.addRow(btn_search)\r\n        self.dock.setWidget(search_form)\r\n        self.show()\r\n\r\n    def<\/span> show_search_dock<\/span>(self)<\/span>:<\/span>\r\n        self.dock.show()\r\n\r\n    def<\/span> search<\/span>(self)<\/span>:<\/span>\r\n        term = self.search_term.text()\r\n        if<\/span> not<\/span> term:\r\n            return<\/span>\r\n\r\n        cur = self.text_edit.find(term)\r\n        if<\/span> not<\/span> cur:\r\n            self.status_bar.showMessage(f'The term \"{term}<\/span>\" was not found'<\/span>,2000<\/span>)\r\n            \r\n    def<\/span> set_title<\/span>(self, filename=None)<\/span>:<\/span>\r\n        title = f\"{filename if<\/span> filename else<\/span> 'Untitled'<\/span>}<\/span> - {self.title}<\/span>\"<\/span>\r\n        self.setWindowTitle(title)\r\n\r\n    def<\/span> confirm_save<\/span>(self)<\/span>:<\/span>\r\n        if<\/span> not<\/span> self.text_edit.document().isModified():\r\n            return<\/span> True<\/span>\r\n\r\n        message = f\"Do you want to save changes to {self.path if<\/span> self.path else<\/span> 'Untitled'<\/span>}<\/span>?\"<\/span>\r\n        MsgBoxBtn = QMessageBox.StandardButton\r\n        MsgBoxBtn = MsgBoxBtn.Save | MsgBoxBtn.Discard | MsgBoxBtn.Cancel\r\n\r\n        button = QMessageBox.question(\r\n            self, self.title, message, buttons=MsgBoxBtn\r\n        )\r\n\r\n        if<\/span> button == MsgBoxBtn.Cancel:\r\n            return<\/span> False<\/span>\r\n\r\n        if<\/span> button == MsgBoxBtn.Save:\r\n            self.save_document()\r\n\r\n        return<\/span> True<\/span>\r\n\r\n    def<\/span> new_document<\/span>(self)<\/span>:<\/span>\r\n        if<\/span> self.confirm_save():\r\n            self.text_edit.clear()\r\n            self.set_title()\r\n\r\n    def<\/span> write_file<\/span>(self)<\/span>:<\/span>\r\n        self.path.write_text(self.text_edit.toPlainText())\r\n        self.statusBar().showMessage('The file has been saved...'<\/span>, 3000<\/span>)\r\n\r\n    def<\/span> save_document<\/span>(self)<\/span>:<\/span>\r\n        # save the currently openned file<\/span>\r\n        if<\/span> (self.path):\r\n            return<\/span> self.write_file()\r\n\r\n        # save a new file<\/span>\r\n        filename, _ = QFileDialog.getSaveFileName(\r\n            self, 'Save File'<\/span>, filter=self.filters\r\n        )\r\n\r\n        if<\/span> not<\/span> filename:\r\n            return<\/span>\r\n\r\n        self.path = Path(filename)\r\n        self.write_file()\r\n        self.set_title(filename)\r\n\r\n    def<\/span> open_document<\/span>(self)<\/span>:<\/span>\r\n        filename, _ = QFileDialog.getOpenFileName(self, filter=self.filters)\r\n        if<\/span> filename:\r\n            self.path = Path(filename)\r\n            self.text_edit.setText(self.path.read_text())\r\n            self.set_title(filename)\r\n\r\n    def<\/span> quit<\/span>(self)<\/span>:<\/span>\r\n        if<\/span> self.confirm_save():\r\n            self.destroy()\r\n\r\n    def<\/span> text_changed<\/span>(self)<\/span>:<\/span>\r\n        text = self.text_edit.toPlainText()\r\n        self.character_count.setText(f'Length: {len(text)}<\/span>'<\/span>)\r\n\r\n\r\nif<\/span> __name__ == '__main__'<\/span>:\r\n    try<\/span>:\r\n        # show the app icon on the taskbar<\/span>\r\n        import<\/span> ctypes\r\n        myappid = 'yourcompany.yourproduct.subproduct.version'<\/span>\r\n        ctypes.windll.shell32.SetCurrentProcessExplicitAppUserModelID(myappid)\r\n    finally<\/span>:\r\n        app = QApplication(sys.argv)\r\n        window = MainWindow()\r\n        sys.exit(app.exec())\r\n\r\n\r\n\r\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works.<\/p>\n\n\n\n
First, create a dock widget and set its title to ‘Search’:<\/p>\n\n\n
self.dock = QDockWidget('Search'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, add the dock widget to the left docking widget area:<\/p>\n\n\n
self.addDockWidget(Qt.DockWidgetArea.LeftDockWidgetArea, dock)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Then, create a search form that will be added to the dock widget:<\/p>\n\n\n
search_form = QWidget()\nlayout = QFormLayout(search_form)\nsearch_form.setLayout(layout)\n\nself.search_term = QLineEdit(search_form)\nself.search_term.setPlaceholderText(\"Enter a search term\"<\/span>)\nlayout.addRow(self.search_term)\n\nbtn_search = QPushButton('Go'<\/span>, clicked=self.search)\nlayout.addRow(btn_search)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
After that, add the search form to the dock widget:<\/p>\n\n\n
self.dock.setWidget(search_form)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, when the user enters a search term and clicks the Go button, we use the find() method of the QTextEdit to search for the text:<\/p>\n\n\n
def<\/span> search<\/span>(self)<\/span>:<\/span>\r\n    term = self.search_term.text()\r\n    if<\/span> not<\/span> term:\r\n        return<\/span>\r\n\r\n    cur = self.text_edit.find(term)\r\n    if<\/span> not<\/span> cur:\r\n        self.status_bar.showMessage(f'The term \"{term}<\/span>\" was not found'<\/span>,2000<\/span>)\r\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
  • Use the QDockWidget<\/code> class to create a dock widget.<\/li><\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t