Python 小白從零開始 PyQt5 專案實戰（4）基本控制元件

本系列面向 Python 小白，從零開始實戰解說應用 QtDesigner 進行 PyQt5 的專案實戰，
什么叫從零開始？從軟體安裝、環境配置開始，不跳過一個細節，不漏掉一行代碼，不省略一個例圖，
PyQt5 提供了豐富的輸入輸出控制元件，本文介紹通過 QtDesigner 工具列創建常用的基本控制元件，包括各種按鈕控制元件、文本輸入控制元件和調節輸入控制元件，

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 專案實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 專案實戰（2）選單和工具列
Python 小白從零開始 PyQt5 專案實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 專案實戰（4）基本控制元件

1. PyQt5 控制元件簡介

1.1 什么是控制元件

控制元件也稱控制元件物件，是 Qt用戶界面上最基本的組件型別，也是構成用戶界面的基本結構，用戶界面上顯示的所有內容都是控制元件，例如按鈕、標簽、文本框，又如選單欄、工具列、狀態欄，甚至整個視窗本身也是控制元件，

QWidget 類是 PyQt5 的基類，也是所有控制元件的父類，所有的 Qt 控制元件都是 QWidget 類的子類，因此都繼承了 QWidget 類的特性，可以接收用戶的輸入事件，如滑鼠和鍵盤輸入，并可以在用戶界面上顯示控制元件內容，還可以存放其它控制元件，

1.2 編輯控制元件的屬性

控制元件具有屬性，不同型別的控制元件具有部分相同的屬性，也具有一些不同的專有屬性，

控制元件的相同屬性包括：名字，形狀，位置，大小，設定格式，控制元件的專用屬性包括：展示內容，接受輸入，用戶互動，日期，框架，等等，

所有的 Qt 控制元件都是 QWidget 類的子類，繼承了 QWidget 類的屬性，因此，我們學習控制元件可以按類進行學習，先學習其繼承的父類的通用屬性，再學習控制元件所特有的專有屬性，對于控制元件的學習就是一個類的繼承關系的結構圖，

我們以圖形界面 uiDemo5.ui 為例，介紹控制元件的通用屬性，并對控制元件的屬性進行編輯修改，

如前所述，QtDesigner 右側上方的 “物件查看器” 顯示了界面中的控制元件名稱和結構，下方的 “屬性編輯器” 顯示了選中的控制元件物件的各種屬性，在圖形界面中選擇某個控制元件，或者在 “物件查看器” 中選擇某個控制元件，在"屬性編輯器" 就會顯示該控制元件物件的屬性，

不論是視窗物件 MainWindow、選單欄 menubar、工具列 toolBar，還是按鈕 pushButton、編輯行 lineEdit，都有一些相同的屬性，例如：

• objectName：控制元件名，非常重要，準確的說是控制元件的 ID，Python 程式中訪問控制元件、控制元件互動都是使用 objectName，所有控制元件都必須具有唯一的 objectName，不能重名，不能使用中文字符，
• geometry：控制元件的大小和位置，
  • 控制元件的寬度和高度可以修改，對于 MainWindow 來說控制元件的寬度/高度就是圖形界面程式視窗的寬度/高度，
  • 控制元件位置 (X, Y) 是控制元件在視窗控制元件的坐標值，MainWindow 的控制元件位置不能修改，其它控制元件的位置 (X, Y) 可以根據需要修改，
  • minimumSize、maximumSize 是主視窗大小拉伸后，控制元件物件的最小尺寸、最大尺寸，
• font：控制元件顯示的字體選擇，包括字體、字號、風格、效果等選項，

1.3 PyQt5 的控制元件型別

要了解 QtWidgets 類的子類，可以使用 “subclasses()” 將所有的子類列印出來，共有約 30個子類，

    import PyQt5
    print(QtWidgets.QWidget.__subclasses__())

這些控制元件型別，總體上可以分類如下：

