第七章 自定义窗口小部件

时间:2023-02-10 13:53:48

上一节讲到QSignalMapper的使用,这一节的内容可能和前面的关联不是很大。

我们在使用QtCreator的时候,编辑界面的使用大多时候使用Qt Designer这个工具,左侧的控件使我们很方便的能够拖拽使用各个控件。但如果能够把我们自己定义的控件也放进来,那么就会更加方便我们开发出更精美的界面了。这一节就将介绍如何添加自己定义的控件到Qt Desinger中来。

创建自定义widget时必须

  • 自己处理绘制事件
  • 处理事件
    • Keyboard
    • Mouse
    • Resize
  • 处理widget尺寸和标题提示

控件的绘制是通过PaintEvent实现的。由下面的图可知,paintEvent也在Qt event loop中。

第七章 自定义窗口小部件

关于QPainter的使用,我们后面会详细的讲解,大家也可以查看帮助文档看一下。这里只是实现一个简单的绘制功能。这里主要是了解怎样创建一个Qt Designer的插件。

下面是实现过程:

首先我们先创建一个工程。选择Qt4设计师自定义控件,Qt Creator已经为我们做了大量的工作,我们只需要把我们的控件实现即可。

第七章 自定义窗口小部件

然后定义类名

第七章 自定义窗口小部件

 

第七章 自定义窗口小部件

 

 

重写paintEvent,这里使用的是Qt例子中的一个时钟。

 

#include "myclock.h"

#include <QTimer>

#include <QtGui>

#include <QPixmap>

MyClock::MyClock(QWidget *parent) :

QWidget(parent)

{

timeZoneOffset = 0;

//每隔1s刷新一次

QTimer *timer = new QTimer(this);

connect(timer,SIGNAL(timeout()),this,SLOT(update()));

timer->start(1000);

resize(200,200);

}

void MyClock::paintEvent(QPaintEvent *)

{

static const QPoint hourHand[3] = {

QPoint(7, 8),

QPoint(-7, 8),

QPoint(0, -40)

};

static const QPoint minuteHand[3] = {

QPoint(7, 8),

QPoint(-7, 8),

QPoint(0, -70)

};

QColor hourColor(127, 0, 127);

QColor minuteColor(0, 127, 127, 191);

int side = qMin(width(), height());

QTime time = QTime::currentTime();

time = time.addSecs(timeZoneOffset);

QPainter painter(this);

painter.setRenderHint(QPainter::Antialiasing);

painter.translate(width() / 2, height() / 2);

painter.scale(side / 200.0, side / 200.0);

painter.setPen(Qt::NoPen);

painter.setBrush(hourColor);

painter.save();

painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));

painter.drawConvexPolygon(hourHand, 3);

painter.restore();

painter.setPen(hourColor);

for (int i = 0; i < 12; ++i) {

painter.drawLine(88, 0, 96, 0);

painter.rotate(30.0);

}

painter.setPen(Qt::NoPen);

painter.setBrush(minuteColor);

painter.save();

painter.rotate(6.0 * (time.minute() + time.second() / 60.0));

painter.drawConvexPolygon(minuteHand, 3);

painter.restore();

painter.setPen(minuteColor);

for (int j = 0; j < 60; ++j) {

if ((j % 5) != 0)

painter.drawLine(92, 0, 96, 0);

painter.rotate(6.0);

}

 

emit updated(time);

}

void MyClock::setTimeZone(int hourOffset)

{

timeZoneOffset = qMin(qMax(-12,hourOffset),12)*3600;

update();

}

然后编译,只能编译成release版本,不能debug版本,然后将myclockplugin.dll和myclockplugin.lib复制到Qt安装目录的/plugins/designer/目录下面,如下图所示:

第七章 自定义窗口小部件

这样我们打开bin目录下的Qt Designer,就会看到我们自己编写的时钟控件。我们就可以使用这个控件了。

 

第七章 自定义窗口小部件

第七章 自定义窗口小部件

创建过程很简单,很多的关于Plugin的部分Qt Creator已经帮助我们自动生成了。所以我们要做的就是编写控件相关的函数了。

欢迎加入QQ群:217054129

QQ群:142241185

共同学习嵌入式