本篇 ShengYu 介紹 Python PyQt5 QGridLayout 網格佈局用法與範例，QGridLayout 能讓 UI 元件網格狀的方式排列，相較於手動排版 QGridLayout 能夠讓開發者很快速方便地讓元件佈局。
以下的 Python PyQt5 QGridLayout 用法與範例將分為這幾部分，
- PyQt5 QGridLayout 基本用法
- PyQt5 QGridLayout 跨越多欄或多列
PyQt5 QGridLayout 基本用法
這邊示範 PyQt5 QGridLayout 基本用法，QGridLayout.addWidget() 的 3 種函式參數介紹如下，1
2
3QGridLayout.addWidget(QWidget)
QGridLayout.addWidget(QWidget, int row, int column, Qt.Alignment alignment=0)
QGridLayout.addWidget(QWidget, int row, int column, int rowSpan, int columnSpan, Qt.Alignment alignment=0)
以下範例是將多個按鈕放入一個 QGridLayout 網格佈局上，這邊單純的介紹 GridLayout 網格佈局就不示範按下按鈕的事件處理，想要進一步了解按鈕事件的可以參考 PyQt5 QPushButton 按鈕用法與範例這篇，1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout, QPushButton)
class MyWidget(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('my window')
self.setGeometry(50, 50, 200, 150)
layout = QGridLayout()
self.setLayout(layout)
self.mybutton1 = QPushButton('button 1', self)
layout.addWidget(self.mybutton1, 0, 0)
self.mybutton2 = QPushButton('button 2', self)
layout.addWidget(self.mybutton2, 0, 1)
self.mybutton3 = QPushButton('button 3', self)
layout.addWidget(self.mybutton3, 0, 2)
self.mybutton4 = QPushButton('button 4', self)
layout.addWidget(self.mybutton4, 1, 0)
self.mybutton5 = QPushButton('button 5', self)
layout.addWidget(self.mybutton5, 1, 1)
self.mybutton6 = QPushButton('button 6', self)
layout.addWidget(self.mybutton6, 1, 2)
self.mybutton7 = QPushButton('button 7', self)
layout.addWidget(self.mybutton7, 2, 0)
self.mybutton8 = QPushButton('button 8', self)
layout.addWidget(self.mybutton8, 2, 1)
self.mybutton9 = QPushButton('button 9', self)
layout.addWidget(self.mybutton9, 2, 2)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = MyWidget()
w.show()
sys.exit(app.exec_())
結果圖如下，
PyQt5 QGridLayout 跨越多欄或多列
上述範例介紹每一個元件都是一個網格單位，但有時需要一個網格單位，例如水平橫跨 3 網格單位或者垂直橫跨 2 網格單位等等需求，
這邊示範將不同的 UI 元件放入一個 QGridLayout 垂直佈局上，分別是 1 個 label 1 個 lineedit 文字輸入框與 5 個 button 按鈕，label 與 lineedit 的用法與範例可以分別參考 PyQt5 QLabel 標籤用法與範例與 PyQt5 QLineEdit 文字輸入框用法與範例這兩篇，下例中的 mylineedit 是水平橫跨 2 網格單位，mybutton1 是水平橫跨 2 網格單位，而 mybutton2 是垂直橫跨 2 網格單位，1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout,
QLabel, QLineEdit, QPushButton)
class MyWidget(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('my window')
self.setGeometry(50, 50, 200, 150)
layout = QGridLayout()
self.setLayout(layout)
self.mylabel = QLabel('Input:', self)
layout.addWidget(self.mylabel, 0, 0)
self.mylineedit = QLineEdit(self)
layout.addWidget(self.mylineedit, 0, 1, 1, 2)
self.mybutton1 = QPushButton('button 1', self)
layout.addWidget(self.mybutton1, 1, 0, 1, 3)
self.mybutton2 = QPushButton('button 2', self)
layout.addWidget(self.mybutton2, 2, 0, 2, 1)
self.mybutton3 = QPushButton('button 3', self)
layout.addWidget(self.mybutton3, 2, 1)
self.mybutton4 = QPushButton('button 4', self)
layout.addWidget(self.mybutton4, 2, 2)
self.mybutton5 = QPushButton('button 5', self)
layout.addWidget(self.mybutton5, 3, 1)
if __name__ == '__main__':
app = QApplication(sys.argv)
w = MyWidget()
w.show()
sys.exit(app.exec_())
結果圖如下，
以上就是 Python PyQt5 QGridLayout 網格佈局用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！