软件学院 刘豪

59
简简 QT 简简 简简简简 简简

Upload: cornell-boyle

Post on 31-Dec-2015

56 views

Category:

Documents


10 download

DESCRIPTION

软件学院 刘豪. 简单 QT 演示. 任务 1. 实现简单 Qt 程序 任务 2. 交叉编译简单 Qt 程序,并在开发板上运行. 任务. 任务 1. 实现简单 Qt 程序. 以下是使用 Qt Creator 进行开发的总体步骤。通过 Hello 实例来简单介绍用 Qt Creator 开发程序的基本过程。. 运行 Qt Creator ,选择菜单栏中的“文件”选项,然后选择“新建文件或项目”,出现“项目类型”选择窗口,如图 1 所示,单击左上角的“项目”选项框中的“ Qt 控件项目”,然后选择右上角选项框中的“ Qt Gui 应用”。. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 软件学院 刘豪

简单 QT 演示

软件学院 刘豪

Page 2: 软件学院 刘豪

任务

任务 1. 实现简单 Qt 程序 任务 2. 交叉编译简单 Qt 程序,并在开发板上运行

Page 3: 软件学院 刘豪

任务 1. 实现简单 Qt 程序

Page 4: 软件学院 刘豪

以下是使用 Qt Creator 进行开发的总体步骤。通过 Hello 实例来简单介绍用 Qt Creator 开发程序的基本过程。

Page 5: 软件学院 刘豪

运行 Qt Creator ,选择菜单栏中的“文件”选项,然后选择“新建文件或项目”,出现“项目类型”选择窗口,如图 1 所示,单击左上角的“项目”选项框中的“ Qt 控件项目”,然后选择右上角选项框中的“ Qt Gui 应用”。

1 ) . 新建项目

Page 6: 软件学院 刘豪
Page 7: 软件学院 刘豪
Page 8: 软件学院 刘豪
Page 9: 软件学院 刘豪
Page 10: 软件学院 刘豪
Page 11: 软件学院 刘豪

2 )设计窗体

项目创建完毕后,开始设计窗体。 Qt Creator 创建项目自带的 Main Window 主窗体默认是包含:

一个 QMenuBar 、 一个 Hello 程序界面设计结果 QToolBar 和 一个 QStatusBar ,

Hello 实例用不到这些控件,可以在窗体中删除这些自带控件

Page 12: 软件学院 刘豪

Hello 程序设计结果

Page 13: 软件学院 刘豪

3 )建立信号和槽的映射

界面设计完毕之后,需要实现其功能:当单击“ OK” 按钮时,“ TextLabel” 变为“ Hello World” 。此时需要将对应的信号和槽函数连接, Qt Creator 提供了三种建立信号和槽的方法。

Page 14: 软件学院 刘豪

第一种方法,自己定义槽函数和映射。

Page 15: 软件学院 刘豪

1) 在文件 mainwindow.h 的类 MainWindow 的定义中声明槽函数,代码如下:

1. public slots: 2. void on_pushButton_clicked(); 2) 定义槽函数体在 mainwindow.cpp 文件中,代码如下: 1. void MainWindow:: on_pushButton_clicked () 2. { 3. ui->label->setText("Hello World"); 4. } 3) 建立映射,在类 MainWindow 的构造函数中添加如下语句,以便

将信号和槽函数进行连接: 1. connect(ui-

>pushbutton,SIGNAL(clicked()),this,SLOT(on_pushBu tton_clicked()));

Page 16: 软件学院 刘豪

任务

第二种方法,右击“ OK” 按钮,选择“转到槽”选项,选择信号“ clicked()” ,单击“确定”按钮。系统自动生成槽函数的声明和定义,并建立内部映射,只须在槽函数体内编写槽函数的功能即可,添加语句参考第一种方法中的步骤 2 。

Page 17: 软件学院 刘豪
Page 18: 软件学院 刘豪

第三种方法,右击界面选择“改变信号 / 槽”选项,单击“ +” 添加新的槽函数,单击“确定”按钮完成槽函数的添加。在窗体编辑区的下方有信号和槽的映射窗口,单击左上角的加号,出现一行新的映射,在这里进行映射的编辑。最后重复第一种方法中的步骤 1 和步骤 2 完成槽函数的声明及定义。

Page 19: 软件学院 刘豪
Page 20: 软件学院 刘豪

Hello 程序加载界面

Page 21: 软件学院 刘豪

Hello 程序单击 OK 按钮后的结果

Page 22: 软件学院 刘豪

