Layout 佈局 ( Form 表單 )

這篇教學會介紹如何透過 PyQt5 視窗裡的 QFormLayout() 方法，進行元件的 Form 表單佈局。

快速導覽：

• 建立 Form 表單佈局
• 改用 class 的寫法
• 調整排列方式

• PyQt6 版本參考：PyQt6 教學 - Layout 佈局 ( Form 表單 )
• 因為 Google Colab 不支援 PyQt5，所以請使用本機環境 ( 參考：使用 Python 虛擬環境 ) 或使用 Anaconda Jupyter 進行實作 ( 參考：使用 Anaconda )。

建立 Form 網格佈局

當 PyQt5 建立視窗後，視窗本身是一個 Widget，因此只要使用 QFormLayout() 方法，就可以在視窗 Widget 上建立 Form 表單佈局的「layout」，當 QFormLayout 建立後，預設只會有兩個欄位，一個是 QLabel 文字，另一個是 QLineEdit 單行輸入框或 QPlainTextEdit 多行輸入框。

下方的程式碼使用 addRow(text, input) 方法在 QFormLayout 中增加內容，執行結果會出現三個「文字 + 輸入框」。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

label1 = QtWidgets.QLabel('AAA')
input1 = QtWidgets.QLineEdit(Form)
label2 = QtWidgets.QLabel('BBB')
input2 = QtWidgets.QLineEdit(Form)
label3 = QtWidgets.QLabel('CCC')
input3 = QtWidgets.QPlainTextEdit(Form)

box = QtWidgets.QWidget(Form)          # 建立放置 QFormLayout 的 Widget
box.setGeometry(10,10,200,150)

layout = QtWidgets.QFormLayout(box)    # 建立 QFormLayout
layout.addRow(label1, input1)          # QFormLayout 加入一列，內容為文字 + 輸入框
layout.addRow(label2, input2)          # QFormLayout 加入一列，內容為文字 + 輸入框
layout.addRow(label3, input3)          # QFormLayout 加入一列，內容為文字 + 輸入框

Form.show()
sys.exit(app.exec_())

改用 class 的寫法

上方的程式碼，亦可改用 class 的寫法表示。

from PyQt5 import QtWidgets
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label1 = QtWidgets.QLabel('AAA')
        self.input1 = QtWidgets.QLineEdit(self)
        self.label2 = QtWidgets.QLabel('BBB')
        self.input2 = QtWidgets.QLineEdit(self)
        self.label3 = QtWidgets.QLabel('CCC')
        self.input3 = QtWidgets.QPlainTextEdit(self)

        self.box = QtWidgets.QWidget(self)
        self.box.setGeometry(10,10,200,150)

        self.layout = QtWidgets.QFormLayout(self.box)
        self.layout.addRow(self.label1, self.input1)
        self.layout.addRow(self.label2, self.input2)
        self.layout.addRow(self.label3, self.input3)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec_())

調整排列方式

QFormLayout 提供三種排列方式，可以設定文字與輸入框的位置：

延伸上面的程式碼，透過不同方法，設定出不同的排列方式。

layout.setRowWrapPolicy(QtWidgets.QFormLayout.DontWrapRows)

layout.setRowWrapPolicy(QtWidgets.QFormLayout.WrapLongRows)

layout.setRowWrapPolicy(QtWidgets.QFormLayout.WrapAllRows)

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～