Qt on Mac摸索记录 - 其四

1 事件与信号(Events and signals)

事件系统在任何GUI框架中都是非常重要的,所有的GUI应用都是事件驱动的(Event-driven)。这些信号可以是用户产生,也可能是程序内部产生。在一个事件模型中,有如下三个重要的部分

  • event source
  • event object
  • event target

其中,event source是指产生事件的对象,一般在产生事件的同时,其内部状态也发生了变化。event object则是指描述事件本身的对象。event target则是需要响应这些事件的对象。

当我们调用QApplication::exec函数时,应用进入主循环中(main loop)。主循环负责获取事件并将事件发送给合适的响应对象。Qt实现了独特的signal and slot机制。这一机制是对C++变成语言的扩展。这里,信号(signal)和槽(slot)用于对象之间的通信,其中信号在事件发生时产生。槽一般是一个正常的C++函数,当指定信号触发时这个函数会被调用。信号和槽需要事先进行连接。

1.1 鼠标点击

我们之前已经见过了在QPushButton上应用信号与槽的机制来处理点击事件。这里不再赘述,参考按钮与交互这个部分。

1.2 按键响应

下面的这个例子显示了按键响应的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
// keypress.h
#pragma once

#include <QWidget>

class KeyPress : public QWidget {

public:
KeyPress(QWidget *parent = 0);

protected:
void keyPressEvent(QKeyEvent * e);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// keypress.cpp
#include <QApplication>
#include <QKeyEvent>
#include "keypress.h"

KeyPress::KeyPress(QWidget *parent)
: QWidget(parent)
{ }

void KeyPress::keyPressEvent(QKeyEvent *event) {

if (event->key() == Qt::Key_Escape) {
qApp->quit();
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <QApplication>
#include "keypress.h"

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

QApplication app(argc, argv);

KeyPress window;

window.resize(250, 150);
window.setWindowTitle("Key press");
window.show();

return app.exec();
}

注意keyPressEvent是父类QWidget的一个虚函数。故这里我们不直接使用到槽函数。

1.3 QMoveEvent

这个事件代表Widget移动的过程,同样是通过override父类的虚函数实现的。见下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// move.h
#pragma once

#include <QMainWindow>

class Move : public QWidget {

Q_OBJECT

public:
Move(QWidget *parent = 0);

protected:
void moveEvent(QMoveEvent *e);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// move.cpp
#include <QMoveEvent>
#include "move.h"

Move::Move(QWidget *parent)
: QWidget(parent)
{ }

void Move::moveEvent(QMoveEvent *e) {

int x = e->pos().x();
int y = e->pos().y();

QString text = QString::number(x) + "," + QString::number(y);

setWindowTitle(text);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// main.cpp
#include <QApplication>
#include "move.h"

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

QApplication app(argc, argv);

Move window;

window.resize(250, 150);
window.setWindowTitle("Move");
window.show();

return app.exec();
}

1.4 断开信号和槽的联系

信号和槽可以通过槽连接气力啊,也可以断开。断开通过disconnect函数来实现,其参数形式应当和connect时的参数一致。例如

1
2
3
4
connect(clickBtn, &QPushButton::clicked, this, &Disconnect::onClick);
// ...
disconnect(clickBtn, &QPushButton::clicked, this,
&Disconnect::onClick);

1.5 Timer

Timer是周期性发出的事件(当然也可以用来做single shot)。Timer的典型例子就是用来实现一个时钟:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#pragma once

#include <QWidget>
#include <QLabel>

class Timer : public QWidget {

public:
Timer(QWidget *parent = 0);

protected:
void timerEvent(QTimerEvent *e);

private:
QLabel *label;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#include "timer.h"
#include <QHBoxLayout>
#include <QTime>

Timer::Timer(QWidget *parent)
: QWidget(parent) {

QHBoxLayout *hbox = new QHBoxLayout(this);
hbox->setSpacing(5);

label = new QLabel("", this);
hbox->addWidget(label, 0, Qt::AlignLeft | Qt::AlignTop);

QTime qtime = QTime::currentTime();
QString stime = qtime.toString();
label->setText(stime);

startTimer(1000);
}

void Timer::timerEvent(QTimerEvent *e) {

Q_UNUSED(e);

QTime qtime = QTime::currentTime();
QString stime = qtime.toString();
label->setText(stime);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#include <QApplication>
#include "timer.h"

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

QApplication app(argc, argv);

Timer window;

window.resize(250, 150);
window.setWindowTitle("Timer");
window.show();

return app.exec();
}

这里的startTimertimerEvent都是父类提供的函数。

2 QWidget

这里梳理一下常用的基础控件类型。这些类都是QWidget的子类。

2.1 QLabel

QLabel用来展示文字和图片,不涉及用户操作。

2.2 QSlider

QSlider提供了便捷的连续数字选择器。长这个样子:

2.3 QComboBox

QComboBox可以让我们从有限的下拉选项中选择。

2.4 QSpinBox

用来处理可以递增递减的离散数字

2.5 QLineEdit

单行文字输入,这个我们之前已经接触过了。

2.6 Statusbar

状态栏,通过statusBar()函数来获取。

2.7 其他

还有好多控件就不一一说明了,很多看名字就能知道是做什么用的:

  • QCheckBox
  • QListWidget
  • QProgressBar
  • QPixmap
  • QSpliter
  • QTableWidget

3 绘图

这个部分也是我需要关注的重点,如何自由地绘图

QPainter是我们进行绘图操作的画板。绘图过程在paintEvent函数(QWidget的函数)中完成。

我们首先来看一个绘制直线的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// lines.h
#pragma once

#include <QWidget>

class Lines : public QWidget {

public:
Lines(QWidget *parent = 0);

protected:
void paintEvent(QPaintEvent *event);
void drawLines(QPainter *qp);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// lines.cpp
#include <QPainter>
#include "lines.h"

Lines::Lines(QWidget *parent)
: QWidget(parent)
{ }

void Lines::paintEvent(QPaintEvent *e) {

Q_UNUSED(e);

QPainter qp(this);
drawLines(&qp);
}

void Lines::drawLines(QPainter *qp) {

QPen pen(Qt::black, 2, Qt::SolidLine);
qp->setPen(pen);
qp->drawLine(20, 40, 250, 40);

pen.setStyle(Qt::DashLine);
qp->setPen(pen);
qp->drawLine(20, 80, 250, 80);

pen.setStyle(Qt::DashDotLine);
qp->setPen(pen);
qp->drawLine(20, 120, 250, 120);

pen.setStyle(Qt::DotLine);
qp->setPen(pen);
qp->drawLine(20, 160, 250, 160);

pen.setStyle(Qt::DashDotDotLine);
qp->setPen(pen);
qp->drawLine(20, 200, 250, 200);

QVector<qreal> dashes;
qreal space = 4;

dashes << 1 << space << 5 << space;

pen.setStyle(Qt::CustomDashLine);
pen.setDashPattern(dashes);

qp->setPen(pen);
qp->drawLine(20, 240, 250, 240);
}

main.cpp的文件内容很简单,我们之后就不放了。

在这个例子中我们用六种不同的笔触画了六根线,如下图:

更高阶的绘图还是看原教程吧,内容太多了。