PyQt5之佈局管理

時間 2019-12-08

標籤 pyqt5 pyqt 佈局管理简体版

原文原文鏈接

目錄python

注：原創不易，轉載請務必註明原做者和出處，感謝支持！app

一寫在開頭

1.1 本文內容

本文內容爲PyQt5中的佈局管理。具體內容爲:函數

絕對佈局
佈局類
- 水平佈局（QHBoxLayout）
- 垂直佈局（QVBoxLayout）
- 網格佈局（QGridLayout）
- 表單佈局（QFormLayout）
嵌套佈局
佈局管理器QSplitter

二絕對佈局

絕對佈局主要用到兩個方法，分別是move()和setGeometry()。佈局

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QLabel, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
        
    def initUI(self):
        lb1 = QLabel('歡迎', self)
        lb1.move(15, 10)
        lb2 = QLabel('學習', self)
        lb2.move(35, 40)
        lb3 = QLabel('PyQt 5', self)
        lb3.move(55, 70)
        self.setGeometry(300, 300, 250, 150)
        self.setWindowTitle('PyQt 5中的絕對定位')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

絕對佈局的優勢：學習

能夠直接定位每一個控件的位置

絕對佈局的缺點：字體

若是改變一個窗口的大小，窗口中控件的大小和位置不會隨之改變
所生成的窗口在不一樣的操做系統下看起來可能不同
在程序中改變字體時可能會破壞佈局
若是修改佈局，好比新增一個控件，就必須所有從新佈局，既煩瑣又費時

三佈局類

3.1 水平佈局（QHBoxLayout）和垂直佈局（QVBoxLayout）

本小節涉及到的方法及其描述以下：spa

方法	描述
addLayout(self, QLayout, stretch = 0)	在窗口中添加布局，stretch爲伸縮量，默認爲0
addWidget(self, QWidget, stretch, Qt.Alignment alignment)	在佈局中添加控件，stretch爲伸縮量，alignment爲對齊方式
addSpacing(self, int)	添加伸縮量，具體使用方法見下面的例子

對齊方式Qt.Alignment可能取值有：操作系統

參數	描述
Qt.AlignLeft	水平居左對齊
Qt.AlignRight	水平居右對齊
Qt.AlignCenter	水平居中對齊
Qt.AlignJustify	水平兩端對齊
Qt.AlignTop	垂直靠上對齊
Qt.AlignBottom	垂直靠下對齊
Qt.AlignVCenter	垂直居中對齊

3.2 水平佈局和垂直佈局實例

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QHBoxLayout, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()

        hbox = QHBoxLayout()
        hbox.addWidget(QPushButton(str(1)))
        hbox.addWidget(QPushButton(str(2)))
        hbox.addWidget(QPushButton(str(3)))
        hbox.addWidget(QPushButton(str(4)))
        hbox.addWidget(QPushButton(str(5)))
        self.setLayout(hbox)

        self.setWindowTitle('QHBoxLayout')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QWidget, QPushButton, QHBoxLayout, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()

        hbox = QHBoxLayout()
        hbox.addWidget(QPushButton(str(1)), 0, Qt.AlignTop)
        hbox.addWidget(QPushButton(str(2)), 0, Qt.AlignTop | Qt.AlignLeft)
        hbox.addWidget(QPushButton(str(3)), 0)
        hbox.addWidget(QPushButton(str(4)), 0, Qt.AlignLeft | Qt.AlignBottom)
        hbox.addWidget(QPushButton(str(5)), 0, Qt.AlignTop)

        self.setLayout(hbox)
        self.setWindowTitle('水平佈局')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

關於addSpacing()的用法見下面的實例。3d

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QHBoxLayout, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()

        btn1 = QPushButton()
        btn2 = QPushButton()
        btn3 = QPushButton()
        btn1.setText(str(1))
        btn2.setText(str(2))
        btn3.setText(str(3))

        # addSpacing(1)表示設置伸縮量爲1
        hbox = QHBoxLayout()
        hbox.addStretch(1)
        hbox.addWidget(btn1)
        hbox.addStretch(1)
        hbox.addWidget(btn2)
        hbox.addStretch(1)
        hbox.addWidget(btn3)
        hbox.addStretch(1)

        self.setLayout(hbox)
        self.setWindowTitle('addStretch')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QHBoxLayout, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()

        btn1 = QPushButton()
        btn2 = QPushButton()
        btn3 = QPushButton()
        btn1.setText(str(1))
        btn2.setText(str(2))
        btn3.setText(str(3))

        hbox = QHBoxLayout()
        hbox.addStretch(0)
        hbox.addWidget(btn1)
        hbox.addWidget(btn2)
        hbox.addWidget(btn3)
        hbox.addStretch(0)

        self.setLayout(hbox)
        self.setWindowTitle('addStretch')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

