含有章节索引的中文 文章模板

::-- ["zhuyj"] [DateTime(2008-06-06T07:36:43Z)] TableOfContents

1. Layout management in PyQt4

Important thing in programming is the layout management. Layout management is the way how we place the widgets on the window. The management can be done in two ways. We can use absolute positioning or layout classes.

• 程序设计中重要的事情是层管理。层管理是我们在窗口上放置控件的方法。这种放开可以通过两种方式来完成，我们可以利用absolute positioning绝对位置 或

1.1. layout classes 布局类化

Absolute positioning绝对位置 The programmer specifies the position and the size of each widget in pixels. When you use absolute positioning, you have to understand several things.

• 程序员指定每个控件的位置和尺寸精确到像素。当你使用绝对位置时，你必须理解以下几件事情。

the size and the position of a widget do not change, if you resize a window

• 当你改变一个窗口的尺寸时，控件的位置和尺寸不会改变

applications might look different on various platforms

• 在不同的平台上应用程序看起来有很大的区别

changing fonts in your application might spoil the layout

• 改变应用程序的字体可能会破坏布局

if you decide to change your layout, you must completely redo your layout, which is tedious and time consuming

• 当你决定改变布局时，你必须完全重设计你的布局，这是烦闷并且浪费时间的

   1 #!/usr/bin/python
   2 # absolute.py
   3 import sys
   4 from PyQt4 import QtGui
   5 class Absolute(QtGui.QWidget):
   6     def __init__(self, parent=None):
   7         QtGui.QWidget.__init__(self, parent)
   8         self.setWindowTitle('Communication')
   9         label = QtGui.QLabel('Couldn\'t', self)
  10         label.move(15, 10)
  11         label = QtGui.QLabel('care', self)
  12         label.move(35, 40)
  13         label = QtGui.QLabel('less', self)
  14         label.move(55, 65)
  15         label = QtGui.QLabel('And', self)
  16         label.move(115, 65)
  17         label = QtGui.QLabel('then', self)
  18         label.move(135, 45)
  19         label = QtGui.QLabel('you', self)
  20         label.move(115, 25)
  21         label = QtGui.QLabel('kissed', self)
  22         label.move(145, 10)
  23         label = QtGui.QLabel('me', self)
  24         label.move(215, 10)
  25         self.resize(250, 150)
  26 app = QtGui.QApplication(sys.argv)
  27 qb = Absolute()
  28 qb.show()
  29 sys.exit(app.exec_())

We simply call the move() method to position our widgets. In our case QLabel-s. We position them by providing the x and the y coordinates. The beginning of the coordinate system is at the left top corner. The x values grow from left to right. The y values grow from top to bottom.

• 我们简单的调用move()方法来定位我们的控件。在QLabel-s框架下，我们通过指定x和y坐标来布置他们。坐标系统的开始点位于左上角，x值从左到右增长，y坐标值从上到下增长。 absolute

attachment:absolute.jpg Figure: absolute positioning

1.2. Box Layout

盒子布局 Layout management with layout classes is much more flexible and practical. It is the preferred way to place widgets on a window. The basic layout classes are QHBoxLayout<QVBoxLayout. They line up widgets horizontally and vertically.

• 利用布局类来进行布局管理是非常灵活和现实的,是在窗口中放置组件的首选方案。最基本的布局类是QHBoxLayout，可以水平或垂直的排列组件。

Imagine that we wanted to place two buttons in the right bottom corner. To create such a layout, we will use one horizontal and one vertical box. To create the neccessary space, we will add a stretch factor.

• 假设我们要在右下角放置两个按钮，要实现这样一个布局，我们需要使用一个horizontal水平的和一个vertical垂直的盒子。为了创建必须的空间，我们需要增加一个stretch factor。

   1 #!/usr/bin/python
   2 # boxlayout.py
   3 import sys
   4 from PyQt4 import QtGui
   5 class BoxLayout(QtGui.QWidget):
   6     def __init__(self, parent=None):
   7         QtGui.QWidget.__init__(self, parent)
   8         self.setWindowTitle('box layout')
   9         ok = QtGui.QPushButton("OK")
  10         cancel = QtGui.QPushButton("Cancel")
  11         hbox = QtGui.QHBoxLayout()
  12         hbox.addStretch(1)
  13         hbox.addWidget(ok)
  14         hbox.addWidget(cancel)
  15         vbox = QtGui.QVBoxLayout()
  16         vbox.addStretch(1)
  17         vbox.addLayout(hbox)
  18         self.setLayout(vbox)
  19         self.resize(300, 150)
  20 app = QtGui.QApplication(sys.argv)
  21 qb = BoxLayout()
  22 qb.show()
  23 sys.exit(app.exec_())

 ok = QtGui.QPushButton("OK")
 cancel = QtGui.QPushButton("Cancel")

Here we create two push buttons.

• 这里我们创建两个按钮。

 hbox = QtGui.QHBoxLayout()
 hbox.addStretch(1)
 hbox.addWidget(ok)
 hbox.addWidget(cancel)

We create a horizontal box layout. Add a stretch factor and both buttons.