• 輸入控制元件：

  • 按鈕：QPushButton（按鍵按鈕），QToolButton（工具按鈕），QRadioButton（單選框），QCheckButton（多選框），QCommandLinkButton（連接命令的按鈕）
  • 鍵盤輸入控制元件：QlineEdit（單行輸入），QTextEdit（多行輸入），QPlainTextEdit（普通多行輸入），QkeySequenceEdit（快捷鍵輸入）
  • 調節輸入控制元件：QAbstractSpinBox（步長調節輸入），QDateEdit（日期輸入），QTimeEdit（時間輸入），QDateTimeEdit（日期和時間輸入）
  • 數字調節框控制元件：QSpinBox（整型數字調節框），QDoubleSpinBox（浮點數字調節框）
  • 滑動輸入控制元件：QDial（旋轉拖滑輸入），QSlider（直線拖動輸入），QScrollBar（滾動條），QRubberBand（橡皮筋拖拽）
  • 下拉輸入控制元件：QComboBox（組合框下拉選項），QSlider（直線拖動輸入），QScrollBar（滾動條），QRubberBand（橡皮筋拖拽）
  • 對話框輸入控制元件：QDialog（對話框），QColorDialog（顏色對話框），QFileDialog（檔案對話框），QFontDialog（字體對話框），QInputDialog（輸入對話框）
  • 日歷控制元件：QCalendarWidget（日期選擇部件）

• 顯示控制元件：

  • 內容顯示控制元件：QLabel（顯示框），QLCDNumber（液晶顯示幕），QProgressBar（進度條）
  • 對話框顯示控制元件：QMessageBox（資訊提示框），QErrorMessage（錯誤提示框），QProgressDialog（進度提示框）

• 高級控制元件：

  • 容器控制元件：QToolBox，QDialogButtonBox，QGroupBox，QMdiSubWindow
  • 結構控制元件：QMainWindow，QTabwidget，QStackedWidget，QSplitter，QDockWidget
  • 滾動控制元件：QTextBrowser，QScrollArea，QAbstractItemView，QMdiarea，QGraphicsView
  • 輔助控制元件：QFocusFrame，QSizeGrip，QDesktopWidget
  • 其它控制元件

在 QtDesigner 左側的 “WidgetBox” 工具列中，將常用的控制元件按類別進行分組，用滑鼠將工具列中的控制元件圖示拖拽到 QtDesigner 中間的圖形界面編輯視窗，就在影像界面創建了一個所選擇的控制元件，

2. 按鈕控制元件

2.1 按鈕控制元件簡介

按鈕是最常用的控制元件型別，

在 QtDesigner 左側的 “WidgetBox” 工具列中的"Buttons" 組，設有多種不同型別的按鈕控制元件：PushButton（按鍵按鈕），QToolButton（工具按鈕），QRadioButton（單選框），QCheckButton（多選框），QCommandLinkButton（連接命令的按鈕），QDialogButtonBox（標準按鈕盒）提供一系列標準按鈕，相當于按鈕控制元件的組合，

按鈕控制元件的常用屬性：

• text：顯示文本
• icon：設定圖示
• iconSize：圖示大小
• shortcut：設定快捷鍵
• checkable：設定是否自動切換按鈕
• checked：設定默認選中狀態
• autoRepeat：設定是否會在用戶按下時自動重復
• autoExclusive：設定是否啟用自動排他性（設定多選框）

按鈕控制元件的信號觸發條件：

• clicked()：當按鈕被第一次按下然后釋放時發出信號
• clicked(bool)：當按鈕被第一次按下然后釋放時發出信號，并將當前狀態傳遞給外界
• pressed()：當滑鼠游標在按鈕內時，按下滑鼠左鍵發出信號
• released()：當釋放滑鼠左鍵時發出信號
• toggled(bool)：按鈕的狀態發生變化時發出信號，并將當前狀態傳遞給外界

按鈕控制元件常用的的模式/狀態：

• 可用或不可用，禁用時按鈕變灰
• 標準按鈕，開關按鈕或選單按鈕
• 打開或關閉（僅用于開關按鈕）
• 默認狀態或正常狀態
• 是否自動重復
• 是否處于按下狀態

