Qt GUI 庫總結

Qt GUI 庫（QtGui）是 Qt 框架中負責圖形用戶界面（GUI）開發的核心模塊。本文將一步步詳解 QtGui，從基礎入門到高級應用，幫助你全面掌握其功能。以下內容包括環境配置、基本功能、核心特性及進階技巧，配以代碼示例。

---

1. 準備工作

• 創建項目：在 Qt Creator 中選擇 Qt Widgets Application，生成項目文件（.pro）：

  QT += core gui widgets
  SOURCES += main.cpp
  

---

2. 入門：創建第一個窗口

使用 QWidget 創建一個簡單窗口。

代碼示例：

#include <QApplication>
#include <QWidget>int main(int argc, char *argv[]) {QApplication app(argc, argv);QWidget window;window.setWindowTitle("我的第一個 Qt 窗口");window.resize(400, 300);window.show();return app.exec();
}

步驟解析：

1. QApplication 初始化應用程序。
2. QWidget 創建窗口，設置標題和大小。
3. show() 顯示窗口，exec() 啟動事件循環。

結果：運行后出現一個 400x300 的空白窗口。

---

3. 基礎功能：繪圖與事件

3.1 繪圖（QPainter）

使用 QPainter 在窗口上繪制圖形。

代碼示例：

#include <QApplication>
#include <QWidget>
#include <QPainter>class MyWidget : public QWidget {
protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);painter.setPen(Qt::red);painter.drawRect(50, 50, 100, 100);painter.drawText(70, 100, "Hello Qt");}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);MyWidget window;window.resize(200, 200);window.show();return app.exec();
}

步驟解析：

1. 繼承 QWidget，重寫 paintEvent。
2. 使用 QPainter 繪制紅色矩形和文本。

結果：窗口顯示紅色矩形和 “Hello Qt” 文本。

3.2 事件處理

處理用戶輸入，如鼠標點擊。

代碼示例：

#include <QApplication>
#include <QWidget>
#include <QMouseEvent>
#include <QDebug>class MyWidget : public QWidget {
protected:void mousePressEvent(QMouseEvent *event) override {qDebug() << "點擊坐標:" << event->pos();}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);MyWidget window;window.resize(200, 200);window.show();return app.exec();
}

步驟解析：

1. 重寫 mousePressEvent。
2. 使用 event->pos() 獲取點擊位置。

結果：點擊窗口時，控制臺輸出坐標。

---

4. 核心功能：窗口與對話框

4.1 創建對話框

使用 QDialog 創建模態對話框。

代碼示例：

#include <QApplication>
#include <QDialog>
#include <QPushButton>int main(int argc, char *argv[]) {QApplication app(argc, argv);QDialog dialog;dialog.setWindowTitle("對話框示例");QPushButton button("關閉", &dialog);button.setGeometry(50, 50, 80, 30);QObject::connect(&button, &QPushButton::clicked, &dialog, &QDialog::accept);dialog.exec();return app.exec();
}

步驟解析：

1. QDialog 創建對話框。
2. 添加按鈕并連接信號，點擊后關閉。

結果：顯示模態對話框，點擊按鈕關閉。

---

5. 進階：自定義與動畫

5.1 自定義控件

創建自定義按鈕。

代碼示例：

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QMouseEvent>class MyButton : public QWidget {Q_OBJECT
public:MyButton(QWidget *parent = nullptr) : QWidget(parent) {setFixedSize(100, 50);}protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);painter.setBrush(Qt::blue);painter.drawRect(0, 0, width(), height());painter.drawText(rect(), Qt::AlignCenter, "點擊");}void mousePressEvent(QMouseEvent *) override {emit clicked();}signals:void clicked();
};int main(int argc, char *argv[]) {QApplication app(argc, argv);MyButton button;QObject::connect(&button, &MyButton::clicked, []() {qDebug() << "按鈕被點擊!";});button.show();return app.exec();
}
#include "main.moc"

步驟解析：

1. 繼承 QWidget，繪制藍色按鈕。
2. 定義 clicked 信號，點擊時觸發。

結果：顯示藍色按鈕，點擊輸出消息。

5.2 添加動畫

使用 QPropertyAnimation 為控件添加動畫。

代碼示例：

#include <QApplication>
#include <QPushButton>
#include <QPropertyAnimation>int main(int argc, char *argv[]) {QApplication app(argc, argv);QPushButton button("移動我");button.show();QPropertyAnimation animation(&button, "geometry");animation.setDuration(2000);animation.setStartValue(QRect(0, 0, 100, 30));animation.setEndValue(QRect(200, 200, 100, 30));animation.start();return app.exec();
}

步驟解析：

1. 創建按鈕并設置動畫。
2. 定義動畫起止位置，持續 2 秒。

結果：按鈕從左上角移動到右下角。

---

6. 精通：優化與調試

6.1 性能優化

減少重繪以提升性能。

代碼示例：

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QTimer>class OptWidget : public QWidget {
public:OptWidget() {timer = new QTimer(this);timer->setSingleShot(true);connect(timer, &QTimer::timeout, this, &OptWidget::update);}protected:void paintEvent(QPaintEvent *) override {QPainter painter(this);painter.drawLine(0, 0, width(), height());}void resizeEvent(QResizeEvent *) override {timer->start(50); // 延遲重繪}private:QTimer *timer;
};int main(int argc, char *argv[]) {QApplication app(argc, argv);OptWidget window;window.resize(300, 200);window.show();return app.exec();
}

步驟解析：

1. 使用 QTimer 延遲重繪。
2. 避免頻繁調整窗口大小時的重復繪制。

結果：窗口調整大小時性能更優。

6.2 調試

監視事件以調試程序。

代碼示例：

#include <QApplication>
#include <QWidget>
#include <QEvent>
#include <QDebug>class DebugWidget : public QWidget {
protected:bool event(QEvent *event) override {qDebug() << "事件:" << event->type();return QWidget::event(event);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);DebugWidget window;window.show();return app.exec();
}

步驟解析：

1. 重寫 event() 輸出事件類型。
2. 用于跟蹤程序行為。

結果：控制臺顯示所有事件類型。

---