大道至简，在 Qt5 C++入门教程的这一部分，我们将创建一个自定义部件。

大多数工具包通常仅提供诸如按钮、文本部件或滑块等最常见的部件。没有哪个工具包能够提供所有可能的部件。程序员必须自行创建此类部件，这可以借助工具包提供的绘图工具来实现。有两种可行的方式：

1.程序员既可以修改或增强现有的部件。

2.也能够从零开始创建自定义部件。

刻录小部件（自定义控件）

在接下来的示例中，我们要从零开始创建一个自定义的刻录部件。这种部件能在 一些视频编辑软件，DVD刻录软件等应用程序中见到，它是从零开始创建的。

application.h

#pragma once

#include <QWidget>
#include <QSlider>
#include <QFrame>
#include "widget.h"

class Application : public QFrame {

  Q_OBJECT

  public:
    Application(QWidget *parent = nullptr);

  private:
    QSlider *slider;
    Widget *widget;

    void initUI();
};

application.cpp

#include <QVBoxLayout>
#include <QHBoxLayout>
#include "application.h"

Application::Application(QWidget *parent)
    : QFrame(parent) {

  initUI();
}

void Application::initUI() {

  const int MAX_VALUE = 750;

  slider = new QSlider(Qt::Horizontal , this);
  slider->setMaximum(MAX_VALUE);
  slider->setGeometry(50, 50, 170, 30);

  widget = new Widget(this);
  connect(slider, &QSlider::valueChanged, widget, &Widget::setValue);

  auto *vbox = new QVBoxLayout(this);
  auto *hbox = new QHBoxLayout();

  vbox->addStretch(1);
  hbox->addWidget(widget, 0);
  vbox->addLayout(hbox);

  setLayout(vbox);
}

我们在这里构建示例的主窗口。

connect(slider, &QSlider::valueChanged, widget, &Widget::setValue);

当我们移动滑块时，valueChanged 槽就会被执行。

widget.h

#pragma once

#include <QFrame>

class Widget : public QFrame {

  Q_OBJECT;

  public:
    Widget(QWidget *parent = nullptr);

  public slots:
    void setValue(int);

  protected:
    void paintEvent(QPaintEvent *e);
    void drawWidget(QPainter &qp);

  private:
    int cur_width;

    static constexpr int DISTANCE = 19;
    static constexpr int LINE_WIDTH = 5;
    static constexpr int DIVISIONS = 10;
    static constexpr float FULL_CAPACITY = 700;
    static constexpr float MAX_CAPACITY = 750;
};

这是自定义刻录部件的头文件。

private:
  int cur_width;

cur_width 变量用于存储滑块的当前值，在绘制自定义部件时会用到这个值。

static constexpr int DISTANCE = 19;
static constexpr int LINE_WIDTH = 5;
static constexpr int DIVISIONS = 10;
static constexpr float FULL_CAPACITY = 700;
static constexpr float MAX_CAPACITY = 750;

这些都是重要的常量。DISTANCE 指的是刻度上的数字与父边框顶部的距离；LINE_WIDTH 是垂直线的宽度；DIVISIONS 是刻度的划分数量；FULL_CAPACITY 是介质的容量，达到该容量后就会进行超刻，超刻状态用红色表示；MAX_CAPACITY 则是介质的最大容量。

widget.cpp

#include <QtGui>
#include "widget.h"

const int PANEL_HEIGHT = 30;

Widget::Widget(QWidget *parent)
    : QFrame(parent), cur_width(0) {

  setMinimumHeight(PANEL_HEIGHT);
}

void Widget::setValue(int value)
{
  cur_width = value;
  repaint();
}

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();

  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(8);
    setFont(newFont);

    QFontMetrics metrics(font());

    int w = metrics.horizontalAdvance(num[i-1]);
    qp.drawText(i*step-w/2, DISTANCE, num[i-1]);
  }
}

我们在这儿绘制自定义部件，具体绘制内容包括矩形、垂直线和数字。

void Widget::setValue(int value)
{
  cur_width = value;
  repaint();
}

我们把当前选中的值存储到 cur_width 变量中，然后重新绘制部件。

void Widget::paintEvent(QPaintEvent *e) {

  QPainter qp(this);
  drawWidget(qp);

  QFrame::paintEvent(e);
}

自定义部件的绘制工作被委托给了 drawWidget 方法。

QString num[] = { "75", "150", "225", "300", "375", "450",
  "525", "600", "675" };

我们使用这些数字来构建刻录部件的刻度。

int width = size().width();

我们获取部件的宽度，自定义部件的宽度是动态的，用户可以对其进行调整。

int till = (int) ((width / MAX_CAPACITY) * cur_width);
int full = (int) ((width / MAX_CAPACITY) * FULL_CAPACITY);

我们利用 width 变量进行转换，在刻度值和自定义部件的尺寸之间建立联系。

qp.setPen(redColor);
qp.setBrush(redColor);
qp.drawRect(full, 0, till-full, PANEL_HEIGHT);

这三行代码绘制红色矩形，用于指示超刻状态。

qp.drawLine(i*step, 0, i*step, LINE_WIDTH);

我们在这里绘制小垂直线。

QFontMetrics metrics(font());

int w = metrics.horizontalAdvance(num[i-1]);
qp.drawText(i*step-w/2, DISTANCE, num[i-1]);

我们在这里绘制刻度数字。为了精确地定位这些数字，我们需要获取字符串的宽度。

main.cpp

#include <QApplication>
#include "application.h"

int main(int argc, char *argv[]) {

  QApplication app(argc, argv);
  Application window;

  window.resize(370, 200);
  window.setWindowTitle("刻录部件");
  window.show();

  return app.exec();
}