diff --git a/布局管理.md b/布局管理.md index e9eca47..30d7542 100644 --- a/布局管理.md +++ b/布局管理.md @@ -74,9 +74,8 @@ lbl1.move(15, 10) ## 盒布局 使用盒布局能让程序具有更强的适应性。这个才是布局一个应用的更合适的方式。QHBoxLayout和QVBoxLayout是基本的布局类,分别是水平布局和垂直布局。 -想象一下,如果我们需要把两个按钮放在程序的右下角 -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 necessary space, we will add a stretch factor. - +如果我们需要把两个按钮放在程序的右下角,创建这样的布局,我们只需要一个水平布局加一个垂直布局的盒子就可以了。再用弹性布局增加一点间隙。 +``` #!/usr/bin/python3 # -*- coding: utf-8 -*- @@ -131,32 +130,39 @@ if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) -The example places two buttons in the bottom-right corner of the window. They stay there when we resize the application window. We use both a HBoxLayout and a QVBoxLayout. - +``` +上面的例子完成了在应用的右下角放了两个按钮的需求。当改变窗口大小的时候,它们能依然保持在相对的位置。我们同时使用了HBoxLayout和QVBoxLayout。 +``` okButton = QPushButton("OK") cancelButton = QPushButton("Cancel") -Here we create two push buttons. - +``` +这是创建了两个按钮。 +``` hbox = QHBoxLayout() hbox.addStretch(1) hbox.addWidget(okButton) hbox.addWidget(cancelButton) -We create a horizontal box layout and add a stretch factor and both buttons. The stretch adds a stretchable space before the two buttons. This will push them to the right of the window. - +``` +创建一个水平布局,增加两个按钮和弹性空间。stretch函数在两个按钮前面增加了一些弹性空间。下一步我们把这些元素放在应用的右下角。 +``` vbox = QVBoxLayout() vbox.addStretch(1) vbox.addLayout(hbox) -To create the necessary layout, we put a horizontal layout into a vertical one. The stretch factor in the vertical box will push the horizontal box with the buttons to the bottom of the window. - +``` +为了布局需要,我们把这个水平布局放到了一个垂直布局盒里面。弹性元素会把所有的元素一起都放置在应用的右下角。 +``` self.setLayout(vbox) -Finally, we set the main layout of the window. +``` +最后,我们就得到了我们想要的布局。 -Buttons -Figure: Buttons -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. +![buttons](./images/3-buttons.png) +## 栅格布局 + +最常用的还是栅格布局了。这种布局是把窗口分为行和列。创建和使用栅格布局,需要使用QGridLayout模块。 +``` #!/usr/bin/python3 # -*- coding: utf-8 -*- @@ -214,36 +220,42 @@ if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) -In our example, we create a grid of buttons. - +``` +这个例子里,我们创建了栅格化的按钮。 +``` grid = QGridLayout() self.setLayout(grid) -The instance of a QGridLayout is created and set to be the layout for the application window. - +``` +创建一个QGridLayout实例,并把它放到程序窗口里。 +``` names = ['Cls', 'Bck', '', 'Close', - '7', '8', '9', '/', + '7', '8', '9', '/', '4', '5', '6', '*', - '1', '2', '3', '-', + '1', '2', '3', '-', '0', '.', '=', '+'] -These are the labels used later for buttons. - +``` +这是我们将要使用的按钮的名称。 +``` positions = [(i,j) for i in range(5) for j in range(4)] -We create a list of positions in the grid. - +``` +创建按钮位置列表。 +``` for position, name in zip(positions, names): if name == '': continue button = QPushButton(name) grid.addWidget(button, *position) -Buttons are created and added to the layout with the addWidget() method. +``` +创建按钮,并使用addWidget()方法把按钮放到布局里面。 -Calculator skeleton -Figure: Calculator skeleton -Review example +程序预览: -Widgets can span multiple columns or rows in a grid. In the next example we illustrate this. +![Calculator skeleton](./images/3-calculator.png) +## 制作反馈信息提交布局 +组件能跨列和跨行展示,这个例子里,我们就试试这个功能。 +``` #!/usr/bin/python3 # -*- coding: utf-8 -*- @@ -306,15 +318,18 @@ if __name__ == '__main__': app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_()) -We create a window in which we have three labels, two line edits and one text edit widget. The layout is done with the QGridLayout. - +``` +我们创建了一个有三个标签的窗口。两个行编辑和一个文版编辑,这是用QGridLayout模块搞定的。 +``` grid = 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. +``` +我们可以指定组件的跨行和跨列的大小。这里我们指定这个元素跨5列显示。 -Review example -Figure: Review example -This part of the PyQt5 tutorial was dedicated to layout management. \ No newline at end of file +程序预览: + +![review example](./images/3-review.png) \ No newline at end of file