老梦毕设学习平台设计——Home设计

我是真的傻了，当初自己定了这么一个难的毕设，为难现在的自己
最近写代码入魔，从起来写到睡觉，写写博客放松一下。

毕设简介

一个用来辅助学习的平台
功能：

• 英语学习模块
• 单词学习模块
• 记笔记模块
• 本地视频浏览模块。

本来是打算做个移动端的，可惜当初不了解PyQt很难移植到手机上。毕设题目毕竟是基于PyQt的平台。现在挖坑自己填了。
目前这样打算，先学PyQt做PC端，后学kivy移植到手机端。当然，还有两个月，对于这么勤奋的我来说应该不至于那么难吧。。。
目前定制的制作过程

1. 界面的设计
2. Home界面
3. 笔记模块
4. 视频模块
5. 单词模块
6. 算法模块

什么都不会，PyQt就入了个基础们，一堆的控件用法都不会。
现在买了本PyQt和Qt，慢慢来吧，看看最后我是成功拿毕业证，还是一片昏暗的人生！！
刚辞退一份offer，工作要找，毕设要做，人生现在就是一片昏暗。

HOME界面设计

界面展示

设计步骤

这个Home都是用designer工具制作的，暂时的具体功能还没有实现。

1 图片资源加载

博主比较擅长ppt的设计，不会ps，所以预先在ppt上简单制作了home界面的样式。所以大致需要的图片资源我都保存了。
Qt Designer有个资源文件，首先把它创建了。
第一步：在项目目录下，创建一个image文件夹，image下创建一个名叫apprcc.qrc的文件。
首先写入如下代码:

保存后，开始用Qt Designer加载图片

点击那支笔后，选择刚才创建的apprcc.qrc资源文件

加入一个Prefix（前缀) 名为pic

然后再pic下添加图片吧，添加按钮，就在添加pic按钮的旁边。
添加完后，需要把apprcc.qrc文件转为apprcc.py。具体的转换操作百度吧
该资源文件会把图片转为二进制字符串，存在py里面。易于保存。
以后需要添加图片什么的，就选择这个资源里的图片。

2 Qt Designer初步制作UI

环境是PyCharm配Anaconda。
首先设计四个按钮

一个表格布局Grid Layout
四个按钮Push Button
四个标签 Label
一个水平间隔控件 Horizontal Spacer

按钮加入表格布局时，大小需要调整
把每个按钮的minimumSize属性的高宽都设置为120。

Label的高度有点拥挤，设置一下最大期望尺寸maximumSize，高height为30。
这样这一部分就做好了。

3 加入按钮样式图

找到按钮的styleSheet属性

开始添加样式图

上面时添加快速设置样式图片，如果还要添加按下后的样式变化，这样做

QPushButton{border-image: url(:/pic/btn_english.png);}
QPushButton:pressed{border-image: url(:/pic/btn_english2.png);}

第一行为按钮平常模样，第二行为按钮按下后的模样。
四个按钮都这样设置，与时就设置好了大概的模样。

接着就是再加两个标签，一个用作显示图标，一个用来写"老梦辅助学习平台“
Label做图标:QLabel属性里的pixmap进行设置

4 Home界面设置图标

上面已经把表面内容都涉及好了。
再加上窗口的图标，添上窗口标题就行了。点击窗体，开始设置。

这样个属性都在图上所示。

5 演示

designer工具中，快捷键Ctrl + R 为演示窗口。
接下在保存为cHome.ui，把它存放在项目目录下。
然后转换成cHome.py。环境，转换什么的，看这篇博客吧
现在只是初步展示，因为其他界面还没有设计好，所以home的功能暂时不会写。
建立一个app.py

import sys
from PyQt5 import QtWidgets, QtCore, QtGui
from cHome import *

class MyMainWindow(QtWidgets.QMainWindow, Ui_mainWindow):
    def __init__(self, parent=None):
        super(MyMainWindow, self).__init__(parent)
        self.setupUi(self)

if __name__ == '__main__':
    if QtWidgets.QApplication.instance():
        app = QtWidgets.QApplication.instance()
    else:
        app = QtWidgets.QApplication(sys.argv)
    #app.setWindowIcon(QtGui.QIcon("./image/icon3.png"))
    myWin = MyMainWindow()
    myWin.show()
    sys.exit(app.exec_())

以上是Home的表层设计工作，接下来攻破笔记模块，再回来实现Home的具体功能。

2020/04/11 从昨天到现在，home表层和笔记模块大部分功能已经实现了，加油啊，填坑之路漫漫长。