上一节已经将所有的页面样式都介绍了，本节将完成首页的创建。

1、首页布局

首页布局如下图所示：

整个布局采用 QVBoxLayout （竖型布局）。最上方的“数字华容道”字样是一张图片，采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QPushButton 。

2、代码实现

新建一个 HomePage.py 文件，以下代码都在该文件下实现。

2.2 显示图片

使用 QPixmap 加载图片，QLabel 显示图片。

# 图片
pic_dir = os.path.abspath('.') + '\\src\\images\\数字华容道.png'
lbImg = QLabel()
lbImg.setFixedSize(380, 160)
lbImg.setScaledContents(True)
lbImg.setPixmap(QPixmap(pic_dir))
1
2
3
4
5
6

2.2 文字提示

使用 QLabel 显示文字，并设置相应的字体。

# 文字提示
		lbTip = QLabel('请您选择游戏难度')
		lbTip.setFixedHeight(30)
		font = QFont()
		font.setPointSize(20)
		lbTip.setFont(font)
1
2
3
4
5
6

2.3 游戏难度按钮

如上图所示，选择难度的四个按钮除了文字不同外，样式完全相同，那么我们新建一个按钮类。

class StyledButton(QPushButton):
	"""自定义按钮类"""
	def __init__(self, txt):
		super(StyledButton, self).__init__()
		self.txt = txt
		self.init()

	def init(self):
		# 设置按钮文本
		self.setText(self.txt)

		# 设置按钮大小
		self.setFixedSize(240, 40)

		# 设置按钮样式
		self.setStyleSheet('''border-radius:10px;
			padding:2px 4px;
			color: white;
			background-color:rgb(255, 153, 204);
			font-size: 20px;''')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

只需要设置按钮上显示的文字即可。

# 游戏难度按钮
self.btn3_3 = StyledButton('3 X 3')
self.btn4_4 = StyledButton('4 X 4')
self.btn5_5 = StyledButton('5 X 5')
self.btn6_6 = StyledButton('6 X 6')
1
2
3
4
5

2.4 排行榜按钮

# 排行榜按钮
self.btnRanking = QPushButton("排行榜")
self.btnRanking.setFixedSize(100, 30)
self.btnRanking.setStyleSheet('''border-radius:10px;
			padding:2px 4px;
			background-color:white;
			font-size: 20px;''')
1
2
3
4
5
6
7

2.5 布局

将上述各个部分加入一个 QVBoxLayout 中

# 布局，水平居中
self.addSpacing(50)
self.addWidget(lbImg, 0, Qt.AlignHCenter)
self.addSpacing(15)
self.addWidget(lbTip, 0, Qt.AlignHCenter)
self.addSpacing(15)
self.addWidget(self.btn3_3, 0, Qt.AlignHCenter)
self.addSpacing(20)
self.addWidget(self.btn4_4, 0, Qt.AlignHCenter)
self.addSpacing(20)
self.addWidget(self.btn5_5, 0, Qt.AlignHCenter)
self.addSpacing(20)
self.addWidget(self.btn6_6, 0, Qt.AlignHCenter)
self.addSpacing(20)
self.addWidget(self.btnRanking, 0, Qt.AlignRight)
self.addStretch()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、首页引入及测试

在 NumberHuaRong.py 中添加如下代码引入 首页：

from HomePage import HomePage

MainForm 类做如下修改

class MainForm(QWidget):
    '''游戏窗口'''
    def __init__(self):
        super(MainForm, self).__init__()
        self.hp = HomePage()
        self.initUI()

    def initUI(self):
        self.setLayout(self.hp)
        self.setFixedSize(400, 600)
        self.setWindowTitle('数字华容道')
        self.setStyleSheet("background-color:lightblue;")
        self.show()

        # 按钮测试
        self.hp.btn3_3.clicked.connect(self.print3)
        self.hp.btn4_4.clicked.connect(self.print4)
        self.hp.btn5_5.clicked.connect(self.print5)
        self.hp.btn6_6.clicked.connect(self.print6)
        self.hp.btnRanking.clicked.connect(self.ranking)

    def print3(self):
        print(3)

    def print4(self):
        print(4)

    def print5(self):
        print(5)

    def print6(self):
        print(6)

    def ranking(self):
        print("排行榜")
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

分别点击各个按钮，会打印出相应的信息：

本文所有代码及资源链接：链接：https://pan.baidu.com/s/11PfQpSnpppVPaOkRKSMG2A 密码：9ecv