在Qt5 C++编程教程的这一部分,我们创建一个自定义widget。
大多数工具包通常只提供最常见的widget,如按钮、文本widget或滑块。没有哪个工具包能提供所有可能的部件。程序员必须自己创建这样的小部件。他们通过使用工具包提供的绘图工具来完成这一工作。有两种可能性:程序员可以修改或加强现有的部件,或者他可以从头开始创建一个自定义的部件。
燃烧的小部件
在下一个例子中,我们创建了一个自定义的燃烧小部件。这个小组件可以在Nero或K3B等应用程序中看到。这个小组件是从头开始创建的。
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" };
我们使用这些数字来建立Burning小组件的比例。
int width = size().width();
我们得到小部件的宽度。自定义小部件的宽度是动态的。它可以被用户调整大小。
int till = (int) ((width / MAX_CAPACITY) * cur_width);
int full = (int) ((width / MAX_CAPACITY) * FULL_CAPACITY);
我们使用宽度变量来做转换,在比例尺的值和自定义部件的测量值之间进行转换。
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("The Burning widget");
window.show();
return app.exec();
}
这是主文件。