Chapter5 创建自定义窗口部件
Qt本身已经包含了绝大部分,我们开发过程中所需要的窗体部件,比如说QPushButton,QLineEdit等等,我们也都接触过,用起来很方便.但是有的时候,我们由于应用上的需要,而内置的窗口部件又不能满足我们的功能,于是就需要我们自己动手,写一个自定义的窗口部件出来.
非常幸运,Qt中一种叫做元对象(meta object)的机制救了我们.目前我理解的也并不深刻,简单说下自己的理解:元对象,其实就是利用了C++里抽象,封装,继承以及多态这种面向对象的设计思路,通过继承,重新为子类实现功能,常规功能保持不变,因此我们可以得到自定义的子类.
这也就谈及了Qt自定义窗口部件的两种方法:
1.对一个已经存在的Qt窗口部件进行子类化
2.直接对QWidget进行子类化
上面两种方法可以看出:第一种比较简单,但是实现的功能有限,要围绕其继承的父类对象展开,第二种方法较为麻烦,但是自由度更高.
1.自定义Qt窗口部件
hexspinbox.h
#ifndef HEXSPINBOX_H
#define HEXSPINBOX_H
#include <QSpinBox>
class QRegExpValidator;
class HexSpinBox : public QSpinBox{
Q_OBJECT
public:
explicit HexSpinBox(QWidget *parent = 0);
protected:
QValidator::State validate(QString &text, int &pos) const ;
virtual int valueFromText(const QString &text) const;
virtual QString textFromValue(int value) const;
private:
QRegExpValidator *validator;
};
#endif
代码并不复杂,在原有QSpinBox的基础上增加了一个正则表达式检验器,并且重新实现三个虚函数.validate()函数返回一个QValidator::State,验证用户输入的合法性,valueFromText()会在用户输入的时候触发,textFromValue()会在用户通过微调框调整值的时候触发.
注意:在继承QSpinxBox的时候,必须加上explicit关键字,禁止隐式转换
hexspinbox.cpp
#include <QtWidgets>
#include "hexspinbox.h"
HexSpinBox::HexSpinBox(QWidget *parent) : QSpinBox(parent){
setRange(0, 255);
validator = new QRegExpValidator(QRegExp("[0-9A-Fa-f]{1,8}"), this);
}
QValidator::State HexSpinBox::validate(QString &text, int &pos) const{
return validator->validate(text, pos);
}
QString HexSpinBox::textFromValue(int value) const{
return QString::number(value, 16).toUpper();
}
int HexSpinBox::valueFromText(const QString &text) const{
bool ok;
return text.toInt(&ok, 16);
}
先设定一个范围,再增加一个validator限制用户输入,这样用户输入的就一定是16进制的合法值.进制的转换就比较简单了.
这时如果我们需要在窗口中增加这个窗体空间,直接降头文件导入,即可使用该类,很方便.
注意:除非是想实现原本窗体控件不具备的功能,才需要子类化,如果只是想更改外观,那大可不必如此复杂,通过修改样式表即可实现,这个后面会接触到.
2.子类化QWidget
通常情况,我们通过组合不同的窗体控件,可以实现很复杂的功能,但是有的时候我们会发现,无法组织出一个这样的窗体出来,我们就需要子类化QWidget,重新实现绘制事件,以及鼠标事件等.
这一次,跟着书中所讲,从0开始,实现一个图标编辑器(Icon Editor).
iconeditor.h
#ifndef ICONEDOTOR_H
#define ICONEDOTOR_H
#include <QColor>
#include <QImage>
#include <QWidget>
class IconEditor : public QWidget{
Q_OBJECT
Q_PROPERTY(QColor penColor READ penColor WRITE setPenColor)
Q_PROPERTY(QImage iconImage READ iconImage WRITE setIconImage)
Q_PROPERTY(int zoomFactor READ zoomFactor WRITE setZoomFactor)
public:
explicit IconEditor(QWidget *parent = 0);
void setPenColor(const QColor &newColor);
QColor penColor() const{
return curColor;
}
void setZoomFactor(int newZoom);
int zoomFactor() const{
return zoom;
}
void setIconImage(const QImage &newImage);
QImage iconImage() const{
return image;
}
QSize sizeHint() const;
protected:
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void paintEvent(QPaintEvent *event);
private:
void setImagePixel(const QPoint &pos, bool obaque);
QRect pixelRect(int i, int j) const;
QColor curColor;
QImage image;
int zoom;
};
#endif
明显的复杂了很多.
先定义三个Q_PROPERTY宏,声明一个数据,再声明读写属性,有些像Java里的setter和getter.
核心的属性有三个:curColor用来描述画笔的颜色,image用来表示图像,zoom表示放大级别,共有函数即为这三个属性的读写函数,保护属性里重新实现QWidget的绘制事件,还有鼠标的点击和移动事件.
iconeditor.cpp
#include <QtWidgets>
#include <QRegion>
#include "iconeditor.h"
IconEditor::IconEditor(QWidget *parent) : QWidget(parent){
setAttribute(Qt::WA_StaticContents);
setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
curColor = Qt::black;
zoom = 8;
image = QImage(16, 16, QImage::Format_ARGB32);
image.fill(qRgba(0, 0, 0, 0));
}
QSize IconEditor::sizeHint() const{
QSize size = zoom * image.size();
if(zoom >= 3){
size += QSize(1, 1);
}
return size;
}
void IconEditor::setPenColor(const QColor &newColor){
curColor = newColor;
}
void IconEditor::setIconImage(const QImage &newImage){
if(newImage != image){
image = newImage.convertToFormat(QImage::Format_ARGB32);
update();
updateGeometry();
}
}
void IconEditor::setZoomFactor(int newZoom){
if(newZoom < 1){
newZoom = 1;
}
if(newZoom != zoom){
zoom = newZoom;
update();
updateGeometry();
}
}
void IconEditor::paintEvent(QPaintEvent *event){
QPainter painter(this);
if(zoom >= 3){
painter.setPen(palette().foreground().color());
for(int i = 0; i <= image.width(); ++i){
painter.drawLine(zoom * i, 0, zoom * i, zoom * image.height());
}
for(int j = 0; j <= image.height(); ++j){
painter.drawLine(0, zoom * j, zoom * image.width(), zoom * j);
}
}
for(int i = 0; i < image.width(); ++i){
for(int j = 0; j < image.height(); ++j){
QRect rect = pixelRect(i, j);
if(event->region().intersects(rect)){
QColor color = QColor::fromRgba(image.pixel(i, j));
if(color.alpha() < 255){
painter.fillRect(rect, Qt::white);
}
painter.fillRect(rect, color);
}
}
}
}
QRect IconEditor::pixelRect(int i, int j) const{
if(zoom >= 3){
return QRect(zoom * i + 1, zoom * j + 1, zoom - 1, zoom - 1);
}else{
return QRect(zoom *i, zoom *j, zoom, zoom);
}
}
void IconEditor::mousePressEvent(QMouseEvent *event){
if(event->button() == Qt::LeftButton){
setImagePixel(event->pos(), true);
}else if(event->button() == Qt::RightButton){
setImagePixel(event->pos(), false);
}
}
void IconEditor::mouseMoveEvent(QMouseEvent *event){
if(event->buttons() & Qt::LeftButton){
setImagePixel(event->pos(), true);
}else if(event->buttons() & Qt::RightButton){
setImagePixel(event->pos(), false);
}
}
void IconEditor::setImagePixel(const QPoint &pos, bool obaque){
int i = pos.x() / zoom;
int j = pos.y() / zoom;
if(image.rect().contains(i, j)){
if(obaque){
image.setPixel(i, j, penColor().rgba());
}else{
image.setPixel(i, j, qRgba(0, 0, 0, 0));
}
update(pixelRect(i, j));
}
}
不拘泥于具体的代码,主要看三个部分:
sizeHint()函数,可以返回一个窗口部件的理想大小.
update()重新绘制窗口事件,这时会调用paintEvent()函数.
paintEvent()函数是整个源文件的核心,负责窗口的绘制,也是最复杂的部分,是通过QPainter对象实现的.
3.在Qt设计师中集成自定义窗口部件
方法主要分为两种:改进法和插件法,其中,改进法简单直接,更容易利用,也便于分发.
比如HexSpinBox,现在设计师窗口中拖入一个QSpinBox,右击,选择'Promote to Custom Widget',将HexSpinBox的类名填入,即可.
插件法过于复杂,而且Qt4和5之间的方式不兼容,按下不表.
总结:这一节我们自定义了自己的窗体控件,自由度还是挺高的,可以根据自己的需求,选择性的实现原本并不具备的功能,而且Qt的元对象系统为我们提供了很大的便利,我们只需重写部分函数,其余的保持不动,即可,完全没有必要将所有的功能都全部实现,没有这个必要.