Main.cpp 代码如下

#include <QtGui/QApplication> #include "mainwindow.h“ int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; w.show(); return a.exec(); }

Page 23: 软件学院 刘豪

MainWindow.h

#ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private slots: void on_pushButton_clicked(); private: Ui::MainWindow *ui; }; #endif // MAINWINDOW_H

Page 24: 软件学院 刘豪

MainWindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)

{ ui->setupUi(this); } MainWindow::~MainWindow() { delete ui; } oid MainWindow::on_pushButton_clicked() { ui->label->setText("Hello World"); }

Page 25: 软件学院 刘豪

程序分析:

<QApplication> 是 QApplication 类定义的头文件,一般类名与头文件名相同;

创建 QApplication 对象 app ,并将用户在控制台输入的参数传递给 app ;(有且只有一个 QApplitation 对象)

使用 GUI 的应用程序,都必须包含一个 QApplication 对象; 该对象 GUI 应用程序的控制流程和主要的设置选项; 在堆中创建 MainWindow 对象 , MainWindow 是一个类

QMainWindow 的派生类,显示程序界面; MainWindow 对象创建时不显示 ,调用 show ()才显示; 最后程序返回 Qt 应用程序对象 app 的执行结果; QApplication::exec() 函数将 QT GUI 程序进入一个主事件循

环,主循环开始后,接收事件(如鼠标点击等)并向相应的窗口进行分发和处理;

Page 26: 软件学院 刘豪

www.embedu.org26

Qt 编程基础

QtQt 工具工具QtQt 开发程序方法开发程序方法QtQt 的类库介绍的类库介绍Qt creatorQt creator 集成开发环境集成开发环境

Page 27: 软件学院 刘豪

www.embedu.org27

QtQt 工具工具

designer Qt designer 是一个界面设计工具,使开发者可视化设计用户

界面。设计的界面保持为 XML 格式的” .ui” 文件。qmake 、 uic 、 moc

qmake 为编译 Qt/E 库和应用提供的 Makefile 生成器,能根据工程文件( .pro )产生不同平台下 Makefile

uic 将使用 designer 设计的” .ui” 文件转换成源程序文件。 moc (源对象编译器),将 Qt 的源程序转为标准 C++ 程序。

Qt 助手Qt 翻译工具

Page 28: 软件学院 刘豪

www.embedu.org28

QtQt 开发程序方法开发程序方法

Qt 库是一个 C++ 类库,类名都已” Q” 开头,使用 Qt 库开发应用程序,主要有以下两种方式: 程序中直接使用 Qt 库中定义好的类; 继承 Qt 库中的类来定义派生类,通过实现派生类来对原有类进行改

造。 如自定义一个对话框:

#include <QDialog>

#include<QPushButton>

class MyDialog:public QDialog // 继承{

private:

QPushButton closeButton ; // 直接使用……

};

Page 29: 软件学院 刘豪

www.embedu.org29

QtQt 开发程序方法开发程序方法

Qt 程序的 main() 函数 main() 函数是程序的入口函数,其基本形式如下: int main(int argc,char** argv) {

QApplication app(argc,argv); MyDialog w;w.show(); // 显示窗口return app.exec()// 进入主事件循环

} QApplication 类管理 Qt GUI 程序的控制流和主要设置,包含

一个主事件循环,从操作系统或者其他资源发送到本 GUI 进程的事件都要经过 QApplication 的事件循环进行处理和转发。

Page 30: 软件学院 刘豪

www.embedu.org30

QtQt 开发程序方法开发程序方法

编译 Qt 程序 qmake -project ( 生成工程文件 )

• 工程文件是一个” .pro” 文件 , 内容如下 :» TEMPLATE = app // 本项目是应用程序工程» TARGET = // 可执行文件的名字» DEPENDPATH += . // 依赖的其他文件所在的路径» INCLUDEPATH += . // 编译时,需要搜索的头文件路径» # Input» HEADERS += mydialog.h // 程序头文件» SOURCES += main.cpp mydialog.cpp // 程序源文件» sSOURCES += main.cpp

qmake ( 生成 Makefile) make ( 编译工程 )

Page 31: 软件学院 刘豪

www.embedu.org31

Qt 的类库介绍

Qt 的类派生图

Page 32: 软件学院 刘豪

www.embedu.org32

Qt 的类库介绍

Qt 类库非常庞大,将 Qt 类分成各个模块,每个模块对应一个库文件,如下:

Page 33: 软件学院 刘豪

