数字华容道03:首页创建

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

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

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

首页按钮测试

原文发布于微信公众号 - C与Python实战(CPythonPractice)

原文发表时间:2018-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

标签之美七——为网页添加音乐 原

为网页添加音乐可以使用<embed></embed>这个标签。其用法和插入图片类似。

832
来自专栏郭诗雅的专栏

玩转flex布局

H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

45519
来自专栏前端笔记

【HTML5 理论知识】就H5调试技巧,浅谈:iPhone X 适配方案!

image.png 2017年9月苹果发布了iPhone X机型,对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下...

6828
来自专栏飞雪无情的博客

android覆盖式引导

我们在开发产品的时候,每次发版可能会有一些新的功能需要引导用户使用,以前大部分都是使用截图,然后让设计师把引导的问题修饰好放到图上,现在这张图片就是引导图片,我...

1452
来自专栏人云亦云

网页中内嵌字体

4366
来自专栏九彩拼盘的叨叨叨

学习前端 第1周 第3天

724
来自专栏AndroidTv

一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

3558
来自专栏一“技”之长

iOS界面布局之二——初识autolayout布局模型

     在上一篇博客中介绍了传统的布局方式:autoresizing。随着iphone型号的越来越多,屏幕的标准也更加多样化,通过autoresizing已经...

773
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

5952
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

44715

扫码关注云+社区

领取腾讯云代金券