PyQt4入門學習筆記（三）

# PyQt4入門學習筆記（三）

PyQt4內的佈局

佈局方式是咱們控制咱們的GUI頁面內各個控件的排放位置的。咱們能夠經過兩種基本方式來控制：
1.絕對位置
2.layout類

絕對位置

這種方式要求程序員必須得指定好每一個控件的位置和尺寸。當咱們使用絕對位置時，咱們得明白下面的幾條限制：

1. 當咱們改變窗口大小時，控件的尺寸和位置不會改變。
2. 咱們的應用可能看起來和通常的應用有所不一樣。
3. 改變前端頁面可能會讓咱們的應用崩潰
4. 若是咱們決定要改變咱們的佈局時，咱們必需要把全部控件的位置所有更新

下面這個例子將會使用絕對位置來控制各個控件的位置。

#!/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行。

http://www.cnblogs.com/chuxiuhong/