3.3 網格佈局（QGridLayout）

網格佈局須要用到的方法及其描述以下。code

方法	描述
addWidget(QWidget widget, int row, int col, int alignment = 0)	給網格佈局添加控件。 widget：要添加的控件 row：位置所在行 col：位置所在列 alignment：對齊方式
addWidget(QWidget widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, int alignment)	當所添加的控件跨越多行或多列時，使用這個函數 fromRow：起始行 fromColumn：起始列 rowSpan：控件跨越的行 columnSpan：控件跨越的列
setSpacing(int spacing)	設置控件在水平和垂直方向的間隔

3.4 網格佈局實例

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QGridLayout, QPushButton, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        grid = QGridLayout()
        self.setLayout(grid)

        names = ['Cls', 'Back', '', 'Close',
                '7', '8', '9', '/',
                '4', '5', '6', '*',
                '1', '2', '3', '-',
                '0', '.', '=', '+']
        positions = [(i, j) for i in range(5) for j in range(4)]
        for position, name in zip(positions, names):
            if name == '':
                continue
            btn = QPushButton(name)
            grid.addWidget(btn, *position)

        self.move(300, 150)
        self.setWindowTitle('網格佈局')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QLabel, QLineEdit, QTextEdit, QGridLayout, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        title = QLabel('標題')
        author = QLabel('提交人')
        review = QLabel('申告內容')

        titleEdit = QLineEdit()
        authorEdit = QLineEdit()
        reviewEdit = QTextEdit()

        grid = QGridLayout()
        grid.setSpacing(10)
        self.setLayout(grid)

        grid.addWidget(title, 0, 0)
        grid.addWidget(titleEdit, 0, 1)
        grid.addWidget(author, 1, 0)
        grid.addWidget(authorEdit, 1, 1)
        grid.addWidget(review, 2, 0)
        grid.addWidget(reviewEdit, 2, 1, 2, 1)

        self.setGeometry(300, 300, 350, 300)
        self.setWindowTitle('故障申報')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

3.5 表單佈局（QFormLayout）

QFormLayout是label-field式的表單佈局，顧名思義，就是實現表單方式的佈局。表單是提示用戶進行交互的一種模式，其主要由兩列組成，第一列用於顯示信息，給用戶提示，通常叫作label域；第二列須要用戶進行選擇或者輸入，通常叫作field域。label與field的關係就是label關聯field。

QFormLayout須要用到addRow(label, field)方法。

3.6 表單佈局實例

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QWidget, QFormLayout, QLabel, QLineEdit, QApplication

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        form = QFormLayout()

        lb1 = QLabel('標籤1')
        le1 = QLineEdit()
        lb2 = QLabel('標籤2')
        le2 = QLineEdit()
        lb3 = QLabel('標籤3')
        le3 = QLineEdit()

        form.addRow(lb1, le1)
        form.addRow(lb2, le2)
        form.addRow(lb3, le3)

        self.resize(400, 100)
        self.setLayout(form)
        self.setWindowTitle('QFormLayout')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

3.7 嵌套佈局

