数字华容道03：首页创建

王强

发布于 2018-12-10 14:30:52

6270

发布于 2018-12-10 14:30:52

文章被收录于专栏：Python爬虫实战Python爬虫实战

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

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

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

# 游戏难度按钮
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("排行榜")

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

首页按钮测试

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-11-07，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 C与Python实战微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度