QT图形用户界面课件.ppt

1、图形用户界面图形用户界面QT 第四章第四章本章计划本章计划v 可视对象的返回值和数据v 鼠标，键盘，定时器等事件的捕捉v 一些事件的虚函数重载，信号从基类转发v 掌握QDialog,QTimer,QTimev 掌握QSettings,QSqlDatabasev 了解Qt NetWorkv 掌握QGraphicsView,QGraphicsScene v 掌握QGraphicsItem,QPixmap计算器里的关于窗口计算器里的关于窗口v上面有2个按钮，确定和取消，QMainWindow怎么知道你按了哪一个呢？首先，那个是一个按钮组buttonBox，是QDialog组件里就关联好信号的。在 信

2、号和槽编辑器里能看的到。我们可以看看QDialog的槽accept()和rejecct()起什么作用，看HELP文档可视对象的返回值和数据可视对象的返回值和数据QDialog的槽的槽accept()和和rejecct()HELP文档里是这么解释的，看懂了吗？文档里是这么解释的，看懂了吗？void QDialog:accept()virtual slotHides the modal dialog and sets the result code to Accepted.void QDialog:reject()virtual slotHides the modal dialog and set

3、s the result code to Rejected.void QDialog:accepted()signalThis signal is emitted when the dialog has been accepted either by the user or by calling accept()or done()with the QDialog:Accepted argument.QDialog的返回值的返回值跟据跟据HELP文档，我们可以这样写代码文档，我们可以这样写代码鼠标，键盘，定时器等事件的捕捉鼠标，键盘，定时器等事件的捕捉v事件在Qt里分很多种，比如鼠标，键盘，定时

4、器，窗体扩大缩小，有鼠标飘过，有数值变化等等，任何一个小动作，在GUI里都会触发某种事件。当事件产生时，怎么来进行处理呢？v跟据C+的语言特性，虚函数重载可以解决这个问题，所有可以处理的事件，一定都是虚函数。v现在我们来做一个close事件处理。close事件的捕捉事件的捕捉还记得第一个例子吗，一个按钮一按就关闭窗口了。当然按右上角的X，也可以关闭，但有的窗口按了右上角的X会跳出一个框来。这个是通过重载 关闭事件而处理出的一个框，怎么做呢？QMainWindow的的close事件在哪？事件在哪？v刚刚讲过，所有能处理的事件，一定是虚函数，那虚函数去哪找？去protected里找。v现在我们要关

5、闭的是QMainWindow，并且要它跳出那个框出来，怎么找相应事件呢？来查下HELP文档 QMainWindow的的close事件在哪？事件在哪？v点不出来吧？为啥？因为QMainWindow没有，那怎么查？去找它的基类，它一定是从基类里继承了所有的事件。v点进Qwidget这个基类以后，再点Protected FuntionsQMainWindow的的close事件在哪？事件在哪？找到找到close事件了事件了点进看去说明和例子点进看去说明和例子By default,the event is accepted and the widget is closed.You can reimple

6、ment this function to change the way the widget responds to window close requests.For example,you can prevent the window from closing by calling ignore()on all events.你看不懂可以复制查你看不懂可以复制查google百度有道翻译就对了。百度有道翻译就对了。要还在发呆，就是你的不对了。要还在发呆，就是你的不对了。重载基类的虚函数的代码怎么写重载基类的虚函数的代码怎么写1.想想C+语法，派生类怎么去重载基类的虚函数把声明抄过来.cpp

7、的重载代码怎么写？的重载代码怎么写？C语言就强调了，用谁的东西，就include谁的头文件一按X就重载了close事件，在这里我们用QMessageBox速生成了一个小框，然后取它的返回值看你按了什么键，如果按的取消，据据QMainWindow的HELP文档用ignore()接口忽略close事件中文显示的处理中文显示的处理#include int main(int argc,char*argv)QApplication a(argc,argv);QTextCodec*codec=QTextCodec:codecForName(GB2312);QTextCodec:setCodecForLoc

8、ale(codec);QTextCodec:setCodecForCStrings(codec);QTextCodec:setCodecForTr(codec);MainWindow w;w.show();return a.exec();一个窗口有多少种事件可以处理呢？一个窗口有多少种事件可以处理呢？v看看HELP文档里的protected里有多少种事件v一定要学会查HELP文档，查google翻译v现在我们小试了中间的一个close事件，其它的事件后续会有介绍，来做一个定时器来做一个定时器我们需要用到QTimer这个类，查HELP文档 QTimer是个什么类，查接口，信号，槽，和例子QTim

