PyQt5系列教程（7）：界面搭建

上期我們介紹了PyQt5的布局，主要涉及到了以下幾個知識點：

• 絕對位置
• 箱式布局
• 柵格布局
• 表單布局
• 編輯夥伴

今天我們主要講解一下軟體界面的搭建。

記得中學的時候第一次使用windows系統的電腦，當時的操作系統還是windows98，教學課本上說明了一個窗口程序一般包含基本要素：有最大化、最小化、以及關閉，有菜單欄、工具欄，還有狀態欄，以及在中間的主程序界面。如下圖所示：

今天我們的任務就是DIY一個自己的軟體界面。

內容正式開始！

QMainWindow類提供了一個主應用程序窗口。 這使得能夠創建具有狀態欄，工具欄和菜單欄的經典應用程序框架。

狀態欄

這個比較簡單，先從這裡開始。

#coding=utf-8from PyQt5.QtWidgets import QApplication, QMainWindowimport sysclass Example(QMainWindow): def __init__(self): super().__init__() self.InitUI() def InitUI(self): self.statusBar().showMessage(準備就緒) self.setGeometry(300,300,400,300) self.setWindowTitle(關注微信公眾號：學點編程吧--狀態欄) self.show() if __name__ == __main__: app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_())

執行結果如下：

self.statusBar().showMessage(準備就緒)

要獲取狀態欄，我們調用QtGui.QMainWindow類的statusBar()方法。 該方法的第一個調用創建一個狀態欄。 後續調用返回狀態欄對象。 showMessage()在狀態欄上顯示一條消息。

菜單

• 簡單的菜單

#coding=utf-8from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, qAppfrom PyQt5.QtGui import QIconimport sysclass Example(QMainWindow): def __init__(self): super().__init__() self.InitUI() def InitUI(self): self.statusBar().showMessage(準備就緒) self.setGeometry(300,300,400,300) self.setWindowTitle(關注微信公眾號：學點編程吧--簡單的菜單) exitAct = QAction(QIcon(exit.png), 退出(&E), self) exitAct.setShortcut(Ctrl+Q) exitAct.setStatusTip(退出程序) exitAct.triggered.connect(qApp.quit) menubar = self.menuBar() fileMenu = menubar.addMenu(文件(&F)) fileMenu.addAction(exitAct) self.show()if __name__ == __main__: app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_())

在上面的例子中，我們用一個菜單創建一個菜單。 此菜單將包含一個選擇時終止應用程序的操作。 還創建狀態欄。 該操作可通過Ctrl + Q快捷方式訪問。

執行的結果如下：

exitAct = QAction(QIcon(exit.png), 退出(&E), self)exitAct.setShortcut(Ctrl+Q)exitAct.setStatusTip(退出程序)

QAction是使用菜單欄，工具欄或自定義鍵盤快捷方式執行操作的抽象。在上述三行中，我們創建一個具有特定圖標和「退出」標籤的動作。此外，為此操作定義了快捷方式。當我們將滑鼠指針懸停在菜單項上時，第三行創建狀態欄顯示在狀態欄中。

exitAct.triggered.connect(qApp.quit)

當我們選擇這個特定的動作時，發出觸發信號。 信號連接到QApplication小部件的quit()方法。 這終止了應用程序。

menubar = self.menuBar()fileMenu = menubar.addMenu(文件(&F))fileMenu.addAction(exitAct)

menuBar（）方法創建一個菜單欄。 我們使用addMenu（）創建文件菜單，並使用addAction（）添加操作。

上面的代碼中我們在退出、文件後面都增加了「&」這個符號，增加這個符號後，當我們按住「Alt+F」的時候就能快速打開文件這個菜單，同理按住「Alt+E」的時候就能退出了。可以試試如果不加這個符號能否成功呢？

• 子菜單

子菜單是另一個菜單中的菜單。類似下圖中的樣子。

#coding=utf-8from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, qApp, QMenufrom PyQt5.QtGui import QIconimport sysclass Example(QMainWindow): def __init__(self): super().__init__() self.InitUI() def InitUI(self): self.statusBar().showMessage(準備就緒) self.setGeometry(300,300,400,300) self.setWindowTitle(關注微信公眾號：學點編程吧--子菜單) exitAct = QAction(QIcon(exit.png), 退出(&E), self) exitAct.setShortcut(Ctrl+Q) exitAct.setStatusTip(退出程序) exitAct.triggered.connect(qApp.quit) saveMenu = QMenu(保存方式(&S), self) saveAct = QAction(QIcon(save.png),保存..., self) saveAct.setShortcut(Ctrl+S) saveAct.setStatusTip(保存文件) saveasAct = QAction(QIcon(saveas.png),另存為...(&O), self) saveasAct.setStatusTip(文件另存為) saveMenu.addAction(saveAct) saveMenu.addAction(saveasAct) newAct = QAction(QIcon(new.png),新建(&N),self) newAct.setShortcut(Ctrl+N) menubar = self.menuBar() fileMenu = menubar.addMenu(文件(&F)) fileMenu.addAction(newAct) fileMenu.addMenu(saveMenu) fileMenu.addSeparator() fileMenu.addAction(exitAct) self.show()if __name__ == __main__: app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_())

執行的結果如下：

在這個例子中，我們有三個菜單項： 其中兩個位於文件菜單中（新建、退出），另一個位於文件的保存子菜單中。

