八、布局#

1. 布局简介#

一个pyqt窗口中可以有多个控件 所谓布局,指的就是多个控件在窗口中的展示方式

布局方式大致分为:

  • 水平布局
  • 竖直布局
  • 网格布局
  • 表单布局

2. 水平布局QHBoxLayout#

水平布局中,是按照从左往右的顺序添加控件的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QHBoxLayout
from PyQt5.QtCore import *
from PyQt5.QtGui import QIcon
import sys

# 1.创建应用程序
app = QApplication(sys.argv)

# 2.创建窗口
w = QWidget()

# 修改窗口标题
w.setWindowTitle('水平布局')
"""------------------ 创建按钮 ------------------"""
btn1 = QPushButton('1')
btn2 = QPushButton('2')
btn3 = QPushButton('3')
btn4 = QPushButton('4')
btn5 = QPushButton('5')
# 创建布局
layout = QHBoxLayout()
# 添加布局到窗口中
w.setLayout(layout)
# 按钮控件添加到布局中
layout.addWidget(btn1)
layout.addWidget(btn2)
layout.addWidget(btn3)
layout.addWidget(btn4)
layout.addWidget(btn5)


# 3.显示窗口
w.show()

# 4.等待窗口停止
sys.exit(app.exec())

运行程序:

3. 竖直布局QVBoxLayout#

竖直布局采用QVBoxLayout,是采用从上往下的方式添加控件的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QVBoxLayout
from PyQt5.QtCore import *
from PyQt5.QtGui import QIcon
import sys

# 1.创建应用程序
app = QApplication(sys.argv)

# 2.创建窗口
w = QWidget()

# 修改窗口标题
w.setWindowTitle('竖直布局')
"""------------------ 创建5个按钮 ------------------"""
btn1 = QPushButton('1')
btn2 = QPushButton('2')
btn3 = QPushButton('3')
btn4 = QPushButton('4')
btn5 = QPushButton('5')

# 创建布局
layout = QVBoxLayout()
# 布局添加到窗口中
w.setLayout(layout)

# 控件添加到布局中
layout.addWidget(btn1)
layout.addWidget(btn2)
layout.addWidget(btn3)
layout.addWidget(btn4)
layout.addWidget(btn5)

# 3.显示窗口
w.show()

# 4.等待窗口停止
sys.exit(app.exec())

运行程序:

4. 表单布局#

表单布局是label-field式的表单布局,顾名思义,就是实现表单方式的布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
from PyQt5.QtWidgets import QApplication,QWidget,QLineEdit,QFormLayout,QPushButton
from PyQt5.QtCore import *
from PyQt5.QtGui import QIcon
import sys

def func():
    name = nameEdit.text()
    age = int(ageEdit.text())
    phone = phoneEdit.text()
    print('姓名:%s,年纪:%d,电话:%s'%(name,age,phone))

# 1.创建应用程序
app = QApplication(sys.argv)

# 2.创建窗口
w = QWidget()


# 修改窗口标题
w.setWindowTitle('表单布局')
"""------------------ 创建布局 ------------------"""
layout = QFormLayout()
# 添加到窗口中
w.setLayout(layout)

# 输入框
nameEdit = QLineEdit()
ageEdit = QLineEdit()
phoneEdit = QLineEdit()
btn = QPushButton('发送')

# 添加到布局中
layout.addRow('姓名',nameEdit)
layout.addRow('年纪',ageEdit)
layout.addRow('电话',phoneEdit)
layout.addRow('',btn)

# 信号和槽绑定
btn.clicked.connect(func)


# 3.显示窗口
w.show()

# 4.等待窗口停止
sys.exit(app.exec())

运行程序:

5. 布局嵌套#

通过布局嵌套可以实现更加复杂的布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QHBoxLayout,QVBoxLayout,QFormLayout
from PyQt5.QtCore import *
from PyQt5.QtGui import QIcon
import sys

# 1.创建应用程序
app = QApplication(sys.argv)

# 2.创建窗口
w = QWidget()


# 修改窗口标题
w.setWindowTitle('嵌套布局')

"""------------------ 实现布局 ------------------"""
# 整体水平布局
wholeLayout = QHBoxLayout()
# 添加整体布局
w.setLayout(wholeLayout)

# 每一部分布局
layout1 = QHBoxLayout()
layout2 = QVBoxLayout()
layout3 = QVBoxLayout()
layout4 = QVBoxLayout()
layout5 = QVBoxLayout()

# 添加到整体的布局中
wholeLayout.addLayout(layout1)
wholeLayout.addLayout(layout2)
wholeLayout.addLayout(layout3)
wholeLayout.addLayout(layout4)
wholeLayout.addLayout(layout5)

# 控件
btn1 = QPushButton('1')
btn2 = QPushButton('2')
btn3 = QPushButton('3')
btn4 = QPushButton('4')
btn5 = QPushButton('5')
btn6 = QPushButton('6')
btn7 = QPushButton('7')
btn8 = QPushButton('8')
btn9 = QPushButton('9')
btn10 = QPushButton('10')
btn11 = QPushButton('11')
btn12 = QPushButton('12')

# 添加第一部分控件
layout1.addWidget(btn1)
layout1.addWidget(btn2)
# 添加第二部分控件
layout2.addWidget(btn3)
layout2.addWidget(btn4)
# 添加第三部分控件
layout3.addWidget(btn5)
layout3.addWidget(btn7)
# 添加第四部分控件
layout4.addWidget(btn6)
layout4.addWidget(btn8)
# 添加第五部分控件
layout5.addWidget(btn9)
layout5.addWidget(btn10)
layout5.addWidget(btn11)
layout5.addWidget(btn12)

# 3.显示窗口
w.show()

# 4.等待窗口停止
sys.exit(app.exec())

运行程序: