# Qt5 中的自定義小部件 > 原文： [http://zetcode.com/gui/qt5/customwidget/](http://zetcode.com/gui/qt5/customwidget/) 在 Qt5 C++ 編程教程的這一部分中，我們將創建一個自定義小部件。 大多數工具箱通常僅提供最常用的小部件，例如按鈕，文本小部件或滑塊。 沒有工具包可以提供所有可能的小部件。 程序員必須自己創建此類小部件。 他們使用工具箱提供的繪圖工具來完成此任務。 有兩種可能：程序員可以修改或增強現有的小部件，或者可以從頭開始創建自定義小部件。 ## 刻錄小部件 在下一個示例中，我們創建一個自定義的刻錄小部件。 可以在 Nero 或 K3B 之類的應用中看到此小部件。 該小部件將從頭開始創建。 `burning.h` ```cpp #pragma once #include <QWidget> #include <QSlider> #include <QFrame> #include "widget.h" class Burning : public QFrame { Q_OBJECT public: Burning(QWidget *parent = 0); int getCurrentWidth(); public slots: void valueChanged(int); private: QSlider *slider; Widget *widget; int cur_width; void initUI(); }; ``` 這是示例主窗口的頭文件。 ```cpp public: Burning(QWidget *parent = 0); int getCurrentWidth(); ``` `getCurrentWidth()`方法將用于確定滑塊值。 ```cpp private: QSlider *slider; Widget *widget; int cur_width; void initUI(); ``` 窗口的工作區上將有兩個小部件：內置滑塊小部件和自定義小部件。 `cur_width`變量將保存滑塊中的當前值。 繪制自定義窗口小部件時使用此值。 `burning.cpp` ```cpp #include <QVBoxLayout> #include <QHBoxLayout> #include "burning.h" Burning::Burning(QWidget *parent) : QFrame(parent) { initUI(); } void Burning::initUI() { const int MAX_VALUE = 750; cur_width = 0; slider = new QSlider(Qt::Horizontal , this); slider->setMaximum(MAX_VALUE); slider->setGeometry(50, 50, 130, 30); connect(slider, &QSlider::valueChanged, this, &Burning::valueChanged); QVBoxLayout *vbox = new QVBoxLayout(this); QHBoxLayout *hbox = new QHBoxLayout(); vbox->addStretch(1); widget = new Widget(this); hbox->addWidget(widget, 0); vbox->addLayout(hbox); setLayout(vbox); } void Burning::valueChanged(int val) { cur_width = val; widget->repaint(); } int Burning::getCurrentWidth() { return cur_width; } ``` 在這里，我們構建示例的主窗口。 ```cpp connect(slider, &QSlider::valueChanged, this, &Burning::valueChanged); ``` 當我們移動滑塊時，將執行`valueChanged()`槽。 ```cpp void Burning::valueChanged(int val) { cur_width = val; widget->repaint(); } ``` 更改滑塊的值時，我們將存儲新值并重新繪制自定義窗口小部件。 `widget.h` ```cpp #pragma once #include <QFrame> class Burning; class Widget : public QFrame { public: Widget(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *e); void drawWidget(QPainter &qp); private: QWidget *m_parent; Burning *burn; static const int DISTANCE = 19; static const int LINE_WIDTH = 5; static const int DIVISIONS = 10; static const float FULL_CAPACITY = 700; static const float MAX_CAPACITY = 750; }; ``` 這是自定義刻錄窗口小部件的頭文件。 ```cpp private: QWidget *m_parent; Burning *burn; ``` 我們存儲一個指向父窗口小部件的指針。 我們通過該指針獲得`cur_width`。 ```cpp const int DISTANCE = 19; const int LINE_WIDTH = 5; const int DIVISIONS = 10; const float FULL_CAPACITY = 700; const float MAX_CAPACITY = 750; ``` 這些是重要的常數。 `DISTANCE`是比例尺上的數字與其父邊界頂部之間的距離。 `LINE_WIDTH`是垂直線的寬度。 `DIVISIONS`是秤的數量。 `FULL_CAPACITY`是媒體的容量。 達到目標后，就會發生過度刻錄。 這通過紅色可視化。 `MAX_CAPACITY`是介質的最大容量。 `widget.cpp` ```cpp #include <QtGui> #include "widget.h" #include "burning.h" const int PANEL_HEIGHT = 30; Widget::Widget(QWidget *parent) : QFrame(parent) { m_parent = parent; setMinimumHeight(PANEL_HEIGHT); } void Widget::paintEvent(QPaintEvent *e) { QPainter qp(this); drawWidget(qp); QFrame::paintEvent(e); } void Widget::drawWidget(QPainter &qp) { QString num[] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; int asize = sizeof(num)/sizeof(num[1]); QColor redColor(255, 175, 175); QColor yellowColor(255, 255, 184); int width = size().width(); Burning *burn = (Burning *) m_parent; int cur_width = burn->getCurrentWidth(); int step = (int) qRound((double)width / DIVISIONS); int till = (int) ((width / MAX_CAPACITY) * cur_width); int full = (int) ((width / MAX_CAPACITY) * FULL_CAPACITY); if (cur_width >= FULL_CAPACITY) { qp.setPen(yellowColor); qp.setBrush(yellowColor); qp.drawRect(0, 0, full, 30); qp.setPen(redColor); qp.setBrush(redColor); qp.drawRect(full, 0, till-full, PANEL_HEIGHT); } else if (till > 0) { qp.setPen(yellowColor); qp.setBrush(yellowColor); qp.drawRect(0, 0, till, PANEL_HEIGHT); } QColor grayColor(90, 80, 60); qp.setPen(grayColor); for (int i=1; i <=asize; i++) { qp.drawLine(i*step, 0, i*step, LINE_WIDTH); QFont newFont = font(); newFont.setPointSize(7); setFont(newFont); QFontMetrics metrics(font()); int w = metrics.width(num[i-1]); qp.drawText(i*step-w/2, DISTANCE, num[i-1]); } } ``` 在這里，我們繪制自定義窗口小部件。 我們繪制矩形，垂直線和數字。 ```cpp void Widget::paintEvent(QPaintEvent *e) { QPainter qp(this); drawWidget(qp); QFrame::paintEvent(e); } ``` 自定義窗口小部件的圖形委托給`drawWidget()`方法。 ```cpp QString num[] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; ``` 我們使用這些數字來構建刻錄小部件的比例。 ```cpp int width = size().width(); ``` 我們得到小部件的寬度。 自定義窗口小部件的寬度是動態的。 用戶可以調整大小。 ```cpp Burning *burn = (Burning *) m_parent; int cur_width = burn->getCurrentWidth(); ``` 我們得到`cur_width`值。 ```cpp int till = (int) ((width / MAX_CAPACITY) * cur_width); int full = (int) ((width / MAX_CAPACITY) * FULL_CAPACITY); ``` 我們使用`width`變量在比例尺值和自定義小部件的度量之間進行轉換。 ```cpp qp.setPen(redColor); qp.setBrush(redColor); qp.drawRect(full, 0, till-full, PANEL_HEIGHT); ``` 這三行畫出紅色矩形，表示過度燃燒。 ```cpp qp.drawLine(i*step, 0, i*step, LINE_WIDTH); ``` 在這里，我們畫出小的垂直線。 ```cpp QFontMetrics metrics(font()); int w = metrics.width(num[i-1]); qp.drawText(i*step-w/2, DISTANCE, num[i-1]); ``` 在這里，我們繪制刻度的數字。 為了精確定位數字，我們必須獲得字符串的寬度。 `main.cpp` ```cpp #include <QApplication> #include "burning.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); Burning window; window.resize(370, 200); window.setWindowTitle("The Burning widget"); window.show(); return app.exec(); } ``` 這是主文件。  圖：刻錄小部件 在 Qt5 教程的這一部分中，我們創建了一個自定義的刻錄小部件。