《QT图形用户界面》PPT课件.ppt

图形用户界面图形用户界面图形用户界面图形用户界面QT QT 第四章第四章第四章第四章1本章计划本章计划v可视对象的返回值和数据v鼠标，键盘，定时器等事件的捕捉v一些事件的虚函数重载，信号从基类转发v掌握QDialog,QTimer,QTimev掌握QSettings,QSqlDatabasev了解QtNetWorkv掌握QGraphicsView,QGraphicsScenev掌握QGraphicsItem,QPixmap2计算器里的关于窗口计算器里的关于窗口v上面有2个按钮，确定和取消，QMainWindow怎么知道你按了哪一个呢？首先，那个是一个按钮组buttonBox，是QDialog组件里就关联好信号的。在信号和槽编辑器里能看的到。我们可以看看QDialog的槽accept()和rejecct()起什么作用，看HELP文档可视对象的返回值和数据可视对象的返回值和数据3QDialog的槽的槽accept()和和rejecct()HELP文档里是这么解释的，看懂了吗？文档里是这么解释的，看懂了吗？voidQDialog:accept()virtualslotHidesthemodaldialogandsetstheresultcodetoAccepted.voidQDialog:reject()virtualslotHidesthemodaldialogandsetstheresultcodetoRejected.voidQDialog:accepted()signalThissignalisemittedwhenthedialoghasbeenacceptedeitherbytheuserorbycallingaccept()ordone()withtheQDialog:Acceptedargument.4QDialog的返回值的返回值跟据跟据HELP文档，我们可以这样写代码文档，我们可以这样写代码5鼠标，键盘，定时器等事件的捕捉鼠标，键盘，定时器等事件的捕捉v事件在Qt里分很多种，比如鼠标，键盘，定时器，窗体扩大缩小，有鼠标飘过，有数值变化等等，任何一个小动作，在GUI里都会触发某种事件。当事件产生时，怎么来进行处理呢？v跟据C+的语言特性，虚函数重载可以解决这个问题，所有可以处理的事件，一定都是虚函数。v现在我们来做一个close事件处理。6close事件的捕捉事件的捕捉还记得第一个例子吗，一个按钮一按就关闭窗口了。当然按右上角的X，也可以关闭，但有的窗口按了右上角的X会跳出一个框来。这个是通过重载关闭事件而处理出的一个框，怎么做呢？7QMainWindow的的close事件在哪事件在哪？v刚刚讲过，所有能处理的事件，一定是虚函数，那虚函数去哪找？去protected里找。v现在我们要关闭的是QMainWindow，并且要它跳出那个框出来，怎么找相应事件呢？来查下HELP文档8 QMainWindow的的close事件在哪？事件在哪？v点不出来吧？为啥？因为QMainWindow没有，那怎么查？去找它的基类，它一定是从基类里继承了所有的事件。v点进Qwidget这个基类以后，再点ProtectedFuntions9QMainWindow的的close事件在哪？事件在哪？找到找到close事件了事件了点进看去说明和例子点进看去说明和例子Bydefault,theeventisacceptedandthewidgetisclosed.Youcanreimplementthisfunctiontochangethewaythewidgetrespondstowindowcloserequests.Forexample,youcanpreventthewindowfromclosingbycallingignore()onallevents.你看不懂可以复制查你看不懂可以复制查google百度有道翻译就对了。百度有道翻译就对了。要还在发呆，就是你的不对了。要还在发呆，就是你的不对了。10重载基类的虚函数的代码怎么写重载基类的虚函数的代码怎么写1.想想C+语法，派生类怎么去重载基类的虚函数把声明抄过来11.cpp的重载代码怎么写？的重载代码怎么写？C语言就强调了，用谁的东西，就include谁的头文件一按X就重载了close事件，在这里我们用QMessageBox速生成了一个小框，然后取它的返回值看你按了什么键，如果按的取消，据据QMainWindow的HELP文档用ignore()接口忽略close事件12中文显示的处理中文显示的处理#includeintmain(intargc,char*argv)QApplicationa(argc,argv);QTextCodec*codec=QTextCodec:codecForName(GB2312);QTextCodec:setCodecForLocale(codec);QTextCodec:setCodecForCStrings(codec);QTextCodec:setCodecForTr(codec);MainWindoww;w.show();returna.exec();13一个窗口有多少种事件可以处理呢？一个窗口有多少种事件可以处理呢？v看看HELP文档里的protected里有多少种事件v一定要学会查HELP文档，查google翻译v现在我们小试了中间的一个close事件，其它的事件后续会有介绍，14来做一个定时器来做一个定时器我们需要用到QTimer这个类，查HELP文档QTimer是个什么类，查接口，信号，槽，和例子15QTimer定时器定时器你可以先从DetailedDescription示例开始看QTimer*timer=newQTimer(this);connect(timer,SIGNAL(timeout(),this,SLOT(update();timer-start(1000);看到这个例子代码，基本知道怎么用这个定时器了看到这个例子代码，基本知道怎么用这个定时器了1.定时器对象需要生成；定时器对象需要生成；2.定时器用定时器用start()启动，有启动，有2个重载，带形参的是毫秒间隙时间；个重载，带形参的是毫秒间隙时间；3.定时器启动以后，每隔间隙时间发来一个定时器启动以后，每隔间隙时间发来一个timeout()信号信号,你可你可以去连接一个你的槽来处理。以去连接一个你的槽来处理。16练习练习 做定时器做定时器要求：1.按start就开始一秒一秒的计时2.按pause就暂停显示，但背地里还在计时，再按pause就显示实际的时间3.按stop就停，再按一次就清零4.按X退出时，要有对话框5.有帮助-关于QDialog，上面写上XXX几几年几几月几日制做，版本V0.117对对Qt的几点总结和感悟的几点总结和感悟做了一些GUI程序以后，我们总结一下Qt只是提供一些GUI的显示，和一些功能类，对象与对象，对象与GUI的逻辑关联，和Qt没有关系Qt提供数据传输和通道方案逻辑关系完全是由C结构实现Qt对象有什么功能，怎么和其它对象连接，要多查HELP文档你体会出来了吗？18Qt GUI巩固练习巩固练习 电子钟电子钟v做一个电子钟，做一个电子钟，24小时制显示小时制显示时时:分分:钞钞v时分钞中的时分钞中的:需要一秒一闪需要一秒一闪v当按日期按钮时，需要变成日期显示当按日期按钮时，需要变成日期显示v日期格式日期格式年年-月月-日日v日期显示完日期显示完5秒后，又变回时间显示秒后，又变回时间显示v查查HELP里里QTime时间类的使用时间类的使用,v显示用显示用QLCDnumber类类v注意逻辑是注意逻辑是C语法才能实现语法才能实现19Qt 的一些其它类的一些其它类 QGraphicsViewQGraphicsView动态2D显示容器查看一下HELP里它的DetailedDescriptionQGraphicsView提供了一个界面，它既可以管理大数量的定制2Ditems，又可与它们交互，有一个viewwidget可以把这些项绘制出来，并支持旋转与缩放。这个柜架也包含一个事件传播结构，对于在scene中的这些items,它具有双精度的交互能力。Items能处理键盘事件，鼠标的按，移动、释放、双击事件，也可以跟踪鼠标移动。整个框架是这样的QGraphicsView容器-QGraphicsScene场景-QGraphicsItem图元20Qt 的一些其它类的一些其它类 QGraphicsViewQGraphicsView里包含了QGraphicsScene而QGraphicsScene拥有多个图元，包含三层：背景层，图元层，前景层QGraphicsItem图元支持鼠标事件，滚轮事件，上下文菜单事件支持键盘输入焦点，按键事件支持拖放支持分组21Qt 的一些其它类的一些其它类 QGraphicsViewQGraphicsItem图元类，只是一个虚基类，有8种不同的派生类.vQGraphicsEllipseItem 椭圆图元vQGraphicsLineItem线图元vQGraphicsPathItem曲线图元vQGraphicsPixmapItem 像素图元vQGraphicsPolygonItem多边形图元vQGraphicsRectItem矩形图元vQGraphicsSimpleTextItem文本标签图元vQGraphicsTextItem文本浏览器图元22Qt 的一些其它类的一些其它类 QGraphicsView我们以QGraphicsPixmapItem像素图元为例，介绍框架的连接QGraphicsPixmapItem像素图元，也就是拿一张图片来显示图元程序框架如下QMainWindow-QGraphicsView容器-QGraphicsScene场景-QGraphicsPixmapItem像素图元23Qt 的一些其它类的一些其它类 QGraphicsViewQMainWindow和QGraphicsView怎么连接，画上去就可以了拖过去，大约拉大一点。24View容器容器 场景场景 像素图元像素图元QGraphicsView容器-QGraphicsScene场景-QGraphicsPixmapItem像素图元场影和图元怎么连接View呢？场影和图元在这里每个类需要派生一个自已改造的类，为此我们要建.h和.cpp场景我们建myScene图元我们建myItem25建建 场景场景132426建建 图元图元用同样的方法建图元，并且是像素图元注意，这里的类型信息没有继承自QObjectQGraphicsPixmapItem的基类是QGraphicsItem，但是QGraphicsItem并没有继承自QObject，这意味着QGraphicsPixmapItem不能使用信号和槽通信27View容器容器-场景场景-像素图元像素图元QGraphicsView容器-QGraphicsScene场景-QGraphicsPixmapItem像素图元查HELP文档View的DetailedDescription有一个例有一个例子子,是用对象构造的方法来加入了是用对象构造的方法来加入了scene的关连的关连QGraphicsViewview(&scene);view.show();查构造函数QGraphicsView(QGraphicsScene*scene,QWidget*parent=0);有没有直接可以设定scene的接口呢？查查add,set之类的关键词void setScene(QGraphicsScene*scene);28View容器容器-场景场景在mainwindow.h里包含myscene.h头文件，创建一个对象，调用setScene接口和View关连29场景场景-像素图元像素图元QGraphicsScene场景-QGraphicsPixmapItem像素图元查HELP文档QGraphicsScene找关连Item的接口，查add,set之类的关键词找到voidaddItem(QGraphicsItem*item)；先不管空间泄露总之已经关连了302D QGraphicsViewOK,我们完成了2D图形的程序框架如下QMainWindow-QGraphicsView容器-QGraphicsScene场景-QGraphicsPixmapItem像素图元到此程序编译成功，可以运行，但是一片空白。为啥？因为item并没有贴上像素，也就是没有贴图片GUI也就是在绘图，或是显示图片现在我们给Item贴上图片31QGraphicsPixmapItem像素图元像素图元 贴图贴图QGraphicsPixmapItem像素图元查HELP文档QGraphicsPixmapItem找相关贴图的接口，还是找add,set,Pixmap相关的单词，英语不好的童鞋好好查友道词典，不要发呆，不要等别人现成的答案。32QGraphicsPixmapItem像素图元像素图元 贴图贴图找到voidsetPixmap(constQPixmap&pixmap);形参需要一个QPixmap的类，继续看QPixmapFormat格式支持里，支持BMPGIFJPGPNG等很多的图片格式，但是原生只支持BMP和PNG，但其它的格式都通过了插件的模式支持了。怎么把图片的格式转换成QPixmap呢？找接口。图片是一个文件,一个filename，就找filename相关QPixmap(constQString&fileName,constchar*format=0,Qt:ImageConversionFlagsflags=Qt:AutoColor)boolload(constQString&fileName,constchar*format=0,Qt:ImageConversionFlagsflags=Qt:AutoColor)一个是构造时就可以转换，一个是用load()来转换33QGraphicsPixmapItem像素图元像素图元 贴图贴图要贴的图片文件要先加入资源文件，这里取名ppp加完了以后，双击ppp.qrc34QGraphicsPixmapItem像素图元像素图元 贴图贴图1231.添加前缀2.下面的前缀很长，改成/,在这里的路径和程序里的路径都按Linux/Unix标准45度的杠执行；3.把你要的图片文件先复制到工程文件夹下，再去按”添加”-“添加文件”，可以一次性框选多个文件35QGraphicsPixmapItem像素图元像素图元 贴图贴图好了，开始给Item贴图这里调用QGraphicsPixmapItem的setPixmap()接口直接用QPixmap构造函数生成无名对象输入setPixmap()现在运行一下程序看看，有图片了。36应应 用用这么大的力气，显示了一张图？你可以显示4张图，然后加上定时器打地鼠；再多显示几张，围棋，国际象棋，如果让item在一秒内多次移动坐标动起来的话？对了，可以做俄罗斯方块如果把图片贴的漂亮一点，内容再丰富一点，植物大战僵尸，小鸟没有做不到，只有想不到。37鼠标事件响应鼠标事件响应还记得protected里的虚函数么?去找Item的虚函数，找mouse相关的虚函数重载来实现鼠标事件处理virtualvoid mousePressEvent();还记得怎么重载虚函数不？38鼠标事件响应鼠标事件响应点了以后，让他变张图运行一下试试看，变了没39鼠标事件响应鼠标事件响应 左右键区分左右键区分 双键双键查HELP文档看形参上的QGraphicsSceneMouseEvent是个什么样的类button()和buttons()2个接口用来返回你点了什么键注意它们的返回值，是宏定义Qt:MouseButton，再去查是什么样的东西.40鼠标事件响应鼠标事件响应 左右键区分左右键区分 双键双键首先你要用QGraphicsSceneMouseEvent的对象，头文件不要忘了左+右双键一点点换start.png,只是左键就换lose.png,运行一下试试，文件名别打错41怎样显示多个图片呢？怎样显示多个图片呢？多生成几个item对象并不能看见多张图片，重复打开多个窗口会重叠，所以要对每张图片设定坐标避免重叠，查HELP坐标和pos相关，图形的边界大小和bound相关42阶段总结阶段总结QT是用于多种平台图形界面程序开发的C+工具包信号和槽机制是Qt编程的基础。它使程序员可以方便的把这个程序的对象绑定在一起，但又不需要让它们互相紧密关联。432D图形图形 鼠标事件鼠标事件 练习练习用用QGraphicsView框架显示框架显示4张图片张图片a做一个原始的打地鼠游戏做一个原始的打地鼠游戏要求：要求：1.随机的显示图片随机的显示图片a一定的时间；一定的时间；2.当鼠标左键点击时，换图片当鼠标左键点击时，换图片b显示显示3.点中的计分点中的计分4.60秒后弹出一个框显示你打中了几个；秒后弹出一个框显示你打中了几个；BTW可以拍同桌的睡相，吃相，可以拍同桌的睡相，吃相，XX相贴上去。相贴上去。44