Qt-Basic

學習內容

1. 添加文字輸入框與按鈕。
2. 顯示用戶輸入的文字。
3. 使用按鈕清除輸入框文字內容。

教學錄影

程式碼範例

from PyQt6.QtWidgets import (
    QApplication, QLabel, QLineEdit,
    QPushButton, QVBoxLayout, QWidget, QMessageBox
)
import sys

class MainWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 輸入與互動")
        self.resize(400, 300)

        # 元件：標籤、輸入框、按鈕
        self.label = QLabel("請輸入文字並點擊按鈕：", self)
        self.input_field = QLineEdit(self)
        self.input_field.setPlaceholderText("在這裡輸入...")
        self.display_button = QPushButton("顯示文字", self)
        self.clear_button = QPushButton("清除文字", self)

        # 設定佈局
        layout = QVBoxLayout()
        layout.addWidget(self.label)
        layout.addWidget(self.input_field)
        layout.addWidget(self.display_button)
        layout.addWidget(self.clear_button)
        self.setLayout(layout)

        # 事件連接
        self.display_button.clicked.connect(self.display_text)
        self.clear_button.clicked.connect(self.clear_text)

    def display_text(self):
        text = self.input_field.text()
        if text.strip():
            self.label.setText(f"您輸入了：{text}")
        else:
            QMessageBox.warning(self, "警告", "輸入欄位為空！")

    def clear_text(self):
        self.input_field.clear()
        self.label.setText("請輸入文字並點擊按鈕：")

# 主程式入口
if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

程式碼講解

此處只列出部份程式碼的說明，其餘部份請參考　上一節　的解說。

from PyQt6.QtWidgets import (
    QApplication, QLabel, QLineEdit,
    QPushButton, QVBoxLayout, QWidget, QMessageBox
)
import sys

• QLineEdit 用來輸入文字，QMessageBox 用來顯示訊息。

---

self.input_field = QLineEdit(self)
self.input_field.setPlaceholderText("在這裡輸入...")

• QLineEdit：單行文字輸入框。
  • self.input_field = QLineEdit(self)：創建一個輸入框。
  • setPlaceholderText()：設定提示文字，當輸入框為空時顯示。

---

def display_text(self):
    text = self.input_field.text()
    if text.strip():
        self.label.setText(f"您輸入了：{text}")
    else:
        QMessageBox.warning(self, "警告", "輸入欄位為空！")

• self.input_field.text()：獲取輸入框中的文字。
• strip()：移除輸入文字前後的空白，判斷輸入是否為空。
• self.label.setText()：更新標籤的文字為用戶輸入的內容。
• QMessageBox.warning()：如果輸入框為空，彈出警告訊息框。

---

def clear_text(self):
    self.input_field.clear()
    self.label.setText("請輸入文字並點擊按鈕：")

• self.input_field.clear()：清除輸入框的內容。
• self.label.setText()：將標籤的文字重置為初始提示文字。

總結

這段程式碼展示了一個簡單的 PyQt6 GUI 程式，實現了以下功能：

1. 顯示標籤和輸入框。
2. 按下按鈕後顯示輸入的文字，並進行空白檢查。
3. 清除輸入框與標籤內容。
4. 使用垂直佈局管理元件。
5. 包含訊息框警告提示，增強用戶體驗。

練習

1. 添加一個「反轉文字」按鈕，點擊後顯示反轉的文字。
2. 當輸入的文字超過 10 個字元時，彈出提示框「文字太長！」。