用滑鼠將工具列中的按鈕控制元件拖拽到 QtDesigner 中間的圖形界面編輯視窗，就在影像界面創建了一個按鈕控制元件，如下圖所示，我們在圖形界面 uiDemo5.ui 的左側，創建了幾種不同的按鈕控制元件，

2.2 按鍵按鈕（QPushButton）

QPushButton（按鍵按鈕）是最常用的按鈕，按下（或者單擊）按鈕可以執行某個操作或回答問題，例如：確定，應用，取消，關閉，是，否和幫助，

按鈕控制元件通常顯示一個文本標簽（text），可以為按鈕選擇一個圖示（icon），還可以選擇設定快捷鍵（shortcut），

按鍵按鈕的上述屬性，都可以在 “屬性編輯器” 中相應的屬性行中進行編輯修改，

當按鍵按鈕被滑鼠或快捷鍵激活時，按鈕會發出 clicked() 信號，可以通過連接槽函式來觸發特定的操作，

2.3 其它按鈕

QToolButton（工具按鈕）常用于工具列， 通常在創建 QAction 實體時創建，工具按鈕通常顯示一個圖示，可以快速訪問特定的命令或選項，

QRadioButton（單選框）是一個帶有文本標簽的單選框，可以打開（選中）或關閉（未選中），單選框被選中或者清除時，都會發出 “toggled()” 信號，可以通過連接槽函式來觸發特定的操作，

QCheckButton（多選框）是一個帶有文本標簽的復選框，除了可以打開（選中）或關閉（未選中），還提供了半選狀態（可選項），復選框被選中或者清除時，都會發射 “stateChanged()” 信號，可以通過連接槽函式來觸發特定的操作，

單選框定義了“多選一”的選擇，而復選框提供的是“多選多”的選擇，

QCommandLinkButton（連接命令的按鈕）外觀像一個扁平化的 QPushButton，并且自帶了一個向右的圖示，其用途類似于類似于單選按鈕，用于一組互斥選項之間進行選擇，

QDialogButtonBox（標準按鈕盒）提供一系列標準按鈕，可以水平或垂直布置，常用于對話框和訊息框， Qt 定義的標準按鈕包括：Yes、No、OK、Cancel、Ignore、Open、Save、Close、Apply、Help 等等，用戶可以自定義添加，

3. 輸入控制元件

3.1 輸入控制元件簡介

在 QtDesigner 左側的 “WidgetBox” 工具列中的"Input Widget" 組，設有多種不同型別的輸入控制元件，例如：
文本輸入控制元件：QlineEdit（單行輸入）、QTextEdit（多行輸入）、QPlainTextEdit（普通多行輸入）；
數字輸入控制元件：QSpinBox（整型資料輸入）、QDoubleSpinBox（浮點資料輸入）；
調節輸入控制元件：QAbstractSpinBox（步長調節輸入）、QDateEdit（日期輸入）、QTimeEdit（時間輸入）、QDateTimeEdit（日期和時間輸入），

用滑鼠將工具列中的輸入控制元件拖拽到 QtDesigner 中間的圖形界面編輯視窗，就在影像界面創建了一個按鈕控制元件，如前圖所示，我們在圖形界面 uiDemo5.ui 的中間和右側，創建了幾種不同的輸入控制元件，

3.2 文本輸入控制元件

單行文本輸入框（QlineEdit）

QLineEdit 控制元件是一個單行文本編輯器， 允許用戶輸入和編輯單行文本，并支持撤消、重做、剪切、粘貼及拖放功能，

QLineEdit 控制元件的屬性、信號、函式較多，并支持密碼輸入方式、文本框自動補全，在次不作詳細介紹，有興趣的讀者可以查看相關檔案和例程，

多行文本輸入框（QTextEdit）

QTextEdit 控制元件是一個 “所見即所得” 的多行富文本編輯器， 允許用戶輸入和編輯多行文本，并支持HTML4 標簽子集，可以加載純文本和富文本的檔案，適用于編輯和瀏覽大型的富文本檔案，