• 我们创建一个水平容器布局，增加一个stretch factor和那两个按钮。

 vbox = QtGui.QVBoxLayout()
 vbox.addStretch(1)
 vbox.addLayout(hbox)

To create the necessary layout, we put a horizontal lauout into a vertical one.

• 为了实现需要的布局，我们将水平容器放置到垂直容器里面去。

 self.setLayout(vbox)

Finally, we set the main layout of the window.

• 最后我们设置主窗口的布局。 box layout

attachment:boxlayout.jpg Figure: box layout

1.3. QGridLayout

The most universal layout class is the grid layout. This layout divides the space into rows and columns. To create a grid layout, we use the QGridLayout class.

• 最常用的布局类是栅格布局。这种布局将空间分为行和列，为了创建一个栅格布局，我们使用QGridLayout类。

   1 #!/usr/bin/python
   2 # gridlayout.py
   3 import sys
   4 from PyQt4 import QtGui
   5 class GridLayout(QtGui.QWidget):
   6     def __init__(self, parent=None):
   7         QtGui.QWidget.__init__(self, parent)
   8         self.setWindowTitle('grid layout')
   9         names = ['Cls', 'Bck', '', 'Close', '7', '8', '9', '/',
  10             '4', '5', '6', '*', '1', '2', '3', '-',
  11             '0', '.', '=', '+']
  12         grid = QtGui.QGridLayout()
  13         j = 0
  14         pos = [(0, 0), (0, 1), (0, 2), (0, 3),
  15                 (1, 0), (1, 1), (1, 2), (1, 3),
  16                 (2, 0), (2, 1), (2, 2), (2, 3),
  17                 (3, 0), (3, 1), (3, 2), (3, 3 ),
  18                 (4, 0), (4, 1), (4, 2), (4, 3)]
  19         for i in names:
  20             button = QtGui.QPushButton(i)
  21             if j == 2:
  22                 grid.addWidget(QtGui.QLabel(''), 0, 2)
  23             else: grid.addWidget(button, pos[j][0], pos[j][1])
  24             j = j + 1
  25         self.setLayout(grid)
  26 app = QtGui.QApplication(sys.argv)
  27 qb = GridLayout()
  28 qb.show()
  29 sys.exit(app.exec_())

In our example, we create a grid of buttons. To fill one gap, we add one QLabel widget.

• 在我们的例子里，我们创建了一个按钮栅格，为了填充空间，我们增加一个QLabel组件。

 grid = QtGui.QGridLayout()

Here we create a grid layout.

• 这里我们创建一个栅格布局。

 if j == 2:
     grid.addWidget(QtGui.QLabel(''), 0, 2)
 else: grid.addWidget(button, pos[j][0], pos[j][1])

To add a widget to a grid, we call the addWidget() method. The arguments are the widget, the row and the column number.

• 为了将一个组件增加一个栅格，我们调用addWidget()方法，参数是组件，列号和行号。 grid layout

attachment:gridlayout.jpg Figure: grid layout

Widgets can span multiple columns or rows in a grid. In the next example we illustrate this.

• 组件在一个栅格中可以跨越多个行或列，下一个例子里我们会展示这个特性。

   1  #!/usr/bin/python
   2 # gridlayout2.py
   3 import sys
   4 from PyQt4 import QtGui
   5 class GridLayout2(QtGui.QWidget):
   6     def __init__(self, parent=None):
   7         QtGui.QWidget.__init__(self, parent)
   8         self.setWindowTitle('grid layout')
   9         title = QtGui.QLabel('Title')
  10         author = QtGui.QLabel('Author')
  11         review = QtGui.QLabel('Review')
  12         titleEdit = QtGui.QLineEdit()
  13         authorEdit = QtGui.QLineEdit()
  14         reviewEdit = QtGui.QTextEdit()
  15         grid = QtGui.QGridLayout()
  16         grid.setSpacing(10)
  17         grid.addWidget(title, 1, 0)
  18         grid.addWidget(titleEdit, 1, 1)
  19         grid.addWidget(author, 2, 0)
  20         grid.addWidget(authorEdit, 2, 1)
  21         grid.addWidget(review, 3, 0)
  22         grid.addWidget(reviewEdit, 3, 1, 5, 1)
  23         self.setLayout(grid)
  24         self.resize(350, 300)
  25 app = QtGui.QApplication(sys.argv)
  26 qb = GridLayout2()
  27 qb.show()
  28 sys.exit(app.exec_())

 grid = QtGui.QGridLayout()
 grid.setSpacing(10)

We create a grid layout and set spacing between widgets.

• 我们创建一个栅格布局并且设置组件间的间距。

 grid.addWidget(reviewEdit, 3, 1, 5, 1)

If we add a widget to a grid, we can provide row span and column span of the widget. In our case, we make the reviewEdit widget span 5 rows.

• 如果我们将一个组件加入到栅格，我们可以提供组件的行跨度和列跨度。这个例子里，我们设置reviewEdit组件跨5行。 grid layout2

attachment:gridlayout2.jpg Figure: grid layout2

2. 交流

PageComment2