pyQt-主界面與子界面切換簡易框架

本篇來介紹使用python中是Qt功能包，設置一個簡易的多界面切換框架，實現主界面和多個子界面直接的切換顯示。

1 主界面

設計的Demo主界面如下，主界面上有兩個按鈕圖標，點擊即可切換到對應的功能界面中，進入子界面后，通過返回按鈕，又可回到主界面。

這里以兩個按鈕圖標示例，實際使用中，可繼續擴展。

1.1 布局

如下是本Demo的主界面的布局代碼，實際使用時，可根據自己的需要進行修改。

homeUI.py

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
import sys
from uiDef import *
from musicPlayer import MusicPlayer
from videoPlayer import VideoPlayer

class mainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.main_UI()
        self.button_UI()
        
    def main_UI(self):
        self.setFixedSize(WIN_WIDTH, WIN_HEIGHT)
        self.setWindowTitle("主界面")
        
        self.mainWight = QWidget()
        self.mainLayout = QVBoxLayout()
        self.mainWight.setLayout(self.mainLayout)
        self.setCentralWidget(self.mainWight)
        
    def button_UI(self):
        # 各個APP啟動按鈕
        # <<<音樂>>>
        self.musicAppBtn = QPushButton(self)
        self.musicAppBtn.setStyleSheet("QPushButton{border-image: url(resource/app_music.png)}")
        self.musicAppBtn.setFixedSize(48, 48)
        self.musicAppLabel = QLabel(self)
        self.musicAppLabel.setText("音樂")
        self.musicAppLabel.setAlignment(Qt.AlignCenter)
        self.vboxMusicApp = QVBoxLayout()
        self.vboxMusicApp.addWidget(self.musicAppBtn)
        self.vboxMusicApp.addWidget(self.musicAppLabel)
        # <<<視頻>>>
        self.videoAppBtn = QPushButton(self)
        self.videoAppBtn.setStyleSheet("QPushButton{border-image: url(resource/app_video.png)}")
        self.videoAppBtn.setFixedSize(48, 48)
        self.videoAppLabel = QLabel(self)
        self.videoAppLabel.setText("視頻")
        self.videoAppLabel.setAlignment(Qt.AlignCenter)
        self.vboxVideoApp = QVBoxLayout()
        self.vboxVideoApp.addWidget(self.videoAppBtn)
        self.vboxVideoApp.addWidget(self.videoAppLabel)
        
        # 布局
        self.vboxAppBtnLine1 = QHBoxLayout()
        self.vboxAppBtnLine1.addStretch(1)
        self.vboxAppBtnLine1.addLayout(self.vboxMusicApp)
        self.vboxAppBtnLine1.addStretch(1)
        self.vboxAppBtnLine1.addLayout(self.vboxVideoApp)
        self.vboxAppBtnLine1.addStretch(1)

        self.mainLayout.addStretch(1)
        self.mainLayout.addLayout(self.vboxAppBtnLine1)
        self.mainLayout.addStretch(1)

這里使用QPushButton實現按鈕功能：

通過setStyleSheet方法，設置按鈕圖標的顯示通過QLabel設置圖標對應的文字說明，并通過setAlignment方法設置居中對齊按鈕圖標與文字，通過QVBoxLayout進行垂直布局

多個QPushButton通過QHBoxLayoutt進行水平布局

1.2 進入子界面

界面切換的關鍵，是通過Qt的信號和槽機制，當圖標按鈕點擊后，啟動對應的子功能模塊，并關閉主頁面。

代碼如下：

class mainWindow(QMainWindow):      
    def button_UI(self):
        # 省略UI布局...
        
        # 信號和槽
        self.musicAppBtn.clicked.connect(self.startMusicApp)
        self.musicAppBtn.clicked.connect(self.close) 
        self.videoAppBtn.clicked.connect(self.startVideoApp)
        self.videoAppBtn.clicked.connect(self.close) 
        
    def startMusicApp(self):
        print("startMusicApp...")
        self.w1 = MusicPlayer()
        self.w1.show()
        
    def startVideoApp(self):
        print("startVideoApp...")
        self.w2 = VideoPlayer()
        self.w2.show()

