QT Designer+Pyqt实现类似Eclipse的嵌套布局

朴灿烈づ我的快乐病毒、 2022-09-02 00:50 9阅读 0赞

形似eclipse，支持底部往上拉，并出现滚动条  
看下这个视频：[QT Designer+pyqt的嵌套布局][QT Designer_pyqt]

配套代码：

1.  test.ui: QT Desinger生成的源码

<?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>MainWindow</class>
     <widget class="QMainWindow" name="MainWindow">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>1112</width>
        <height>739</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <widget class="QWidget" name="centralwidget"/>
      <widget class="QMenuBar" name="menubar">
       <property name="geometry">
        <rect>
         <x>0</x>
         <y>0</y>
         <width>1112</width>
         <height>26</height>
        </rect>
       </property>
      </widget>
      <widget class="QStatusBar" name="statusbar"/>
      <widget class="QDockWidget" name="dockWidget">
       <property name="styleSheet">
        <string notr="true">background-color: rgb(255, 170, 0);</string>
       </property>
       <attribute name="dockWidgetArea">
        <number>1</number>
       </attribute>
       <widget class="QWidget" name="dockWidgetContents">
        <widget class="QLabel" name="label_2">
         <property name="geometry">
          <rect>
           <x>30</x>
           <y>150</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>left</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_6">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>200</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_7">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>310</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_8">
         <property name="geometry">
          <rect>
           <x>10</x>
           <y>420</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_9">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>520</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
       </widget>
      </widget>
      <widget class="QDockWidget" name="dockWidget_2">
       <property name="styleSheet">
        <string notr="true">background-color: rgb(85, 170, 127);</string>
       </property>
       <attribute name="dockWidgetArea">
        <number>4</number>
       </attribute>
       <widget class="QWidget" name="dockWidgetContents_2">
        <widget class="QLabel" name="label">
         <property name="geometry">
          <rect>
           <x>410</x>
           <y>0</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>top</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_13">
         <property name="geometry">
          <rect>
           <x>440</x>
           <y>0</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
       </widget>
      </widget>
      <widget class="QDockWidget" name="dockWidget_3">
       <property name="styleSheet">
        <string notr="true">background-color: rgb(170, 85, 255);</string>
       </property>
       <attribute name="dockWidgetArea">
        <number>2</number>
       </attribute>
       <widget class="QWidget" name="dockWidgetContents_3">
        <widget class="QLabel" name="label_4">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>180</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>right</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_10">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>240</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_11">
         <property name="geometry">
          <rect>
           <x>30</x>
           <y>420</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_12">
         <property name="geometry">
          <rect>
           <x>30</x>
           <y>60</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
       </widget>
      </widget>
      <widget class="QDockWidget" name="dockWidget_4">
       <property name="minimumSize">
        <size>
         <width>0</width>
         <height>0</height>
        </size>
       </property>
       <property name="styleSheet">
        <string notr="true">background-color: rgb(85, 85, 255);
    color: rgb(255, 255, 255);</string>
       </property>
       <attribute name="dockWidgetArea">
        <number>8</number>
       </attribute>
       <widget class="QWidget" name="dockWidgetContents_4">
        <widget class="QLabel" name="label_3">
         <property name="geometry">
          <rect>
           <x>20</x>
           <y>0</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>TextLabel</string>
         </property>
        </widget>
        <widget class="QLabel" name="label_14">
         <property name="geometry">
          <rect>
           <x>370</x>
           <y>0</y>
           <width>55</width>
           <height>16</height>
          </rect>
         </property>
         <property name="text">
          <string>bottom</string>
         </property>
        </widget>
       </widget>
      </widget>
      <widget class="QDockWidget" name="dockWidget_5">
       <property name="minimumSize">
        <size>
         <width>0</width>
         <height>0</height>
        </size>
       </property>
       <attribute name="dockWidgetArea">
        <number>1</number>
       </attribute>
       <widget class="QWidget" name="dockWidgetContents_5">
        <widget class="QWidget" name="widget" native="true">
         <property name="geometry">
          <rect>
           <x>0</x>
           <y>0</y>
           <width>191</width>
           <height>251</height>
          </rect>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
           <height>251</height>
          </size>
         </property>
         <property name="maximumSize">
          <size>
           <width>16777215</width>
           <height>251</height>
          </size>
         </property>
         <layout class="QGridLayout" name="gridLayout">
          <item row="0" column="0">
           <widget class="QLabel" name="label_5">
            <property name="text">
             <string>TextLabel</string>
            </property>
           </widget>
          </item>
          <item row="1" column="0">
           <widget class="QLabel" name="label_15">
            <property name="text">
             <string>TextLabel</string>
            </property>
           </widget>
          </item>
          <item row="2" column="0">
           <widget class="QLabel" name="label_16">
            <property name="text">
             <string>TextLabel</string>
            </property>
           </widget>
          </item>
          <item row="3" column="0">
           <widget class="QLabel" name="label_17">
            <property name="text">
             <string>TextLabel</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </widget>
      </widget>
     </widget>
     <resources/>
     <connections/>
    </ui>

