Qt中自定義控件的三種實現方式

在 Qt 應用開發中，標準控件往往無法滿足所有需求。自定義控件允許開發者創建具有特定功能和外觀的控件，提高代碼復用性和界面一致性。Qt 提供了多種方式來開發自定義控件，從簡單的組合現有控件到完全自定義繪制。

1. 繼承現有控件并重寫（最常用）

適用場景：已有控件功能基本滿足，但需要添加行為或限制。

實現方式：繼承如 QLineEdit、QPushButton 等控件，重寫部分方法。

class MyCustomButton : public QPushButton {Q_OBJECT
public:explicit MyCustomButton(QWidget *parent = nullptr) : QPushButton(parent) {}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);// 自定義繪制邏輯painter.fillRect(rect(), Qt::red);painter.drawText(rect(), Qt::AlignCenter, text());}void mousePressEvent(QMouseEvent *event) override {// 自定義鼠標點擊處理emit customClicked();QPushButton::mousePressEvent(event); // 調用父類實現}signals:void customClicked();
};

2. 組合現有控件（復合控件）

將多個現有控件組合起來，形成一個新的功能更復雜的控件。通過一個容器控件管理多個子控件，并對外提供統一的接口。

適用場景：需要將多個簡單控件組合成一個功能單元，如自定義的日期選擇器、帶標簽的輸入框等。

實現要點：

• 通常繼承自QWidget作為容器
• 在構造函數中創建并布局子控件
• 提供統一的接口用于操作子控件
• 可以將子控件的信號匯總或轉換為自定義信號

class SearchBox : public QWidget {Q_OBJECT
public:explicit SearchBox(QWidget *parent = nullptr) : QWidget(parent) {// 創建子控件m_lineEdit = new QLineEdit(this);m_button = new QPushButton("Search", this);// 設置布局QHBoxLayout *layout = new QHBoxLayout(this);layout->addWidget(m_lineEdit);layout->addWidget(m_button);// 連接信號槽connect(m_button, &QPushButton::clicked, this, &SearchBox::searchClicked);}QString getText() const {return m_lineEdit->text();}signals:void searchClicked();private:QLineEdit *m_lineEdit;QPushButton *m_button;
};

3. 完全自定義繪制（自繪控件）

直接繼承QWidget或QFrame，完全通過重寫paintEvent()函數實現所有繪制邏輯，不依賴任何現有控件。

適用場景：需要實現特殊外觀或行為的控件，如儀表盤、自定義圖表、音頻波形顯示等。

實現要點：

通常繼承自QWidget

重寫paintEvent()實現所有繪制邏輯

重寫sizeHint()提供默認大小建議

重寫事件處理函數實現交互功能

可能需要使用QPainter進行復雜繪制

class DialGauge : public QWidget {Q_OBJECTQ_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
public:explicit DialGauge(QWidget *parent = nullptr) : QWidget(parent), m_value(0) {}int value() const { return m_value; }void setValue(int value) {if (m_value != value) {m_value = value;emit valueChanged(m_value);update(); // 觸發重繪}}QSize sizeHint() const override {return QSize(200, 200);}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 繪制背景painter.drawEllipse(rect().adjusted(10, 10, -10, -10));// 繪制指針painter.save();painter.translate(width()/2, height()/2);painter.rotate(m_value * 1.8); // 將0-100轉換為0-180度painter.drawLine(0, 0, 0, -height()/2 + 20);painter.restore();}signals:void valueChanged(int value);private:int m_value;
};

選擇建議

• 如需簡單擴展現有控件功能，選擇第一種方式
• 如需組合多個控件形成新控件，選擇第二種方式
• 如需實現獨特外觀或復雜圖形，選擇第三種方式

參考文章：

1.Qt 自定義控件開發方法與實踐

2.QT中自定義控件的三種實現方式