本篇來介紹使用python中是Qt功能包,設(shè)置一個(gè)簡(jiǎn)易的多界面切換框架,實(shí)現(xiàn)主界面和多個(gè)子界面直接的切換顯示。
1 主界面
設(shè)計(jì)的Demo主界面如下,主界面上有兩個(gè)按鈕圖標(biāo),點(diǎn)擊即可切換到對(duì)應(yīng)的功能界面中,進(jìn)入子界面后,通過返回按鈕,又可回到主界面。
這里以兩個(gè)按鈕圖標(biāo)示例,實(shí)際使用中,可繼續(xù)擴(kuò)展。
1.1 布局
如下是本Demo的主界面的布局代碼,實(shí)際使用時(shí),可根據(jù)自己的需要進(jìn)行修改。
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):
# 各個(gè)APP啟動(dòng)按鈕
# <<<音樂>>>
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實(shí)現(xiàn)按鈕功能:
- 通過setStyleSheet方法,設(shè)置按鈕圖標(biāo)的顯示通過QLabel設(shè)置圖標(biāo)對(duì)應(yīng)的文字說明,并通過setAlignment方法設(shè)置居中對(duì)齊按鈕圖標(biāo)與文字,通過QVBoxLayout進(jìn)行垂直布局
多個(gè)QPushButton通過QHBoxLayoutt進(jìn)行水平布局
1.2 進(jìn)入子界面
界面切換的關(guān)鍵,是通過Qt的信號(hào)和槽機(jī)制,當(dāng)圖標(biāo)按鈕點(diǎn)擊后,啟動(dòng)對(duì)應(yīng)的子功能模塊,并關(guān)閉主頁面。
代碼如下:
class mainWindow(QMainWindow):
def button_UI(self):
# 省略UI布局...
# 信號(hào)和槽
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就是分別啟動(dòng)音樂播放子界面和視頻播放子界面。
下面來介紹使用pyQt設(shè)計(jì)子界面。
2 子界面
設(shè)計(jì)的Demo子界面如下,點(diǎn)擊“返回主界面”按鈕,可以返回到剛才的主界面。
2.1 布局
如下是本Demo的音樂播放子界面的布局代碼,實(shí)際使用時(shí),可根據(jù)自己的需要進(jìn)行修改。
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("音樂子界面測(cè)試")
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進(jìn)行垂直布局。
2.2 返回主界面
返回主界面的關(guān)鍵,同樣是通過Qt的信號(hào)和槽機(jī)制,當(dāng)點(diǎn)擊“返回主界面”后,啟動(dòng)主界面功能模塊,并關(guān)閉當(dāng)前頁面。
代碼如下:
class MusicPlayer(QWidget):
def __init__(self):
# 省略UI布局...
#信號(hào)與槽
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 其它子界面
其它子界面的設(shè)計(jì),可參考剛才的音樂播放子界面接口,主要是信號(hào)和槽那部分的功能保持不變,實(shí)現(xiàn)界面的切換。
其它功能根據(jù)自己的實(shí)際需要進(jìn)行修改即可。
例如可以參考音樂播放子界面,再設(shè)計(jì)一個(gè)視頻播放子界面。
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("視頻子界面測(cè)試")
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)
#信號(hào)與槽
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 演示
實(shí)際運(yùn)行Demo程序,效果如下,可以實(shí)現(xiàn)主界面和子界面間的互相切換顯示:
4 總結(jié)
本篇介紹了使用pyQt,設(shè)置一個(gè)簡(jiǎn)易的多界面切換框架,講解了其切換的基本原理,并進(jìn)行了實(shí)際效果的展示。