日常拓展~~~简洁图形界面

简洁图形界面

** 现在大多数公司都鼓励员工自主研发，由于专业水平的限制，很难设计系统级别的应用程序。因此大多的创新和拓展都是从小型应用开始，例如简单的windows应用、公众号或者小型网站等。为了每次设计应用过程中更为便利，写一段通用的图形界面程序，便于下次使用时直接套用。**

class mainwindow(QMainWindow):
    def __init__(self):
        super(mainwindow,self).__init__()
        #QWidget部件是pyqt5所有用户界面对象的基类。他为QWidget提供默认构造函数。默认构造函数没有父类。
        self.initUI()

    def initUI(self):
        self.setFixedSize(960,700)         
        self.mainWidget = QtWidgets.QWidget()  # 创建窗口主部件         
        self.mainLayout = QtWidgets.QGridLayout()  # 创建主部件的网格布局         
        self.mainWidget.setLayout(self.mainLayout)  # 设置窗口主部件布局为网格布局           
        self.leftWidget = QtWidgets.QWidget()  # 创建左侧部件         
        self.leftWidget.setObjectName('leftWidget')         
        self.leftLayout = QtWidgets.QGridLayout()  # 创建左侧部件的网格布局层         
        self.leftWidget.setLayout(self.leftLayout) # 设置左侧部件布局为网格           
        self.rightWidget = QtWidgets.QWidget() # 创建右侧部件         
        self.rightWidget.setObjectName('rightWidget')         
        self.rightLayout = QtWidgets.QGridLayout()         
        self.rightWidget.setLayout(self.rightLayout) # 设置右侧部件布局为网格           
        self.mainLayout.addWidget(self.leftWidget,0,0,12,2) # 左侧部件在第0行第0列，占8行2列         
        self.mainLayout.addWidget(self.rightWidget,0,2,12,10) # 右侧部件在第0行第3列，占8行9列         
        self.setCentralWidget(self.mainWidget) 
        self.setWindowTitle("1") # 设置窗口标题

        self.leftForward=QtWidgets.QPushButton("")
        self.leftBack=QtWidgets.QPushButton("")
        self.leftReload=QtWidgets.QPushButton("") 

        self.leftLabel1=QtWidgets.QPushButton("2")
        self.leftLabel1.setObjectName("leftLabel")

        self.leftLabel2=QtWidgets.QPushButton("3")
        self.leftLabel2.setObjectName("leftButton")
        
        self.leftLabel3=QtWidgets.QPushButton("4")
        self.leftLabel3.setObjectName("leftButton")

        self.leftLabel4=QtWidgets.QPushButton("5")
        self.leftLabel4.setObjectName("leftButton")

        self.leftLabel5=QtWidgets.QPushButton("6")
        self.leftLabel5.setObjectName("leftButton") # 设置按钮控件

        self.rightExit=QtWidgets.QPushButton("Exit")
        self.rightExit.clicked.connect(QCoreApplication.instance().quit) # 设置点击触发

        self.rightHtml=QWebEngineView()

        self.setWindowOpacity(0.95)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
        self.setWindowFlag(QtCore.Qt.FramelessWindowHint) # 设置窗口背景透明

        self.leftLayout.addWidget(self.leftForward,0,0,1,1)
        self.leftLayout.addWidget(self.leftBack,0,1,1,1)
        self.leftLayout.addWidget(self.leftReload,0,2,1,1)
        
        self.leftLayout.addWidget(self.leftLabel1,1,0,1,3)
        self.leftLayout.addWidget(self.leftLabel2,2,0,1,3)
        self.leftLayout.addWidget(self.leftLabel3,3,0,1,3)
        self.leftLayout.addWidget(self.leftLabel4,4,0,1,3)
        self.leftLayout.addWidget(self.leftLabel5,5,0,1,3)

        self.rightLayout.addWidget(self.rightExit,0,9,1,1)
        self.rightLayout.addWidget(self.rightHtml,1,1,5,9) # 设置控件位置

        self.leftForward.setFixedSize(25,25)
        self.leftBack.setFixedSize(25,25)
        self.leftReload.setFixedSize(25,25)

        self.leftForward.setStyleSheet('''QPushButton{background:#F76677;border-radius:10px;}QPushButton:hover{background:red;}''')
        self.leftBack.setStyleSheet('''QPushButton{background:#F7D674;border-radius:10px;}QPushButton:hover{background:yellow;}''')
        self.leftReload.setStyleSheet('''QPushButton{background:#90EE90;border-radius:10px;}QPushButton:hover{background:green;}''') # 设计控件样式

        self.leftForward.clicked.connect(self.rightHtml.forward)
        self.leftBack.clicked.connect(self.rightHtml.back)
        self.leftReload.clicked.connect(self.rightHtml.reload) # 设置点击触发

        self.leftWidget.setStyleSheet('''     
            QPushButton{border:none;color:white;}     
            QPushButton#leftLabel{
                border:none;         
                border-bottom:1px solid white;         
                font-size:18px;         
                font-weight:700;         
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;     
                }
            QWidget#leftWidget{     
                background:#00cccc;     
                border-top:1px solid white;     
                border-bottom:1px solid white;     
                border-left:1px solid white;     
                border-top-left-radius:30px;     
                border-bottom-left-radius:30px; 
                }     
            QPushButton#leftButton:hover{
                border-left:2px solid black;
                font-weight:300;
                } 
            ''')
        self.rightWidget.setStyleSheet('''
            QPushButton{border:none;color:red;}     
    
            QWidget#rightWidget{         
                color:#232C51;         
                background:white;         
                border-top:1px solid darkGray;         
                border-bottom:1px solid darkGray;         
                border-right:1px solid darkGray;         
                border-top-right-radius:30px;         
                border-bottom-right-radius:30px;     
                }     
            ''')  # 设置控件样式

        self.mainLayout.setSpacing(0) # 去除白色间隔

该图形界面设计过程基于PyQt5实现，首先设计网格布局，然后将布局分割为左右两部分，将该两部分空间进行分割。在每个小空间中加入控件，从而实现一个具体的图形应用界面。