Qt Creator自定義控件開發流程

---

在 Qt 5.9 Creator 中開發自定義控件的完整流程如下，分為設計、實現、集成和測試四個階段：

1. 創建自定義控件類

(1) 新建類文件

• 右鍵項目 → 添加新文件 → C++ Class
• 基類選擇 QWidget 或現有控件（如 QPushButton）
• 命名類名（如 CustomSlider），勾選 “Include QWidget”
• 生成頭文件（customslider.h）和源文件（customslider.cpp）

(2) 實現控件功能

示例頭文件 (customslider.h):

#include <QWidget>
#include <QSlider>
#include <QLabel>class CustomSlider : public QWidget {Q_OBJECT // 必須包含宏
public:explicit CustomSlider(QWidget *parent = nullptr);private:QSlider *slider;QLabel *label;void setupUI(); // 初始化UI
private slots:void updateLabel(int value); // 響應滑塊變化
};

示例源文件 (customslider.cpp):

#include "customslider.h"CustomSlider::CustomSlider(QWidget *parent) : QWidget(parent) {setupUI();
}void CustomSlider::setupUI() {QVBoxLayout *layout = new QVBoxLayout(this);slider = new QSlider(Qt::Horizontal);label = new QLabel("0");layout->addWidget(slider);layout->addWidget(label);connect(slider, &QSlider::valueChanged, this, &CustomSlider::updateLabel);
}void CustomSlider::updateLabel(int value) {label->setText(QString::number(value));
}

---

2. 在 Designer 中集成自定義控件

(1) 提升為自定義控件

• 打開 .ui 文件（如 mainwindow.ui）
• 從 Widget Box 拖入一個 QWidget 容器
• 右鍵該容器 → “提升為…”
• 填寫信息：
  • 提升的類名稱: CustomSlider
  • 頭文件: customslider.h
• 點擊 “添加” → “提升”

(2) 調整控件屬性

• 提升后可在 屬性編輯器 中修改基礎屬性（如大小、名稱）
• 自定義屬性需在代碼中通過 Q_PROPERTY 聲明（進階用法）

---

3. 在代碼中使用自定義控件

(1) 直接代碼創建

#include "mainwindow.h"
#include "customslider.h"MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {CustomSlider *slider = new CustomSlider(this);setCentralWidget(slider);
}

(2) 訪問提升后的控件（通過 ui 指針）

// 在 MainWindow 類中使用
ui->customWidget->setMinimum(0); // 假設提升的對象名為 customWidget

---

4. 進階：設計器插件（可選）

若需在 Designer Widget Box 中直接拖拽自定義控件：

(1) 創建插件項目

• 文件 → 新建項目 → Library → Qt Designer Custom Widget Plugin

• 填寫插件信息（如 MyWidgetPlugin）

• 在生成的類中注冊控件：

  QList<QDesignerCustomWidgetInterface*> MyWidgetPlugin::customWidgets() const {QList<QDesignerCustomWidgetInterface*> plugins;plugins << new CustomSliderInterface; // 實現接口類return plugins;
  }
  

(2) 構建并部署插件

• 編譯生成 .dll (Windows) 或 .so (Linux)
• 將庫文件放入 Qt Designer 插件目錄：
  • Windows: Qt安裝路徑/plugins/designer
  • Linux: /usr/lib/qt5/plugins/designer

---

5. 測試與調試

1. 運行時測試:
   • 運行主程序，驗證控件交互邏輯
   • 使用 qDebug() 輸出調試信息
2. 設計模式驗證:
   • 在 Qt Designer 中檢查提升控件的布局適應性
   • 測試動態屬性修改（如通過樣式表）

---

注意事項

1. 內存管理:

   • 在自定義控件構造函數中設置父對象或使用布局自動管理

   • 重寫 paintEvent 實現自定義繪制：

     void CustomSlider::paintEvent(QPaintEvent *event) {QPainter painter(this);// 自定義繪制代碼
     }
     

2. 信號與槽:

   • 暴露內部控件的信號（如轉發滑塊信號）：

     // 在 CustomSlider 類中添加：
     signals:void valueChanged(int);
     // 在構造函數中連接：
     connect(slider, &QSlider::valueChanged, this, &CustomSlider::valueChanged);
     

3. 樣式支持:

   • 使用 Q_PROPERTY 定義樣式屬性

   • 在 .qss 文件中為自定義控件設置樣式：

     CustomSlider {background-color: #F0F0F0;
     }
     CustomSlider QSlider {height: 20px;
     }
     

---

完整流程圖示

[創建類] → [實現功能] → [提升QWidget] → [設計器布局] → [代碼集成] → [測試]