PyQt4入門學習筆記（三）
PyQt4內的布局##
布局方式是我們控制我們的GUI頁面內各個控件的排放位置的。我們可以通過兩種基本方式來控制：
1.絕對位置
2.layout類
絕對位置###
這種方式要求程序員必須得指定好每個控件的位置和尺寸。當我們使用絕對位置時，我們得明白下面的幾條限制：
- 當我們改變窗口大小時，控件的尺寸和位置不會改變。
- 我們的應用可能看起來和一般的應用有所不同。
- 改變前端頁面可能會讓我們的應用崩潰
- 如果我們決定要改變我們的布局時，我們必須要把所有控件的位置全部更新
下面這個例子將會使用絕對位置來控制各個控件的位置。
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 tutorial
This example shows three labels on a window
using absolute positioning.
author: Jan Bodnar
website: zetcode.com
last edited: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
lbl1 = QtGui.QLabel('ZetCode', self)
lbl1.move(15, 10)
lbl2 = QtGui.QLabel('tutorials', self)
lbl2.move(35, 40)
lbl3 = QtGui.QLabel('for programmers', self)
lbl3.move(55, 70)
self.setGeometry(300, 300, 250, 150)
self.setWindowTitle('Absolute')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
我們使用move()方法來設定我們的控件的位置。在這個例子里，是QtGui.QLabel。我們通過x和y的坐標來確定控件的位置。坐標的原點位置在左上角。x坐標是從左到右的像素值，y是從上到下的像素值。
lbl1 = QtGui.QLabel('Zetcode', self)
lbl1.move(15, 10)
在這里我們將這個label設定在(15,10)位置。
盒子布局###
通過layout類來控制部件位置要更方便和可行一些。這是首選的控制部件位置的方式。QtGui.QHBoxLayout和QtGui.QVBoxLayout是一個水平和一個垂直布局的基礎布局類。
假設我們有兩個按鈕在右下角。為了創建這樣一個布局，我們將要使用一個水平和垂直的盒子。為了創建足夠的空間，我們將要使用“伸展因子”(stretch factor)
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 tutorial
In this example, we position two push
buttons in the bottom-right corner
of the window.
author: Jan Bodnar
website: zetcode.com
last edited: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
okButton = QtGui.QPushButton("OK")
cancelButton = QtGui.QPushButton("Cancel")
hbox = QtGui.QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
vbox = QtGui.QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)#注意這里
self.setLayout(vbox)
self.setGeometry(300, 300, 300, 150)
self.setWindowTitle('Buttons')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
這個例子里將兩個按鈕放在窗口的右下角。他們無論我們怎么改變窗口大小都同樣在窗口的右下角。我們使用了QtGui.HBoxLayout和tGui.HBoxLayout。
okButton = QtGui.QPushButton("OK")
cancelButton = QtGui.QPushButton("Cancel")
這里我們創建了兩個點擊按鈕
hbox = QtGui.QHBoxLayout()
hbox.addStretch(1)
hbox.addWidget(okButton)
hbox.addWidget(cancelButton)
我們創建了一個水平的盒子布局，並且設定了一個伸展因子，它將會將兩個按鈕控制在窗口的右側。
vbox = QtGui.QVBoxLayout()
vbox.addStretch(1)
vbox.addLayout(hbox)
為了必要的布局，我們放了一個垂直的布局並且伸展因子同樣是1，它將會使兩個按鈕始終保持在窗口底部。
self.setLayout(vbox)
最終我們把設定好的布局放到應用里。（要注意vbox之前已經將hbox加載進來了addlayout）
QtGui.QGridLayout###
最普遍的布局類就是這個網格布局。這個布局將空間分成行和列。我們通過QtGui.QGridLayout類來創建一個坐標布局。
#!/usr/bin/python
# -*- coding: utf-8 -*-
import sys
from PyQt4 import QtGui
"""
ZetCode PyQt4 tutorial
In this example, we create a skeleton
of a calculator using a QtGui.QGridLayout.
author: Jan Bodnar
website: zetcode.com
last edited: July 2014
"""
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
grid = QtGui.QGridLayout()
self.setLayout(grid)
names = ['Cls', 'Bck', '', '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
button = QtGui.QPushButton(name)
grid.addWidget(button, *position)
self.move(300, 150)
self.setWindowTitle('Calculator')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
在我們的例子里，我們創建了一個按鈕的坐標位置。
grid = QtGui.QGridLayout()
self.setLayout(grid)
我們創建了一個QtGui.QGridLayout()並且將其設置為應用的布局方式。
names = ['Cls', 'Bck', '', 'Close',
'7', '8', '9', '/',
'4', '5', '6', '*',
'1', '2', '3', '-',
'0', '.', '=', '+']
上述代碼是設定一個個按鈕的label
positions = [(i,j) for i in range(5) for j in range(4)]
我們創建了一個網格位置列表，准備將那些按鈕按照這個位置列表排放
for position, name in zip(positions, names):
if name == '':
continue
button = QtGui.QPushButton(name)
grid.addWidget(button, *position)
用grid.addWidgt()來在布局上增加按鈕
評論窗口例子###
控件可以在網格布局中跨越多個行多個列。我們在下一個例子里將舉例說明。
#!/usr/bin/python
# -*- coding: utf-8 -*-
"""
ZetCode PyQt4 tutorial
In this example, we create a bit
more complicated window layout using
the QtGui.QGridLayout manager.
author: Jan Bodnar
website: zetcode.com
last edited: October 2011
"""
import sys
from PyQt4 import QtGui
class Example(QtGui.QWidget):
def __init__(self):
super(Example, self).__init__()
self.initUI()
def initUI(self):
title = QtGui.QLabel('Title')
author = QtGui.QLabel('Author')
review = QtGui.QLabel('Review')
titleEdit = QtGui.QLineEdit()
authorEdit = QtGui.QLineEdit()
reviewEdit = QtGui.QTextEdit()
grid = QtGui.QGridLayout()
grid.setSpacing(10)
grid.addWidget(title, 1, 0)
grid.addWidget(titleEdit, 1, 1)
grid.addWidget(author, 2, 0)
grid.addWidget(authorEdit, 2, 1)
grid.addWidget(review, 3, 0)
grid.addWidget(reviewEdit, 3, 1, 5, 1)
self.setLayout(grid)
self.setGeometry(300, 300, 350, 300)
self.setWindowTitle('Review')
self.show()
def main():
app = QtGui.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
我們創建了三個標簽，兩個編輯行，一個文本編輯控件。布局是通過 QtGui.QGridLayout來完成
grid = QtGui.QGridLayout()
grid.setSpacing(10)
我們創建了一個網格布局並且在兩個控件間留下空間。
grid.addWidget(reviewEdit, 3, 1, 5, 1)
如果我們添加一個控件在網格里，我們可以令控件跨越多行或多列。在我們的例子里，reviewEdit跨越了5行。