所謂嵌套佈局就是綜合應用上述的佈局進行嵌套以完成總體窗口的佈局。下面是有關嵌套佈局的兩個等價實例。注意第二個實例更加簡單。

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QVBoxLayout, \
                            QGridLayout, QFormLayout, QPushButton

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('嵌套佈局')

        # 全局佈局：水平
        wlayout = QHBoxLayout()
        # 局部佈局：水平，垂直，網格，表單
        hlayout = QHBoxLayout()
        vlayout = QVBoxLayout()
        glayout = QGridLayout()
        flayout = QFormLayout()

        # 爲局部佈局添加控件
        hlayout.addWidget(QPushButton(str(1)))
        hlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        glayout.addWidget(QPushButton(str(5)), 0, 0)
        glayout.addWidget(QPushButton(str(6)), 0, 1)
        glayout.addWidget(QPushButton(str(7)), 1, 0)
        glayout.addWidget(QPushButton(str(8)), 1, 1)
        flayout.addWidget(QPushButton(str(9)))
        flayout.addWidget(QPushButton(str(10)))
        flayout.addWidget(QPushButton(str(11)))
        flayout.addWidget(QPushButton(str(12)))

        # 準備4個控件
        hwg = QWidget()
        vwg = QWidget()
        gwg = QWidget()
        fwg = QWidget()

        # 使用4個控件設置局部佈局
        hwg.setLayout(hlayout)
        vwg.setLayout(vlayout)
        gwg.setLayout(glayout)
        fwg.setLayout(flayout)

        # 將4個控件添加到全局佈局中
        wlayout.addWidget(hwg)
        wlayout.addWidget(vwg)
        wlayout.addWidget(gwg)
        wlayout.addWidget(fwg)

        self.setLayout(wlayout)
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

#!/usr/bin/env python3

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QVBoxLayout, \
                            QGridLayout, QFormLayout, QPushButton

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('嵌套佈局')
        self.resize(700, 200)

        # 全局控件（注意參數self），用於承載全局佈局
        wwg = QWidget(self)

        # 全局佈局
        wl = QHBoxLayout(wwg)
        hlayout = QHBoxLayout()
        vlayout = QVBoxLayout()
        glayout = QGridLayout()
        flayout = QFormLayout()

        # 爲局部佈局添加控件
        hlayout.addWidget(QPushButton(str(1)))
        hlayout.addWidget(QPushButton(str(2)))
        vlayout.addWidget(QPushButton(str(3)))
        vlayout.addWidget(QPushButton(str(4)))
        glayout.addWidget(QPushButton(str(5)), 0, 0)
        glayout.addWidget(QPushButton(str(6)), 0, 1)
        glayout.addWidget(QPushButton(str(7)), 1, 0)
        glayout.addWidget(QPushButton(str(8)), 1, 1)
        flayout.addWidget(QPushButton(str(9)))
        flayout.addWidget(QPushButton(str(10)))
        flayout.addWidget(QPushButton(str(11)))
        flayout.addWidget(QPushButton(str(12)))

        # 在佈局佈局wl中添加局部佈局
        wl.addLayout(hlayout)
        wl.addLayout(vlayout)
        wl.addLayout(glayout)
        wl.addLayout(flayout)

        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())

3.8 佈局管理器QSplitter

PyQt提供了一個特殊的佈局管理器QSplitter，它能夠動態地拖動子控件之間的邊界，算是一個動態的佈局管理器。

與QSplitter相關的方法及其描述以下。

方法	描述
addWidget()	將控件添加到QSplitter管理器的佈局中
indexOf()	返回控件在QSplitter管理器中的索引
insertWidget()	根據索引將一個控件插入到QSplitter管理器中
setOrientation()	設置佈局方法 Qt.Horizontal：水平方向 Qt.Vertical：垂直方向
setSizes()	設置控件的初始化大小
count()	返回小控件在QSplitter管理器中的數量

#!/usr/bin/env python3

import sys
from PyQt5.QtWidgets import QWidget, QHBoxLayout, QSplitter, QTextEdit, \
                            QApplication, QFrame
from PyQt5.QtCore import Qt

class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        hbox = QHBoxLayout(self)
        self.setWindowTitle('QSplitter')
        self.setGeometry(300, 300, 300, 200)

        topleft = QFrame()
        topleft.setFrameShape(QFrame.StyledPanel)

        bottom = QFrame()
        bottom.setFrameShape(QFrame.StyledPanel)

        sp1 = QSplitter(Qt.Horizontal)
        te = QTextEdit()
        sp1.addWidget(topleft)
        sp1.addWidget(te)
        sp1.setSizes([100, 200])

        sp2 = QSplitter(Qt.Vertical)
        sp2.addWidget(sp1)
        sp2.addWidget(bottom)

        hbox.addWidget(sp2)
        self.setLayout(hbox)
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = Window()
    sys.exit(app.exec_())