(完整版)Qt用户界面设计.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《(完整版)Qt用户界面设计.ppt》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整版 Qt 用户界面 设计
- 资源描述:
-
1、Qt简介Qt的作用Qt的特性及优势包含Qt的系统的架构如何学习QtQt简介 图形用户界面(Graphical User Interface)是指采用图形方式显示的计算机操作用户界面对比:早期的操作系统,如DOS,CUI(Command line User Interface)命令行模式的人机接口组成部分:桌面、视窗、菜单、按钮、图标等Qt是跨平台的C+应用程序和UI开发的框架Qt4有超过500个类和9000多个函数,使用Qt可以迅速开发出期望的应用程序Qt在整个产品开发中的作用构建桌面环境;为应用程序提供可视化的、友好的界面;利用Qt类库自带的功能构建复杂应用程序;使用Qt构建的产品:http
2、:/ 易于获取,个人应用完全免费全面的、艺术级的应用程序框架良好的跨平台性,一劳永逸多语言的支持包含Qt的系统的架构包含Qt的系统的架构学习Qt可用的资源 NO1:Qt参考文档,包括类的简介、类相关函数的介绍、自带例程的源码及讲解、函数的查找和使用、核心特性、关键技术等NO2:www.qtcn.org Qt中文论坛 NO3:C+GUI Programming with Qt4,Second Edition -官方参考文档,讲解精到Qt学习方法NO1:学习Qt自带教程,Qt的example及其参考代码。参考qtdemo程序,学习demo完成自己的程序。NO2:阅读书籍,随书进行编程练习。如C+G
3、UI Qt4编程,提供有完善的代码Qt程序开发程序开发QtCreator介绍Hello Qt!程序开发流程几个Qt练习Qt Creator的设计目标是使开发人员能够利用Qt 这个应 用程序框架更加快速及轻易的完成开发任务。Nokia 收购Qt之后在Qt的工具上做了很大的工作,推出的 一款新的轻量级集成开发环境(IDE),即QtCreator。QtCreator IDE 能够跨平台运行,支持的系统包括 Linux(32 位及 64 位)、Mac OS、Windows等。功能介绍:项目生成向导高级 C+代码编辑器文件及类管理工具集成了Qt Designer集成了qmake 构建工具集成了图形化的
4、GDB 调试前端利用QtCreator开发Qt应用程序的基本流程:创建工程 项工程中添加文件 设计界面 编写代码实现功能 调试运行创建工程打开QtCreator,“File-New File or Project”,选择 “Qt4 Gui Application”输入工程名称:如ex01_helloQt选择工程路径:如D:project根据应用选择功能模块,此工程保持默认即可。创建Qt4 Gui Application时,向导会自动生成一个新类,将来可在 该类中完成应用程序的功能。此步设置该类名称,选择基类名称,及设置该类代码的文件名称另外,设置是否要生成UI文件,如果生成则,将来可以在UI文
5、件 中来绘制界面。最后一步“Finish”即可完成工程创建在工程管理窗口中双击Forms下的mywidget.ui(UI文件),即可打开Qt Designer(Qt界面设计器)在Designer中设计界面编译运行程序:在工程名上右键,选择Run运行效果:练习1:隐藏“HelloQt!”设计两个按钮和一个Label,当点击“show”按钮时显示“HelloQt!”,点击“Hide”按钮时隐藏“HelloQt!”。按照Hellot方法创建工程,并绘制界面。添加功能:t使用信号和槽机制可以很容易的实现对象之间的通信,当某些 事件发生时,对应的信号会被发送。可以将一个对象的信号和其他对象的槽相连,这样
6、,当信号发送 是,和他相连的槽函数即可被调用。编辑信号和槽:Edit-Edit signal/slots(F4)编辑对象:Edit-Edit idgets(F3)F4之后,左键拖动“Show”到“HelloQT”上,释放鼠标,会弹出信 号和槽对话框选择连接clicked()信号和show()槽同样的方法连接“Hide”的clicked()信号和“HelloQt”的show()槽 连接好后如下图示如果要编辑部件,按F3回到部件编辑状态即可最后编译运行程序,观察现象练习:控制LCDNumber显示 通过slider(滑块)和dial(旋钮)控制 LCDNumber上显示的数字Qt Creator编
7、译的程序,在其工程文件夹下会有一个debug文件夹,其中有程序的.exe可执行文件。但Qt Creator默认是用动态链接的,就是可执行程序在运行时需要相应的.dll文件。我们点击生成的.exe文件,首先可能显示“没有找到mingwm10.dll,因此这个应用程序未能启动。重新安装应用程序可能会修复此问题。”表示缺少mingwm10.dll文件。解决这个问题我们可以将相应的.dll文件放到系统中。在Qt Creator的安装目录的qt文件下的bin文件夹下(比如安装在了D盘,所以路径是D:Qt2009.04qtbin),可以找到所有的相关.dll文件。方法一:在这里找到mingwm10.dll
8、文件,将其复制到C:WINDOWSsystem文件夹下即可。下面再提示缺少什么dll文件,都像这样解决就可以了。方法二:将这些dll文件都与.exe文件放到同一个文件夹下。不过这样每个.exe文件都要放一次。方法三:将D:Qt2009.04qtbin加入系统Path环境变量。右击我的电脑-属性-高级-环境变量-在系统变量列表中找到Path,将路径加入其中即可。用纯源码编写:1.新建空的Qt工程。2.工程名为hello world,并选择工程保存路径 3.在新建好的工程中添加文件。右击工程文件夹,弹出的菜单中选择Add New。4.选择普通文件。点击Ok5.文件名为main.cpp,点击Next
9、进入下一步。6.这里自动将这个文件添加到了新建的工程中。保持默认设置,点击完成。7.在main.cpp文件中添加代码。8.这时点击运行,程序执行了,但看不到效果,因为程序里什么也没做。我们点击信息框右上角的红色方块,停止程序运行。9.我们再更改代码。添加一个对话框对象。10.运行效果如下。11.我们更改代码如下,在对话框上添加一个标签对象,并显示hello world。12.运行效果如下。二、Qt Creator编写多窗口程序实现功能:实现功能:程序开始出现一个对话框,按下按钮后便能进入主窗口,如果直接关闭这个对话框,便不能进入主窗口,整个程序也将退出。当进入主窗口后,我们按下按钮,会弹出一个
10、对话框,无论如何关闭这个对话框,都会回到主窗口。实现原理:实现原理:程序里我们先建立一个主工程,作为主界面,然后再建立一个对话框类,将其加入工程中,然后在程序中调用自己新建的对话框类来实现多窗口。实现过程:实现过程:1.首先新建Qt4 Gui Application工程,工程名为nGui,Base class选为QWidget。建立好后工程文件列表如下图。2.新建对话框类,如下图,在新建中,选择Qt Designer Form Class。3.选择Dialog without Buttons。4.类名设为myDlg。5.点击Finish完成。注意这里已经默认将其加入到了我们刚建的工程中了。6.
11、如下图,在mydlg.ui中拖入一个Push Button,将其上的文本改为“进入主窗口”,在其属性窗口中将其objectName改为enterBtn(Push Button名字),在下面的Signals and slots editor中进行信号和槽的关联,其中,Sender设为enterBtn,Signal设为clicked(),Receive设为myDlg,Slot设为accept()。这样就实现了单击这个按钮使这个对话框关闭并发出Accepted信号的功能。下面我们将利用这个信号。7.修改主函数main.cpp,如下:#include#include“widget.h”#include
12、“mydlg.h”/加入头文件int main(int argc,char*argv)QApplication a(argc,argv);Widget w;myDlg my1;/建立自己新建的类的对象my1 if(my1.exec()=QDialog:Accepted)/利用Accepted信号判断enterBtn是否被按下 w.show();/如果被按下,显示主窗口 return a.exec();/程序一直执行,直到主窗口关闭 else return 0;/如果没被按下,则不会进入主窗口,整个程序结束运行主函数必须这么写,才能完成所要的功能。到这里,我们就实现了一个界面结束执行,然后弹出另
13、一个界面的程序。下面我们在主窗口上加一个按钮,按下该按钮,弹出一个对话框,但这个对话框关闭,不会使主窗口关闭。8.如下图,在主窗口加入按钮,显示文本为“弹出一个对话框”,在其上点击鼠标右键,在弹出的菜单中选择go to slot。9.我们选择单击事件clicked()。10.我们在弹出的槽函数中添加一句:my2.show();my2为我们新建对话框类的另一个对象,但是my2我们还没有定义,所以在widget.h文件中添加相应代码,如下,先加入头文件,再加入my2的定义语句,这里我们将其放到private里,因为一般的函数都放在public里,而变量都放在private里。#ifndef WID
14、GET_H#define WIDGET_H#include#include“mydlg.h”/包含头文件namespace Uiclass Widget;class Widget:public QWidgetQ_OBJECTpublic:Widget(QWidget*parent=0);Widget();private:Ui:Widget*ui;myDlg my2;/对my2进行定义private slots:void on_pushButton_clicked();#endif/WIDGET_H到这里,再运行程序,便能完成我们实验要求的功能了。整个程序里,我们用两种方法实现了信号和槽函数的关
15、联,第一个按钮我们直接在设计器中实现其关联;第二个按钮我们自己写了槽函数语句,其实图形的设计与直接写代码效果是一样的。三、Qt Creator登录对话框实现功能:实现功能:在弹出对话框中填写用户名和密码,按下登录按钮,如果用户名和密码均正确则进入主窗口,如果有错则弹出警告对话框。实现原理:实现原理:通过上节的多窗口原理实现由登录对话框进入主窗口,而用户名和密码可以用if语句进行判断。实现过程:1.先新建Qt4 Gui Application工程,工程名为mainWidget,选用QWidget作为Base class,这样便建立了主窗口。文件列表如下:2.然后新建一个Qt Designer F
16、orm Class类,类名为loginDlg,选用Dialog without Buttons,将其加入上面的工程中。文件列表如下:3.在logindlg.ui中设计下面的界面:行输入框为Line Edit。其中用户名后面的输入框在属性中设置其object Name为usrLineEdit,密码后面的输入框为pwdLineEdit,登录按钮为loginBtn,退出按钮为exitBtn。4.将exitBtn的单击后效果设为退出程序,关联如下:5.右击登录按钮选择go to slot,再选择clicked(),然后进入其单击事件的槽函数,写入一句 void loginDlg:on_loginBtn
17、_clicked()accept();6.改写main.cpp:#include#include“widget.h”#include“logindlg.h”int main(int argc,char*argv)QApplication a(argc,argv);Widget w;loginDlg login;if(login.exec()=QDialog:Accepted)w.show();return a.exec();else return 0;7.这时执行程序,可实现按下登录按钮进入主窗口,按下退出按钮退出程序。8.添加用户名密码判断功能。将登陆按钮的槽函数改为:void loginD
18、lg:on_loginBtn_clicked()if(ui-usrLineEdit-text()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“123456)/判断用户名和密码是否正确accept();elseQMessageBox:warning(this,tr(“Warning”),tr(“user name or password error!”),QMessageBox:Yes);/如果不正确,弹出警告对话框并在logindlg.cpp中加入#include 的头文件。如果不加这个头文件,QMessageBox类不可用。9.这时再执行程序,输入用户名为qt,密码
19、为123456,按登录按钮便能进入主窗口了,如果输入错了,就会弹出警告对话框。如果输入错误,便会弹出警告提示框:10.在logindlg.cpp的loginDlg类构造函数里,添上初始化语句,使密码显示为小黑点。loginDlg:loginDlg(QWidget*parent):QDialog(parent),ui(new Ui:loginDlg)ui-setupUi(this);ui-pwdLineEdit-setEchoMode(QLineEdit:Password);效果如下:11.如果输入如下图中的用户名,在用户名前不小心加上了一些空格,结果程序按错误的用户名对待了。我们可以更改if判
20、断语句,使这样的输入也算正确。void loginDlg:on_loginBtn_clicked()if(ui-usrLineEdit-text().trimmed()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“123456)accept();elseQMessageBox:warning(this,tr(“Warning”),tr(“user name or password error!”),QMessageBox:Yes);加入的这个函数的作用就是移除字符串开头和结尾的空白字符。12.最后,如果输入错误了,重新回到登录对话框时,我们希望可以使用户名和密码框清空
21、并且光标自动跳转到用户名输入框,最终的登录按钮的单击事件的槽函数如下:void loginDlg:on_loginBtn_clicked()if(ui-usrLineEdit-text().trimmed()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“123456)/判断用户名和密码是否正确accept();elseQMessageBox:warning(this,tr(“Warning”),tr(“user name or password error!”),QMessageBox:Yes);/如果不正确,弹出警告对话框ui-usrLineEdit-clear()
22、;/清空用户名输入框ui-pwdLineEdit-clear();/清空密码输入框ui-usrLineEdit-setFocus();/将光标转到用户名输入框最终的loginDlg.cpp文件如下图:四、Qt Creator添加菜单图标1.新建Qt4 Gui Application工程,将工程命名为MainWindow,其他选项默认即可。生成的窗口界面如下图。其中最上面的为菜单栏。2.我们在Type Here那里双击,并输入“文件(&F)”,这样便可将其文件菜单的快捷键设为Alt+F。(注意括号最好用英文半角输入,这样看着美观)3.输入完按下Enter键确认即可,然后在子菜单中加入“新建(&N
23、)”,确定后,效果如下图。4.我们在下面的动作编辑窗口可以看到新加的“新建”菜单。5.双击这一条,可打开它的编辑对话框。我们看到Icon项,这里可以更改“新建”菜单的图标。6.我们点击后面的号,进入资源选择器,但现在这里面是空的。所以下面我们需要给该工程添加外部资源。7.添加资源有两种方法。一种是直接添加系统提供的资源文件,然后选择所需图标。另一种是自己写资源文件。我们主要介绍第一种。新建Qt Resources file,将它命名为menu。其他默认。8.添加完后如下图。可以看到添加的文件为menu.qrc。9.我们最好先在工程文件夹里新建一个文件夹,如images,然后将需要的图标文件放到
24、其中。10.在Qt Creator的menu.qrc文件中,我们点击Add下拉框,选择Add Prefix。我们可以将生成的/new/prefix前缀改为其他名字,如/File。11.然后再选择Add下拉框,选择Add Files。再弹出的对话框中,我们到新建的images文件夹下,将里面的图标文件全部添加过来。12.添加完成后,我们在Qt Creator的File菜单里选择Save All选项,保存所做的更改。(注意:一定要先保存刚才的qrc文件,不然在资源管理器中可能看不见自己添加的资源!)13.这时再打开资源选择器,可以看到我们的图标都在这里了。(注意:如果不显示,可以按一下上面的Rel
25、oad按钮)14.我们将new.png作为“新建”菜单的图标,然后点击Shortcut,并按下Crtl+N,便能将Crtl+N作为“新建”菜单的快捷键。15.这时打开文件菜单,可以看到“新建”菜单已经有图标了。运行程序后效果如下。16.我们在工程文件夹下查看建立的menu.qrc文件,可以用写字板将它打开。其具体内容如下。第二种添加资源文件的方法。1.首先右击工程文件夹,在弹出的菜单中选择Add New,添加新文件。也可以用File中的添加新文件。2.我们选择文本文件。3.将文件名设置为menu.qrc。4.添加好文件后将其内容修改如下。可以看到就是用第一种方法生成的menu.qrc文件的内容
展开阅读全文