www.embedu.org33

Qt 的类库介绍

基本库 QtCore 基本数据类型,例如: QString 、 QByteArray 基本数据结构,例如: QList 、 QVector 、 QHash 输入输出类,例如: QIODevice 、 QTextStream 、 QFile 多线程编程用到的类,例如: QThread 、 QWaitCondition QObject 与 QCoreApplication

Page 34: 软件学院 刘豪

www.embedu.org34

Qt 的类库介绍

GUI 库 QtGui QWidget 类,以及由它派生出来的类,例如:

QLabel 、 QPushButton 布局类,例如:

QVBoxLayout 、 QHBoxLayout 、 QGridLayout 主窗口类, QMainWindow 、 QMenu 绘图类,例如: QPainter 、 QPen 、 QBrush 提供准备好使用的 (ready-to-use) 对话框类,例如:

QFileDialog 、 QPrintDialog 应用程序类 QApplication

Page 35: 软件学院 刘豪

www.embedu.org35

Qt 的类库介绍

网络库 QtNetwork QTcpSocket QUdpSocket QHttp QFtp

OpenGL 库 QtOpenGL QGLWidget

Database 库 QtSqlXML 库 QtXml兼容库 Qt3Support

Page 36: 软件学院 刘豪

www.embedu.org36

Qt creator 集成开发环境

Qt Creator 包括项目生成向导、高级的 C++ 代码编辑器、浏览文件及类的工具、集成了 Qt Designer 、图形化的 GDB 调试前端,集成 qmake 工具等功能,包括 :

• 智能代码编辑器• Qt4 项目生成向导• 整合了 Qt 帮助• 集成了 Qt designer• 定位器• 支持 qmake 的生成 .pro 文件• 调试接口

Page 37: 软件学院 刘豪

www.embedu.org37

Qt creator 集成开发环境

Qt Creator 介绍 Qt Creator 的 6 个模式:欢迎,编辑,调试,项目,帮助和输出。 编辑模式:

• 1 ) project 项目树

• 上边条:项目树滤器,与代码编辑器同步,分裂。

Page 38: 软件学院 刘豪

www.embedu.org38

Qt creator 集成开发环境

• ( 2 )代码编辑的上边条:

• 打开的文件 符号选择(函数名)• ( 3 )下边条:

• 4 个 output 窗口:编译提示,查找结果, 程序运行 output ,编译 output

• ( 4 ) Qt designer– 在 qt creator 中双击 ui 文件,启动 qt designer

Page 39: 软件学院 刘豪

www.embedu.org39

Qt creator 集成开发环境

Qt designer 包括如下几部分• 1) 标准窗口部件

– 左侧,分类列出 QT 标准窗口部件;可以从中拖放到主窗口中;

• 2) 对象监测器– 列出了界面的所有窗口部件,以及各窗口部件的父子关系

• 3) 属性编辑器– 列出了选中部件的可编辑属性

• 4) 动作编辑器• 5) 信号与槽编辑器• 6) 上边条

– 部件编辑模式选择 » Widget 编辑模式,信号与槽编辑模式,伙伴编辑模式, Tab 编辑模

式。– 布局工具栏

Page 40: 软件学院 刘豪

www.embedu.org40

Qt creator 集成开发环境

Debug 模式• 进入 Debug 模式可以调试程序;设置断点,查看变量等;

project 模式• 主要是配置项目的环境,工具等。默认情况下,创建了

release 和 debug 两个 project ;• 可以针对交叉编译添加一个 project 设置,设置交叉编译

project ; Help 模式

• 进入 Qt 助手 Output 模式

• 输出模式

Page 41: 软件学院 刘豪

www.embedu.org41

Qt creator 集成开发环境

Page 42: 软件学院 刘豪

www.embedu.org42

Qt creator 集成开发环境

使用 Qt Creator 向导创建项目 1 、 File->new 弹出向导;

2 、选择 :Qt4 Gui Application ; 3 、输入项目名和项目保存路径;

Page 43: 软件学院 刘豪

www.embedu.org43

Qt creator 集成开发环境

4 、选择项目需要的模块,默认包括 QtCore, QtGui 5 、选择主窗口的基类和自定义部件类的名字;

6 、单击下一步,完成向导进入编辑模式;

Page 44: 软件学院 刘豪

www.embedu.org44

Qt creator 集成开发环境

7 、双击右边的 ui 文件,启动 qt designer ,拖放右边的常用控件到主窗口,编辑界面;

Page 45: 软件学院 刘豪