9、er定时器定时器你可以先从Detailed Description示例开始看QTimer*timer=new QTimer(this);connect(timer,SIGNAL(timeout(),this,SLOT(update();timer-start(1000);看到这个例子代码，基本知道怎么用这个定时器了看到这个例子代码，基本知道怎么用这个定时器了1.定时器对象需要生成；定时器对象需要生成；2.定时器用定时器用start()启动，有启动，有2个重载，带形参的是毫秒间隙时间；个重载，带形参的是毫秒间隙时间；3.定时器启动以后，每隔间隙时间发来一个定时器启动以后，每隔间隙时间发来一个ti

10、meout()信号信号,你可你可以去连接一个你的槽来处理。以去连接一个你的槽来处理。练习练习 做定时器做定时器要求：1.按start就开始一秒一秒的计时2.按pause就暂停显示，但背地里还在计时，再按pause就显示实际的时间3.按stop就停，再按一次就清零4.按X退出时，要有对话框5.有帮助-关于 QDialog，上面写上 XXX 几几年几几月几日制做，版本V0.1对对Qt的几点总结和感悟的几点总结和感悟做了一些GUI程序以后，我们总结一下Qt只是提供一些GUI的显示，和一些功能类，对象与对象，对象与GUI的逻辑关联，和Qt没有关系Qt提供数据传输和通道方案逻辑关系完全是由C结构实现Qt

11、对象有什么功能，怎么和其它对象连接，要多查HELP文档你体会出来了吗？Qt GUI巩固练习巩固练习 电子钟电子钟v 做一个电子钟，做一个电子钟，24小时制显示小时制显示 时时:分分:钞钞v 时分钞中的时分钞中的 :需要一秒一闪需要一秒一闪v 当按日期按钮时，需要变成日期显示当按日期按钮时，需要变成日期显示v 日期格式日期格式 年年-月月-日日v 日期显示完日期显示完5秒后，又变回时间显示秒后，又变回时间显示v 查查HELP里里QTime时间类的使用时间类的使用,v 显示用显示用QLCDnumber类类v 注意逻辑是注意逻辑是C语法才能实现语法才能实现Qt 的一些其它类的一些其它类 QGraph

12、icsViewQGraphicsView 动态2D显示容器查看一下HELP里它的Detailed DescriptionQGraphicsView提供了一个界面，它既可以管理大数量的定制2D items，又可与它们交互，有一个view widget可以把这些项绘制出来，并支持旋转与缩放。这个柜架也包含一个事件传播结构，对于在scene中的这些items,它具有双精度的交互能力。Items能处理键盘事件，鼠标的按，移动、释放、双击事件，也可以跟踪鼠标移动。整个框架是这样的QGraphicsView 容器 -QGraphicsScene 场景-QGraphicsItem 图元Qt 的一些其它类的一

13、些其它类 QGraphicsViewQGraphicsView 里包含了 QGraphicsScene 而 QGraphicsScene 拥有多个图元，包含三层：背景层，图元层，前景层QGraphicsItem 图元支持鼠标事件，滚轮事件，上下文菜单事件支持键盘输入焦点，按键事件支持拖放支持分组Qt 的一些其它类的一些其它类 QGraphicsViewQGraphicsItem图元类，只是一个虚基类，有8种不同的派生类.QGraphicsEllipseItem 椭圆图元QGraphicsLineItem 线图元QGraphicsPathItem 曲线图元QGraphicsPixmapItem

14、像素图元QGraphicsPolygonItem 多边形图元QGraphicsRectItem 矩形图元QGraphicsSimpleTextItem 文本标签图元QGraphicsTextItem 文本浏览器图元Qt 的一些其它类的一些其它类 QGraphicsView我们以QGraphicsPixmapItem像素图元为例，介绍框架的连接QGraphicsPixmapItem像素图元，也就是拿一张图片来显示图元程序框架如下QMainWindow-QGraphicsView 容器 -QGraphicsScene 场景-QGraphicsPixmapItem像素图元Qt 的一些其它类的一些其它

15、类 QGraphicsViewQMainWindow 和 QGraphicsView 怎么连接，画上去就可以了拖过去，大约拉大一点。View容器容器 场景场景 像素图元像素图元QGraphicsView 容器 -QGraphicsScene 场景-QGraphicsPixmapItem像素图元场影 和 图元怎么连接 View呢？场影 和 图元 在这里每个类需要派生一个自已改造的类，为此我们要建.h和.cpp场景 我们建 myScene图元 我们建 myItem建建 场景场景1 32 4建建 图元图元用同样的方法建图元，并且是 像素图元 注意，这里的类型信息没有继承自QObjectQGraphi

16、csPixmapItem 的基类是QGraphicsItem，但是QGraphicsItem并没有继承自QObject，这意味着QGraphicsPixmapItem不能使用 信号和槽 通信View容器容器-场景场景-像素图元像素图元QGraphicsView 容器 -QGraphicsScene 场景-QGraphicsPixmapItem像素图元查HELP文档View的Detailed Description有一个例有一个例子子,是用对象构造的方法来加入了是用对象构造的方法来加入了scene的关连的关连QGraphicsView view(&scene);view.show();查构造函数

17、 QGraphicsView(QGraphicsScene*scene,QWidget*parent=0);有没有直接可以设定scene的接口呢？查查add,set之类的关键词void setScene(QGraphicsScene*scene);View容器容器-场景场景在mainwindow.h里包含myscene.h头文件，创建一个对象，调用setScene接口和View关连场景场景-像素图元像素图元QGraphicsScene 场景-QGraphicsPixmapItem像素图元查HELP文档QGraphicsScene找关连Item的接口，查add,set之类的关键词找到void a

18、ddItem(QGraphicsItem*item)；先不管空间泄露总之已经关连了2D QGraphicsViewOK,我们完成了 2D图形的程序框架如下QMainWindow-QGraphicsView 容器 -QGraphicsScene 场景-QGraphicsPixmapItem像素图元到此程序编译成功，可以运行，但是一片空白。为啥？因为item并没有贴上像素，也就是没有贴图片GUI也就是在绘图，或是显示图片现在我们给Item贴上图片QGraphicsPixmapItem像素图元像素图元 贴图贴图QGraphicsPixmapItem像素图元查HELP文档QGraphicsPixmap

19、Item找相关贴图的接口，还是找add,set,Pixmap相关的单词，英语不好的童鞋好好查友道词典，不要发呆，不要等别人现成的答案。QGraphicsPixmapItem像素图元像素图元 贴图贴图找到void setPixmap(const QPixmap&pixmap);形参需要一个QPixmap 的类，继续看QPixmap Format格式支持里，支持BMP GIF JPG PNG等很多的图片格式，但是原生只支持BMP和PNG，但其它的格式都通过了插件的模式支持了。怎么把图片的格式转换成QPixmap呢？找接口。图片是一个文件,一个filename，就找filename 相关QPixma

20、p(const QString&fileName,const char*format=0,Qt:ImageConversionFlags flags=Qt:AutoColor)boolload(const QString&fileName,const char*format=0,Qt:ImageConversionFlags flags=Qt:AutoColor)一个是构造时就可以转换，一个是用load()来转换QGraphicsPixmapItem像素图元像素图元 贴图贴图要贴的图片文件要先加入资源文件，这里取名ppp加完了以后，双击ppp.qrcQGraphicsPixmapItem像素图

21、元像素图元 贴图贴图1 2 31.添加前缀2.下面的前缀很长，改成/,在这里的路径和程序里的路径都按Linux/Unix标准45度的杠执行；3.把你要的图片文件先复制到工程文件夹下，再去按”添加”-“添加文件”，可以一次性框选多个文件QGraphicsPixmapItem像素图元像素图元 贴图贴图好了，开始给Item贴图这里调用QGraphicsPixmapItem的setPixmap()接口直接用QPixmap构造函数生成无名对象输入setPixmap()现在运行一下程序看看，有图片了。应应 用用这么大的力气，显示了一张图？你可以显示4张图，然后加上定时器打地鼠；再多显示几张，围棋，国际象棋

22、，如果让item在一秒内多次移动坐标动起来的话？对了，可以做俄罗斯方块如果把图片贴的漂亮一点，内容再丰富一点，植物大战僵尸，小鸟没有做不到，只有想不到。鼠标事件响应鼠标事件响应还记得protected里的虚函数么?去找Item的虚函数，找mouse相关的虚函数重载来实现鼠标事件处理virtual void mousePressEvent();还记得怎么重载虚函数不？鼠标事件响应鼠标事件响应点了以后，让他变张图运行一下试试看，变了没鼠标事件响应鼠标事件响应 左右键区分左右键区分 双键双键查HELP文档看形参上的QGraphicsSceneMouseEvent 是个什么样的类button()和 b

23、uttons()2个接口用来返回你点了什么键注意它们的返回值，是宏定义 Qt:MouseButton，再去查是什么样的东西.鼠标事件响应鼠标事件响应 左右键区分左右键区分 双键双键首先你要用QGraphicsSceneMouseEvent的对象，头文件不要忘了左+右 双键一点点 换 start.png,只是左键就换lose.png,运行一下试试，文件名别打错怎样显示多个图片呢？怎样显示多个图片呢？多生成几个item对象并不能看见多张图片，重复打开多个窗口会重叠，所以要对每张图片设定坐标避免重叠，查HELP坐标和pos相关，图形的边界大小和bound相关 阶段总结阶段总结QT是用于多种平台图形界面程序开发的C+工具包信号和槽机制是Qt编程的基础。它使程序员可以方便的把这个程序的对象绑定在一起，但又不需要让它们互相紧密关联。2D图形图形 鼠标事件鼠标事件 练习练习用用QGraphicsView框架显示框架显示4张图片张图片a做一个原始的打地鼠游戏做一个原始的打地鼠游戏要求：要求：1.随机的显示图片随机的显示图片a一定的时间；一定的时间；2.当鼠标左键点击时，换图片当鼠标左键点击时，换图片b显示显示3.点中的计分点中的计分4.60秒后弹出一个框显示你打中了几个；秒后弹出一个框显示你打中了几个；BTW可以拍同桌的睡相，吃相，可以拍同桌的睡相，吃相，XX相贴上去。相贴上去。