saveMenu = QMenu(保存方式(&S), self)

使用QMenu創建新菜單,

saveAct = QAction(QIcon(save.png),保存..., self)saveAct.setShortcut(Ctrl+S)saveAct.setStatusTip(保存文件)saveasAct = QAction(QIcon(saveas.png),另存為...(&O), self)saveasAct.setStatusTip(文件另存為)saveMenu.addAction(saveAct)saveMenu.addAction(saveasAct)

兩個動作使用addAction()被添加到子菜單中。

• 上下文菜單（context menu）

Windows操作系統中任何地方右擊滑鼠會出現俗稱的「右鍵菜單」，其實就是指上下文菜單。

#coding=utf-8from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, qApp, QMenufrom PyQt5.QtGui import QIconimport sysclass Example(QMainWindow): def __init__(self): super().__init__() self.InitUI() def InitUI(self): self.statusBar().showMessage(準備就緒) self.setGeometry(300,300,400,300) self.setWindowTitle(關注微信公眾號：學點編程吧--上下文菜單) exitAct = QAction(QIcon(exit.png), 退出(&E), self) exitAct.setShortcut(Ctrl+Q) exitAct.setStatusTip(退出程序) exitAct.triggered.connect(qApp.quit) saveMenu = QMenu(保存方式(&S), self) saveAct = QAction(QIcon(save.png),保存..., self) saveAct.setShortcut(Ctrl+S) saveAct.setStatusTip(保存文件) saveasAct = QAction(QIcon(saveas.png),另存為...(&O), self) saveasAct.setStatusTip(文件另存為) saveMenu.addAction(saveAct) saveMenu.addAction(saveasAct) newAct = QAction(QIcon(new.png),新建(&N),self) newAct.setShortcut(Ctrl+N) newAct.setStatusTip(新建文件) menubar = self.menuBar() fileMenu = menubar.addMenu(文件(&F)) fileMenu.addAction(newAct) fileMenu.addMenu(saveMenu) fileMenu.addSeparator() fileMenu.addAction(exitAct) self.show() def contextMenuEvent(self, event): cmenu = QMenu(self) newAct = cmenu.addAction("新建") opnAct = cmenu.addAction("保存") quitAct = cmenu.addAction("退出") action = cmenu.exec_(self.mapToGlobal(event.pos())) if action == quitAct: qApp.quit() if __name__ == __main__: app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_())

單擊右鍵後，執行的效果如下：

要使用上下文菜單，我們必須重新實現contextMenuEvent()方法。

action = cmenu.exec_(self.mapToGlobal(event.pos()))

使用exec_()方法顯示上下文菜單。 從事件對象獲取滑鼠指針的坐標。 mapToGlobal()方法將窗口小部件坐標轉換為全局屏幕坐標。

if action == quitAct: qApp.quit()

如果從上下文菜單返回的操作等於退出操作，我們終止應用程序。

• 工具欄

各項命令都是在菜單欄當中，但是我們可以把一些常用的命令放在工具欄上，例如新建、打開、保存等等。

#coding=utf-8from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, qApp, QMenufrom PyQt5.QtGui import QIconimport sysclass Example(QMainWindow): def __init__(self): super().__init__() self.InitUI() def InitUI(self): self.statusBar().showMessage(準備就緒) self.setGeometry(300,300,400,300) self.setWindowTitle(關注微信公眾號：學點編程吧--上下文菜單) exitAct = QAction(QIcon(exit.png), 退出(&E), self) exitAct.setShortcut(Ctrl+Q) exitAct.setStatusTip(退出程序) exitAct.triggered.connect(qApp.quit) saveMenu = QMenu(保存方式(&S), self) saveAct = QAction(QIcon(save.png),保存..., self) saveAct.setShortcut(Ctrl+S) saveAct.setStatusTip(保存文件) saveasAct = QAction(QIcon(saveas.png),另存為...(&O), self) saveasAct.setStatusTip(文件另存為) saveMenu.addAction(saveAct) saveMenu.addAction(saveasAct) newAct = QAction(QIcon(new.png),新建(&N),self) newAct.setShortcut(Ctrl+N) newAct.setStatusTip(新建文件) menubar = self.menuBar() fileMenu = menubar.addMenu(文件(&F)) fileMenu.addAction(newAct) fileMenu.addMenu(saveMenu) fileMenu.addSeparator() fileMenu.addAction(exitAct) toolbar = self.addToolBar(工具欄) toolbar.addAction(newAct) toolbar.addAction(exitAct) self.show()if __name__ == __main__: app = QApplication(sys.argv) ex = Example() sys.exit(app.exec_())

執行的結果如下：

toolbar = self.addToolBar(工具欄)toolbar.addAction(newAct)toolbar.addAction(exitAct)

工具欄使用addToolBar()方法創建。 我們使用addAction()向工具欄添加兩個動作對象。

最後

我們放一個大招，用Qt設計師來完成類Windows記事本的界面設計，由於文字敘述過於繁瑣，所以我們採用錄屏的方式（注意看操作），看看下面的視頻吧（建議下載後看超清版，否則會不清晰，解析度是1280*720）。

ok，今天就到這裡，我們下期再約。

如果你想要本次教程中的相關源碼，請關注微信公眾號：學點編程吧，發送pyqt57，會自動得到相應的百度網盤下載鏈接。