www.embedu.org45

Qt creator 集成开发环境

8 、点击编译按钮,编译程序;(从上之下分别是:运行,调试,编译)

Page 46: 软件学院 刘豪

www.embedu.org46

Qt 核心机制

Qt 信号与槽

Page 47: 软件学院 刘豪

www.embedu.org47

Qt 信号与槽机制

信号 当某个特定的事件发生时,对应的部件会发出一个信号,与其相关联的槽

将被立刻执行; Qt 的每个窗口部件 (Qt 类 ) 已经定义了大部信号,我们可以在其派生类中

定义特有的信号; 信号与函数原型相同,但信号没有定义,而在头文件中给出信号的说明

class MyDialog:public QDialog // 继承{

Q_OBJECTsignals:

void mySingals(); //永远是 void ,可带形参private:

QPushButton closeButton ; // 直接使用……

};信号的发送 :emit(mySignals());

Page 48: 软件学院 刘豪

www.embedu.org48

Qt 信号与槽机制

槽 槽是类的成员函数,与普通的成员函数不同的是,槽函数能够与信号

进行关联,也可以被直接调用; 槽函数与类的普通成员一样,有访问权限 (public,private,protected) ;

• public属性的槽函数能够与所有类对象的信号关联,• private属性的槽函数只能与本类对象的信号关联,• protected属性的槽函数能够与本类及其派生类对象的信号相关联;

如在自定义类中添加槽:• ……• public slots:

– Void mySlots();

• …… 槽函数与信号不同之处是,槽函数要有定义。

Page 49: 软件学院 刘豪

www.embedu.org49

Qt 信号与槽机制

关联 Qt 对象之间要实现信号与槽的通信,必须对信号与槽进行关联 信号与槽函数的关联使用 connect() 函数,其函数原型如下; bool QObject::connect ( const QObject * sender,

const char * signal,

const QObject * receiver,

const char * member ) [static]• sender 发送信号的部件• signal 发送的信号 • receiver 接收信号的部件• nember 是接收部件的槽函数

Page 50: 软件学院 刘豪

www.embedu.org50

Qt 信号与槽机制

自动关联 Qt 提供了信号与槽的自动关联功能,对于 Qt 窗口部件提供的

已有信号,如果能够按下面的规则命名槽函数,那么 Qt就能够自动进行关联:• void on_< 窗口部件名 >_< 信号名 > ( <参数 > );

Page 51: 软件学院 刘豪

www.embedu.org51

Qt 信号与槽机制

Page 52: 软件学院 刘豪

www.embedu.org52

Qt 信号与槽机制

关联 connect (sender, SIGNAL (signal), receiver, SLOT (slot));

• 一个信号可以连接到许多槽• 许多信号可以连接到同一个槽• 一个信号可以连接到另一个信号

disconnect (sender, SIGNAL (signal), receiver, SLOT (slot))

• 连接可以被解除

Page 53: 软件学院 刘豪

www.embedu.org53

信号与插槽实例

Page 54: 软件学院 刘豪

任务 2. 交叉编译简单 Qt 程序,并在开发板上运行

Page 55: 软件学院 刘豪

1 )交叉编译工程

进入工程目录: cd /armnfs/project/helloWorld/ 执行命令: /qt_everywhere/bin/qmake -project 建立工

程 执行命令: /qt_everywhere /bin/qmake ,生成

Makefile 执行命令: make ,编译工程,编译成功以后生成

helloWorld 的目标文件 注意: /qt_everywhere /bin/qmake 必须是经过 QT 交

叉编译移植后生成的 qmake ,特别针对开发板

Page 56: 软件学院 刘豪

2 )在目标板上运行 helloWorld

2 )在目标板上运行 helloWorld 打开 ARM 开发板的电源,挂载 NFS ,然后在控制台中输

入: ./project/helloWorld/helloWorld -qws ,运行helloWorld 程序,这时在 LCD屏幕上显示界面图 9 。同样,用触摸笔点击按钮,就会出现图 10所示的界面。

Page 57: 软件学院 刘豪

3 )配置文件系统,让程序自动运行

gedit /source/rootfs/etc/init..d/rcS 假设 qt 程序 Hello被复制到目标机文件系统的 /app 目

录下(在 NFS 模式下,开发机的 /source/rootfs/app 目录)

在 rcS 文件末尾添加 /app/Hello –qws &

Page 58: 软件学院 刘豪

www.farsight.com.cn58

Q&A

Page 59: 软件学院 刘豪