【PyQt5-Qt Designer】界面布局

 PyQt5 界面布局詳談

箱式布局

QHBoxLayout和QVBoxLayout是基本的布局類，它們在水平和垂直方向上排列小部件

效果圖：

 

from PyQt5.QtCore import Qt
from PyQt5.QtGui import (QPainter, QColor, QPen)
import sys
from PyQt5.QtWidgets import (QApplication,QWidget,QLabel,QHBoxLayout,QVBoxLayout,QPushButton)

class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUi()

    def initUi(self):
        self.setGeometry(300,300,400,300)
        self.setWindowTitle("pyqt窗口布局1")
        self.btn1 = QPushButton("按鈕1")
        self.btn2 = QPushButton("按鈕2")
        self.btn3 = QPushButton("按鈕3")

        hbox = QHBoxLayout()
        vbox = QVBoxLayout()
        vbox.addStretch(5)    #給垂直方向添加伸縮比例為5
        vbox.addLayout(hbox)
        hbox.addStretch(1)
        hbox.addWidget(self.btn1)
        hbox.addStretch(1)
        hbox.addWidget(self.btn2)
        hbox.addStretch(1)
        hbox.addWidget(self.btn3)
        hbox.addStretch(4)
        vbox.addStretch(1)
        self.setLayout(vbox)

        self.btn1.clicked.connect(self.showmsg)
        self.btn2.clicked.connect(self.showmsg)
        self.btn3.clicked.connect(self.showmsg)

    def showmsg(self):
        sender = self.sender()
        print("點擊的按鈕指針為：{}".format(sender))
        print("點擊的按鈕名稱是：{}".format(sender.text()))
        print("點擊之后按鈕名稱變化了")
        sender.setText("被點擊了！")

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ui = Example()
    ui.show()
    sys.exit(app.exec_())
#

addStretch(1)，這個函數如何確定其中的參數大小，這里簡單的說一下。

addStretch函數的作用是在布局器中增加一個伸縮量，里面的參數表示QSpacerItem的個數，默認值為零，會將你放在layout中的空間壓縮成默認的大小。

例如用addStretch函數實現將QHBoxLayout的布局器的空白空間分配。

水平布局上 四個addStretch()函數用於在button按鈕間增加伸縮量，伸縮量的比例為1:1:1:4，意思就是將button以外的空白地方按設定的比例等分為9份並按照設定的順序放入布局器中。

垂直布局上 兩個addStretch()函數用於在button按鈕間增加伸縮量，伸縮量的比例為5:1，將button以外的空白地方按設定的比例等分為6份並按照設定的順序放入布局器中。

 

格柵布局，也被稱作網格布局（多行多列)

柵格布局將位於其中的窗口部件放入一個網狀的柵格之中。QGridLayout 需要將提供給它的空間划分成的行和列，並把每個窗口部件插入並管理到正確的單元格。

柵格布局是這樣工作的：它計算了位於其中的空間，然后將它們合理的划分成若干個行（row）和列（column），並把每個由它管理的窗口部件放置在合適的單元之中，這里所指的單元（cell）即是指由行和列交叉所划分出來的空間。

坐標分布是這樣的：

下面這個例子就是采用格柵布局制作的一個計算器界面，當然在功能上按下按鈕只是能顯示而已，不能進行具體的計算，后期我們會制作一個完整的計算器。

 效果：

全部代碼：

"""
網格布局
2018-12-27  20:40
author：xiong
"""
import sys
from PyQt5.QtWidgets import (QApplication,QWidget,QLCDNumber,QGridLayout,QPushButton,QLineEdit)
from PyQt5.QtCore import QSize,Qt
from PyQt5.QtGui import QFont

class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUi()

    def initUi(self):
        self.setGeometry(300,300,300,270)
        self.setWindowTitle("pyqt網格布局")
        self.grid = QGridLayout()
        self.display = QLineEdit("0")
        self.display.setAlignment(Qt.AlignRight)    ##設置單行輸入框字靠右顯示
        self.display.setReadOnly(1)     ##設置單行輸入框只讀
        self.display.setFont(QFont("Timers",21))    #設置單行輸入框字體
        self.grid.addWidget(self.display, 0, 0, 3, 4)
        self.grid.setSpacing(10)
        positions = [(i, j) for i in range(4, 9) for j in range(0, 4)]
        btnNames = ['Clear', '/', '*', '-',
                 '7', '8', '9', '',
                 '4', '5', '6', '',
                 '1', '2', '3', '',
                 '', '', '.', '']
        btn1 = QPushButton("+")
        btn1.setFixedSize(QSize(60, 70))    #設置按鈕尺寸60*70
        self.grid.addWidget(btn1, 5, 3, 2, 1)
        btn2 = QPushButton("Enter")
        btn2.setFixedSize(QSize(60, 70))    
        self.grid.addWidget(btn2, 7, 3, 2, 1)
        btn2.clicked.connect(self.btnClick)
        btn3 = QPushButton("0")
        btn3.setFixedSize(QSize(130, 30))
        self.grid.addWidget(btn3, 8, 0, 1, 3)
        btn3.clicked.connect(self.btnClick)
        self.num_input = []
        for position, name in zip(positions, btnNames):
            if name == "":
                continue
            btn = QPushButton(name)
            btn.setFixedSize(QSize(60, 30))
            btn.clicked.connect(self.btnClick)
            self.grid.addWidget(btn ,*position) # *(1,2) 去掉括號變為  1,2

        self.setLayout(self.grid)
    #定義按鈕點擊事件
    def btnClick(self):
        sender = self.sender().text()
        li = ['/','*','-','+']
        if sender in li:
            pass
        elif sender=="Clear":
            self.display.setText("0")
        elif sender=="Enter":
            print("輸出打印結果：{}".format("".join(self.num_input)))
            self.num_input = []
        else:
            self.num_input.append(sender)
            self.display.setText("".join(self.num_input))

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ui = Example()
    ui.show()
    sys.exit(app.exec_())

 表單布局

"""
表單布局
時間：2018-12-29
作者：xiong
"""
import sys
from PyQt5.QtWidgets import (QApplication,QWidget,QLabel,QFormLayout,QLineEdit,QTextEdit)
from PyQt5.QtGui import QIcon

class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.initUi()

    def initUi(self):
        self.setGeometry(300,300,400,200)
        self.setWindowTitle("表單布局")
        self.setWindowIcon(QIcon("a7.ico"))     #給窗口添加圖標
        formLayout = QFormLayout()  #表單布局
        nameLabel = QLabel("姓名：")
        nameLineEdit = QLineEdit("")
        introduceLabel = QLabel("簡介：")
        introduceLineEdit = QTextEdit("")

        formLayout.addRow(nameLabel,nameLineEdit)
        formLayout.addRow(introduceLabel,introduceLineEdit)
        self.setLayout(formLayout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ui = Example()
    ui.show()
    sys.exit(app.exec_())

 

微語：無情未必真豪傑，憐子如何不丈夫？知否興風狂嘯者，回眸時看小於菟。