1.  test.py test.ui转python的ui

# -*- coding: utf-8 -*-
    
    # Form implementation generated from reading ui file 'D:\workspace_sunhu\python\test_gui\test.ui'
    #
    # Created by: PyQt5 UI code generator 5.15.4
    #
    # WARNING: Any manual changes made to this file will be lost when pyuic5 is
    # run again.  Do not edit this file unless you know what you are doing.
    
    
    from PyQt5 import QtCore, QtGui, QtWidgets
    
    
    class Ui_MainWindow(object):
        def setupUi(self, MainWindow):
            MainWindow.setObjectName("MainWindow")
            MainWindow.resize(1112, 739)
            self.centralwidget = QtWidgets.QWidget(MainWindow)
            self.centralwidget.setObjectName("centralwidget")
            MainWindow.setCentralWidget(self.centralwidget)
            self.menubar = QtWidgets.QMenuBar(MainWindow)
            self.menubar.setGeometry(QtCore.QRect(0, 0, 1112, 26))
            self.menubar.setObjectName("menubar")
            MainWindow.setMenuBar(self.menubar)
            self.statusbar = QtWidgets.QStatusBar(MainWindow)
            self.statusbar.setObjectName("statusbar")
            MainWindow.setStatusBar(self.statusbar)
            self.dockWidget = QtWidgets.QDockWidget(MainWindow)
            self.dockWidget.setStyleSheet("background-color: rgb(255, 170, 0);")
            self.dockWidget.setObjectName("dockWidget")
            self.dockWidgetContents = QtWidgets.QWidget()
            self.dockWidgetContents.setObjectName("dockWidgetContents")
            self.label_2 = QtWidgets.QLabel(self.dockWidgetContents)
            self.label_2.setGeometry(QtCore.QRect(30, 150, 55, 16))
            self.label_2.setObjectName("label_2")
            self.label_6 = QtWidgets.QLabel(self.dockWidgetContents)
            self.label_6.setGeometry(QtCore.QRect(20, 200, 55, 16))
            self.label_6.setObjectName("label_6")
            self.label_7 = QtWidgets.QLabel(self.dockWidgetContents)
            self.label_7.setGeometry(QtCore.QRect(20, 310, 55, 16))
            self.label_7.setObjectName("label_7")
            self.label_8 = QtWidgets.QLabel(self.dockWidgetContents)
            self.label_8.setGeometry(QtCore.QRect(10, 420, 55, 16))
            self.label_8.setObjectName("label_8")
            self.label_9 = QtWidgets.QLabel(self.dockWidgetContents)
            self.label_9.setGeometry(QtCore.QRect(20, 520, 55, 16))
            self.label_9.setObjectName("label_9")
            self.dockWidget.setWidget(self.dockWidgetContents)
            MainWindow.addDockWidget(QtCore.Qt.DockWidgetArea(1), self.dockWidget)
            self.dockWidget_2 = QtWidgets.QDockWidget(MainWindow)
            self.dockWidget_2.setStyleSheet("background-color: rgb(85, 170, 127);")
            self.dockWidget_2.setObjectName("dockWidget_2")
            self.dockWidgetContents_2 = QtWidgets.QWidget()
            self.dockWidgetContents_2.setObjectName("dockWidgetContents_2")
            self.label = QtWidgets.QLabel(self.dockWidgetContents_2)
            self.label.setGeometry(QtCore.QRect(410, 0, 55, 16))
            self.label.setObjectName("label")
            self.label_13 = QtWidgets.QLabel(self.dockWidgetContents_2)
            self.label_13.setGeometry(QtCore.QRect(440, 0, 55, 16))
            self.label_13.setObjectName("label_13")
            self.dockWidget_2.setWidget(self.dockWidgetContents_2)
            MainWindow.addDockWidget(QtCore.Qt.DockWidgetArea(4), self.dockWidget_2)
            self.dockWidget_3 = QtWidgets.QDockWidget(MainWindow)
            self.dockWidget_3.setStyleSheet("background-color: rgb(170, 85, 255);")
            self.dockWidget_3.setObjectName("dockWidget_3")
            self.dockWidgetContents_3 = QtWidgets.QWidget()
            self.dockWidgetContents_3.setObjectName("dockWidgetContents_3")
            self.label_4 = QtWidgets.QLabel(self.dockWidgetContents_3)
            self.label_4.setGeometry(QtCore.QRect(20, 180, 55, 16))
            self.label_4.setObjectName("label_4")
            self.label_10 = QtWidgets.QLabel(self.dockWidgetContents_3)
            self.label_10.setGeometry(QtCore.QRect(20, 240, 55, 16))
            self.label_10.setObjectName("label_10")
            self.label_11 = QtWidgets.QLabel(self.dockWidgetContents_3)
            self.label_11.setGeometry(QtCore.QRect(30, 420, 55, 16))
            self.label_11.setObjectName("label_11")
            self.label_12 = QtWidgets.QLabel(self.dockWidgetContents_3)
            self.label_12.setGeometry(QtCore.QRect(30, 60, 55, 16))
            self.label_12.setObjectName("label_12")
            self.dockWidget_3.setWidget(self.dockWidgetContents_3)
            MainWindow.addDockWidget(QtCore.Qt.DockWidgetArea(2), self.dockWidget_3)
            self.dockWidget_4 = QtWidgets.QDockWidget(MainWindow)
            self.dockWidget_4.setMinimumSize(QtCore.QSize(0, 0))
            self.dockWidget_4.setStyleSheet("background-color: rgb(85, 85, 255);\n"
    "color: rgb(255, 255, 255);")
            self.dockWidget_4.setObjectName("dockWidget_4")
            self.dockWidgetContents_4 = QtWidgets.QWidget()
            self.dockWidgetContents_4.setObjectName("dockWidgetContents_4")
            self.label_3 = QtWidgets.QLabel(self.dockWidgetContents_4)
            self.label_3.setGeometry(QtCore.QRect(20, 0, 55, 16))
            self.label_3.setObjectName("label_3")
            self.label_14 = QtWidgets.QLabel(self.dockWidgetContents_4)
            self.label_14.setGeometry(QtCore.QRect(370, 0, 55, 16))
            self.label_14.setObjectName("label_14")
            self.dockWidget_4.setWidget(self.dockWidgetContents_4)
            MainWindow.addDockWidget(QtCore.Qt.DockWidgetArea(8), self.dockWidget_4)
            self.dockWidget_5 = QtWidgets.QDockWidget(MainWindow)
            self.dockWidget_5.setMinimumSize(QtCore.QSize(0, 0))
            self.dockWidget_5.setObjectName("dockWidget_5")
            self.dockWidgetContents_5 = QtWidgets.QWidget()
            self.dockWidgetContents_5.setObjectName("dockWidgetContents_5")
            self.widget = QtWidgets.QWidget(self.dockWidgetContents_5)
            self.widget.setGeometry(QtCore.QRect(0, 0, 191, 251))
            self.widget.setMinimumSize(QtCore.QSize(0, 251))
            self.widget.setMaximumSize(QtCore.QSize(16777215, 251))
            self.widget.setObjectName("widget")
            self.gridLayout = QtWidgets.QGridLayout(self.widget)
            self.gridLayout.setContentsMargins(0, 0, 0, 0)
            self.gridLayout.setObjectName("gridLayout")
            self.label_5 = QtWidgets.QLabel(self.widget)
            self.label_5.setObjectName("label_5")
            self.gridLayout.addWidget(self.label_5, 0, 0, 1, 1)
            self.label_15 = QtWidgets.QLabel(self.widget)
            self.label_15.setObjectName("label_15")
            self.gridLayout.addWidget(self.label_15, 1, 0, 1, 1)
            self.label_16 = QtWidgets.QLabel(self.widget)
            self.label_16.setObjectName("label_16")
            self.gridLayout.addWidget(self.label_16, 2, 0, 1, 1)
            self.label_17 = QtWidgets.QLabel(self.widget)
            self.label_17.setObjectName("label_17")
            self.gridLayout.addWidget(self.label_17, 3, 0, 1, 1)
            self.dockWidget_5.setWidget(self.dockWidgetContents_5)
            MainWindow.addDockWidget(QtCore.Qt.DockWidgetArea(1), self.dockWidget_5)
    
            self.retranslateUi(MainWindow)
            QtCore.QMetaObject.connectSlotsByName(MainWindow)
    
        def retranslateUi(self, MainWindow):
            _translate = QtCore.QCoreApplication.translate
            MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
            self.label_2.setText(_translate("MainWindow", "left"))
            self.label_6.setText(_translate("MainWindow", "TextLabel"))
            self.label_7.setText(_translate("MainWindow", "TextLabel"))
            self.label_8.setText(_translate("MainWindow", "TextLabel"))
            self.label_9.setText(_translate("MainWindow", "TextLabel"))
            self.label.setText(_translate("MainWindow", "top"))
            self.label_13.setText(_translate("MainWindow", "TextLabel"))
            self.label_4.setText(_translate("MainWindow", "right"))
            self.label_10.setText(_translate("MainWindow", "TextLabel"))
            self.label_11.setText(_translate("MainWindow", "TextLabel"))
            self.label_12.setText(_translate("MainWindow", "TextLabel"))
            self.label_3.setText(_translate("MainWindow", "TextLabel"))
            self.label_14.setText(_translate("MainWindow", "bottom"))
            self.label_5.setText(_translate("MainWindow", "TextLabel"))
            self.label_15.setText(_translate("MainWindow", "TextLabel"))
            self.label_16.setText(_translate("MainWindow", "TextLabel"))
            self.label_17.setText(_translate("MainWindow", "TextLabel"))

