PyQt5 網格佈局

PyQt5 支援網格佈局,名為 QGridLayout。視窗小控制元件可以在水平和垂直方向上新增到網格中。具有小控制元件的網格佈局示例如下所示:

![PyQt5 網格佈局](/img/Tutorial/PyQt5/PyQt5 grid layout.png)

PyQt5 網格佈局示例

下面的示例建立網格:

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout, QGroupBox, QDialog, QVBoxLayout, QGridLayout
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import pyqtSlot

class App(QDialog):

    def __init__(self):
        super().__init__()
        self.title = 'PyQt5 layout - tastones.com'
        self.left = 10
        self.top = 10
        self.width = 320
        self.height = 100
        self.initUI()

    def initUI(self):
        self.setWindowTitle(self.title)
        self.setGeometry(self.left, self.top, self.width, self.height)

        self.createGridLayout()

        windowLayout = QVBoxLayout()
        windowLayout.addWidget(self.horizontalGroupBox)
        self.setLayout(windowLayout)

        self.show()

    def createGridLayout(self):
        self.horizontalGroupBox = QGroupBox("Grid")
        layout = QGridLayout()
        layout.setColumnStretch(1, 4)
        layout.setColumnStretch(2, 4)

        layout.addWidget(QPushButton('1'),0,0) 
        layout.addWidget(QPushButton('2'),0,1) 
        layout.addWidget(QPushButton('3'),0,2) 
        layout.addWidget(QPushButton('4'),1,0) 
        layout.addWidget(QPushButton('5'),1,1) 
        layout.addWidget(QPushButton('6'),1,2) 
        layout.addWidget(QPushButton('7'),2,0) 
        layout.addWidget(QPushButton('8'),2,1) 
        layout.addWidget(QPushButton('9'),2,2) 

        self.horizontalGroupBox.setLayout(layout)



if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = App()
    sys.exit(app.exec_())

PyQt5 網路佈局程式碼說明

我們匯入 gridlayout 和其他:

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout, QGroupBox, QDialog, QVBoxLayout, QGridLayout

在方法 createGridLayout() 中,我們使用標題建立網格並設定大小。

def createGridLayout(self):
    self.horizontalGroupBox = QGroupBox("Grid")
    layout = QGridLayout()
    layout.setColumnStretch(1, 4)
    layout.setColumnStretch(2, 4)

使用新增小控制元件

layout.addWidget(Widget,X,Y)

最後我們設定了佈局。