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))

2.2 文字提示

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

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

2.3 游戏难度按钮

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

class StyledButton(QPushButton):"""自定义按钮类"""def __init__(self, txt):super(StyledButton, self).__init__()self.txt = txtself.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;''')

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

# 游戏难度按钮
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')

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;''')

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()

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("排行榜")

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

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

完整数字华容道03：首页创建相关推荐

完整数字华容道01：原型图设计
文章目录 1.构思 2.原型设计 2.1 首页 2.2 主页面 2.3 保存记录对话框 2.4 游戏结束对话框 2.5 排行榜页面前面文字 Python游戏开发:数字华容道已经介绍了简版数字华容道 ...
完整数字华容道04：游戏主体逻辑
文章目录 1.整体框架修改 2.页面框架 3.Switch 自定义控件 4.GamePage 实现 4.1 新增属性 4.2 初始化布局 4.3 返回首页 4.4 背景音乐控制 4.5 更新步数 4. ...
完整数字华容道05：游戏结束
文章目录 1. 页面流程图 2. 代码讲解 2.1 GameOverPage类 2.2 布局 2.3 游戏结束 2.4 最终效果展示 3. 完整代码前面已经把游戏的整体流程介绍完毕,接下来讲解游戏结 ...
整活--我是如何用OpenCV做了数字华容道游戏（附源码）
学更好的别人, 做更好的自己. --<微卡智享> 本文长度为3829字,预计阅读9分钟前言数字华容道,记得以前<最强大脑>上一个初赛题目,正好最近家里买了个数字华容道的玩具 ...
python数字推盘游戏怎么显示步数_Python游戏开发：《最强大脑》同款游戏【数字华容道】...
今年年初,新一季的<最强大脑>开播了,第一集选拔的时候大家做了一个数字游戏,名叫<数字华容道>,当时何猷君以二十几秒的成绩夺得该项目的冠军,看了这个游戏之后我决定要写一个< ...
python游戏开发框架_Python游戏开发：数字华容道
今年年初,新一季的<最强大脑>开播了,第一集选拔的时候大家做了一个数字游戏,名叫<数字华容道>,当时何猷君以二十几秒的成绩夺得该项目的冠军,看了这个游戏之后我决定要写一个< ...
制作Python数字华容道（可选择关卡）
制作Python数字华容道(可选择关卡) 由于比赛需要,我这边制作了一份数字华容道,内含有3,4,5阶的数字华容道,开头在壳窗口内选择,运用了随机数模块(random)和图形化用户界面(tkinter ...
python推盘游戏_Python游戏开发：数字华容道
今年年初,新一季的<最强大脑>开播了,第一集选拔的时候大家做了一个数字游戏,名叫<数字华容道>,当时何猷君以二十几秒的成绩夺得该项目的冠军,看了这个游戏之后我决定要写一个< ...
python数字推盘游戏怎么显示步数_Python游戏开发：数字华容道
今年年初,新一季的<最强大脑>开播了,第一集选拔的时候大家做了一个数字游戏,名叫<数字华容道>,当时何猷君以二十几秒的成绩夺得该项目的冠军,看了这个游戏之后我决定要写一个< ...

完整数字华容道03：首页创建

文章目录