1.  demo.py 逻辑部分

from PyQt5 import QtWidgets
    from PyQt5.QtCore import Qt
    from PyQt5.QtWidgets import QScrollArea
    
    from gui.test import Ui_MainWindow
    
    class mywindow(QtWidgets.QMainWindow, Ui_MainWindow):
    
        def __init__(self):
            super(mywindow, self).__init__()
            self.setupUi(self)
            self.reset_ui()
    
        def reset_ui(self):
            # TODO 重置UI
            p = self.window().takeCentralWidget()
            if p:
                p.deleteLater()
            self.window().setDockNestingEnabled(True)
            m_docks = []
            m_docks.append(self.dockWidget)
            m_docks.append(self.dockWidget_2)
            m_docks.append(self.dockWidget_3)
            m_docks.append(self.dockWidget_4)
            m_docks.append(self.dockWidget_5)
            # remove all dock widgets
            for i in range(0, len(m_docks)):
                self.window().removeDockWidget(m_docks[i])
            self.window().addDockWidget(Qt.LeftDockWidgetArea, self.dockWidget)
            self.window().splitDockWidget(self.dockWidget, self.dockWidget_2, Qt.Horizontal)
            self.window().splitDockWidget(self.dockWidget_2, self.dockWidget_3, Qt.Horizontal)
            self.window().splitDockWidget(self.dockWidget_2, self.dockWidget_5, Qt.Vertical)
            self.window().splitDockWidget(self.dockWidget_5, self.dockWidget_4, Qt.Vertical)
            for i in range(0, len(m_docks)):
                m_docks[i].show()
            q_scroll_area_center = QScrollArea()
            q_scroll_area_center.setWidgetResizable(True)
            q_scroll_area_center.setWidget(self.widget)
            self.dockWidget_5.setWidget(q_scroll_area_center)
    
    if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        ui = mywindow()
        ui.show()
        sys.exit(app.exec_())

[QT Designer_pyqt]: https://www.bilibili.com/video/BV1pU4y1H7da/