QTextEdit適用于段落和字符，可以顯示影像，串列和表格，如果文本太大而無法在文本編輯的視口中查看，則會出現滾動條，

TextEdit不僅可以顯示文本，還可以顯示HTML檔案

普通多行輸入（QPlainTextEdit）

QPlainTextEdit 控制元件是一個多行的純文本編輯器，允許用戶輸入和編輯多行純文本，不支持表格或嵌入幀，針對純文本的處理進行了優化，可以處理更大的檔案和更快速的回應，

3.3 調節輸入控制元件

步長調節輸入（QAbstractSpinBox）

QAbstractSpinBox 將所有步長調節器的通用的功能抽象出了一個父類，也可以直接實體化使用，QAbstractSpinBox包含了一個QLineEdit和兩個QPushbutton，資料的更改可以通過點擊按鈕或使用鍵盤輸入，

日期和時間輸入（QDateEdit/QTimeEdit/QDateTimeEdit）

QDateEdit 控制元件用于編輯日期，QTimeEdit 控制元件用于編輯時間，QDateTimeEdit同時編輯日期時間的控制元件，可以使用鍵盤上的上下鍵頭按鈕來增加或減少日期、時間，

整型數字調節框（QSpinBox）

QSpinBox 是一個計數器控制元件，允許用戶選擇一個整數通過上下按鍵遞增或者遞減，也可以直接輸入整數的數值，默認取值范圍為 0-99，每次調節的步長為 1，

浮點數字調節框（QDoubleSpinBox）

QDoubleSpinBox 是浮點資料計數器控制元件，用于處理浮點數值，默認精度為 2位小數，-

4. Python 應用程式呼叫圖形界面

在 QtDesigner 將設計的圖形界面保存為 uiDemo5.ui，運行 PyUIC 將選中的 .ui 檔案轉換為 .py 檔案，在該路徑生成 uiDemo5.py 檔案，

我們撰寫一個主程式呼叫設計的圖形界面 uiDemo5.py，就可以完成一個圖形界面應用程式，

# GUIdemo5.py
# Demo5 of GUI by PyQt5
# Copyright 2021 youcans, XUPT
# Crated：2021-10-12

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox
from uiDemo5 import Ui_MainWindow  # 匯入 uiDemo5.py 中的 Ui_MainWindow 界面類

class MyMainWindow(QMainWindow, Ui_MainWindow):  # 繼承 QMainWindow 類和 Ui_MainWindow 界面類
    def __init__(self, parent=None):
        super(MyMainWindow, self).__init__(parent)  # 初始化父類
        self.setupUi(self)  # 繼承 Ui_MainWindow 界面類

    def trigger_actHelp(self):  # 動作 actHelp 觸發
        QMessageBox.about(self, "About",
                          """數字影像處理工具箱 v1.0\nCopyright YouCans, XUPT 2021""")
        return

if __name__ == '__main__':
    app = QApplication(sys.argv)  # 在 QApplication 方法中使用，創建應用程式物件
    myWin = MyMainWindow()  # 實體化 MyMainWindow 類，創建主視窗
    myWin.show()  # 在桌面顯示控制元件 myWin
    sys.exit(app.exec_())  # 結束行程，退出程式

由于本文主要介紹常用的基本控制元件，在程式中尚未將控制元件的信號連接槽函式，因此運行程式 uiDemo5.py 時，其中的一些按鈕控制元件在點擊后并沒有觸發操作，

在下一篇文章中，我們將介紹 PyQt5 中的頁面布局，

【本節完】

著作權宣告：

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』 原創作品

原創作品，轉載必須標注原文鏈接：(https://blog.csdn.net/youcans/article/details/120665014)

Copyright 2021 youcans, XUPT

Crated：2021-10-12

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 專案實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 專案實戰（2）選單和工具列
Python 小白從零開始 PyQt5 專案實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 專案實戰（4）基本控制元件