這里的startMusicApp和startVideoApp就是分別啟動音樂播放子界面和視頻播放子界面。

下面來介紹使用pyQt設計子界面。

2 子界面

設計的Demo子界面如下，點擊“返回主界面”按鈕，可以返回到剛才的主界面。

2.1 布局

如下是本Demo的音樂播放子界面的布局代碼，實際使用時，可根據自己的需要進行修改。

musicPlayer.py

from PyQt5.QtWidgets import QWidget,QHBoxLayout,QVBoxLayout,QPushButton, QLabel, QApplication
from PyQt5.QtCore import Qt
import os, time, sys
from uiDef import *

class MusicPlayer(QWidget):
    def __init__(self):
        super().__init__()

        self.showLabel = QLabel(self)
        self.showLabel.setText("音樂子界面測試")
        self.showLabel.setAlignment(Qt.AlignCenter)
      
        #返回主界面
        self.homeBtn = QPushButton("返回主界面")

        #整體布局
        self.vboxMain = QVBoxLayout()
        self.vboxMain.addWidget(self.showLabel)
        self.vboxMain.addWidget(self.homeBtn)
        self.setLayout(self.vboxMain)
        
        self.initUI()

    # 初始化界面
    def initUI(self):
        self.resize(WIN_WIDTH, WIN_HEIGHT)
        self.setWindowTitle('音樂子界面')
        self.show()

這里主要用到了QLabel和QPushButton兩種控件，并通過QVBoxLayout進行垂直布局。

2.2 返回主界面

返回主界面的關鍵，同樣是通過Qt的信號和槽機制，當點擊“返回主界面”后，啟動主界面功能模塊，并關閉當前頁面。

代碼如下：

class MusicPlayer(QWidget):
    def __init__(self):
		# 省略UI布局...
        
        #信號與槽
        self.homeBtn.clicked.connect(self.returnHome)
        self.homeBtn.clicked.connect(self.close)

    # 返回主頁
    def returnHome(self):
        print("return home")
        from homeUI import mainWindow
        self.homeWindow = mainWindow()
        self.homeWindow.show()

2.3 其它子界面

其它子界面的設計，可參考剛才的音樂播放子界面接口，主要是信號和槽那部分的功能保持不變，實現界面的切換。

其它功能根據自己的實際需要進行修改即可。

例如可以參考音樂播放子界面，再設計一個視頻播放子界面。

from PyQt5.QtWidgets import QWidget,QHBoxLayout,QVBoxLayout,QPushButton, QLabel, QApplication
from PyQt5.QtCore import Qt
import os, time, sys
from uiDef import *

class VideoPlayer(QWidget):
    def __init__(self):
        super().__init__()

        self.showLabel = QLabel(self)
        self.showLabel.setText("視頻子界面測試")
        self.showLabel.setAlignment(Qt.AlignCenter)
      
        #返回主界面
        self.homeBtn = QPushButton("返回主界面")

        #整體布局
        self.vboxMain = QVBoxLayout()
        self.vboxMain.addWidget(self.showLabel)
        self.vboxMain.addWidget(self.homeBtn)
        self.setLayout(self.vboxMain)

        #信號與槽
        self.homeBtn.clicked.connect(self.returnHome)
        self.homeBtn.clicked.connect(self.close)
        
        self.initUI()

    # 初始化界面
    def initUI(self):
        self.resize(WIN_WIDTH, WIN_HEIGHT)
        self.setWindowTitle('視頻子界面')
        self.show()
        
    # 返回主頁
    def returnHome(self):
        print("return home")
        from homeUI import mainWindow
        self.homeWindow = mainWindow()
        self.homeWindow.show()

3 演示

實際運行Demo程序，效果如下，可以實現主界面和子界面間的互相切換顯示：

4 總結

本篇介紹了使用pyQt，設置一個簡易的多界面切換框架，講解了其切換的基本原理，并進行了實際效果的展示。