Update 布局管理.md

布局管理.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.
+程序预览：
+
+![review example](./images/3-review.png)