Qt用户界面设计

Qt简介Qt的作用Qt的特性及优势包含Qt的系统的架构如何学习QtQt简介图形用户界面（GraphicalUserInterface）是指采用图形方式显示的计算机操作用户界面对比：早期的操作系统，如DOS，CUI(CommandlineUserInterface)命令行模式的人机接口组成部分：桌面、视窗、菜单、按钮、图标等Qt是跨平台的C++应用程序和UI开发的框架Qt4有超过500个类和9000多个函数，使用Qt可以迅速开发出期望的应用程序Qt在整个产品开发中的作用构建桌面环境；为应用程序提供可视化的、友好的界面；利用Qt类库自带的功能构建复杂应用程序；使用Qt构建的产品：的特性及优势易于获取，个人应用完全免费全面的、艺术级的应用程序框架良好的跨平台性，一劳永逸多语言的支持包含Qt的系统的架构包含Qt的系统的架构学习Qt可用的资源NO1:Qt参考文档，包括类的简介、类相关函数的介绍、自带例程的源码及讲解、函数的查找和使用、核心特性、关键技术等NO2:中文论坛NO3：《C++GUIProgrammingwithQt4,SecondEdition》--官方参考文档，讲解精到Qt学习方法NO1：学习Qt自带教程，Qt的example及其参考代码。参考qtdemo程序，学习demo完成自己的程序。NO2:阅读书籍，随书进行编程练习。如《C++GUIQt4编程》，提供有完善的代码Qt程序开发QtCreator介绍HelloQt!程序开发流程几个Qt练习QtCreator的设计目标是使开发人员能够利用Qt这个应用程序框架更加快速及轻易的完成开发任务。Nokia收购Qt之后在Qt的工具上做了很大的工作,推出的一款新的轻量级集成开发环境(IDE),即QtCreator。QtCreatorIDE能够跨平台运行，支持的系统包括Linux（32位及64位）、MacOS、Windows等。功能介绍：项目生成向导高级C++代码编辑器文件及类管理工具集成了QtDesigner集成了qmake构建工具集成了图形化的GDB调试前端利用QtCreator开发Qt应用程序的基本流程：创建工程向工程中添加文件设计界面编写代码实现功能调试运行创建工程打开QtCreator，“File-NewFileorProject…”，选择“Qt4GuiApplication”输入工程名称：如ex01_helloQt选择工程路径：如D:\project根据应用选择功能模块，此工程保持默认即可。创建Qt4GuiApplication时,向导会自动生成一个新类，将来可在该类中完成应用程序的功能。此步设置该类名称，选择基类名称，及设置该类代码的文件名称另外，设置是否要生成UI文件，如果生成则，将来可以在UI文件中来绘制界面。最后一步“Finish”即可完成工程创建在工程管理窗口中双击Forms下的mywidget.ui(UI文件)，即可打开QtDesigner(Qt界面设计器)在Designer中设计界面编译运行程序：在工程名上右键，选择Run运行效果：练习1：隐藏“HelloQt!”设计两个按钮和一个Label,当点击“show”按钮时显示“HelloQt!”,点击“Hide”按钮时隐藏“HelloQt!”。按照HelloＱt方法创建工程，并绘制界面。添加功能：Ｑt使用信号和槽机制可以很容易的实现对象之间的通信，当某些事件发生时，对应的信号会被发送。可以将一个对象的信号和其他对象的槽相连，这样，当信号发送是，和他相连的槽函数即可被调用。编辑信号和槽：Edit-Editsignal/slots(F4)编辑对象：Edit-EditＷidgets(F3)F4之后，左键拖动“Show”到“HelloQT”上，释放鼠标，会弹出信号和槽对话框选择连接clicked()信号和show()槽同样的方法连接“Hide”的clicked()信号和“HelloQt”的show()槽连接好后如下图示如果要编辑部件，按F3回到部件编辑状态即可最后编译运行程序，观察现象练习２：控制LCDNumber显示通过slider(滑块)和dial(旋钮)控制LCDNumber上显示的数字QtCreator编译的程序，在其工程文件夹下会有一个debug文件夹，其中有程序的.exe可执行文件。但QtCreator默认是用动态链接的，就是可执行程序在运行时需要相应的.dll文件。我们点击生成的.exe文件，首先可能显示“没有找到mingwm10.dll，因此这个应用程序未能启动。重新安装应用程序可能会修复此问题。”表示缺少mingwm10.dll文件。解决这个问题我们可以将相应的.dll文件放到系统中。在QtCreator的安装目录的qt文件下的bin文件夹下（比如安装在了D盘，所以路径是D:\Qt\2009.04\qt\bin），可以找到所有的相关.dll文件。方法一：在这里找到mingwm10.dll文件，将其复制到C:\WINDOWS\system文件夹下即可。下面再提示缺少什么dll文件，都像这样解决就可以了。方法二：将这些dll文件都与.exe文件放到同一个文件夹下。不过这样每个.exe文件都要放一次。方法三：将D:\Qt\2009.04\qt\bin加入系统Path环境变量。右击我的电脑-属性-高级-环境变量-在系统变量列表中找到Path,将路径加入其中即可。用纯源码编写:1.新建空的Qt工程。2.工程名为helloworld，并选择工程保存路径3.在新建好的工程中添加文件。右击工程文件夹，弹出的菜单中选择AddNew。4.选择普通文件。点击Ok5.文件名为main.cpp，点击Next进入下一步。6.这里自动将这个文件添加到了新建的工程中。保持默认设置，点击完成。7.在main.cpp文件中添加代码。8.这时点击运行，程序执行了，但看不到效果，因为程序里什么也没做。我们点击信息框右上角的红色方块，停止程序运行。9.我们再更改代码。添加一个对话框对象。10.运行效果如下。11.我们更改代码如下，在对话框上添加一个标签对象，并显示helloworld。12.运行效果如下。二、QtCreator编写多窗口程序实现功能：程序开始出现一个对话框，按下按钮后便能进入主窗口，如果直接关闭这个对话框，便不能进入主窗口，整个程序也将退出。当进入主窗口后，我们按下按钮，会弹出一个对话框，无论如何关闭这个对话框，都会回到主窗口。实现原理：程序里我们先建立一个主工程，作为主界面，然后再建立一个对话框类，将其加入工程中，然后在程序中调用自己新建的对话框类来实现多窗口。实现过程：1.首先新建Qt4GuiApplication工程，工程名为nGui，Baseclass选为QWidget。建立好后工程文件列表如下图。2.新建对话框类，如下图，在新建中，选择QtDesignerFormClass。3.选择DialogwithoutButtons。4.类名设为myDlg。5.点击Finish完成。注意这里已经默认将其加入到了我们刚建的工程中了。6.如下图，在mydlg.ui中拖入一个PushButton，将其上的文本改为“进入主窗口”，在其属性窗口中将其objectName改为enterBtn(PushButton名字)，在下面的Signalsandslotseditor中进行信号和槽的关联，其中，Sender设为enterBtn，Signal设为clicked()，Receive设为myDlg，Slot设为accept()。这样就实现了单击这个按钮使这个对话框关闭并发出Accepted信号的功能。下面我们将利用这个信号。7.修改主函数main.cpp，如下：#includeQtGui/QApplication#include“widget.h”#include“mydlg.h”//加入头文件intmain(intargc,char*argv[]){QApplicationa(argc,argv);Widgetw;myDlgmy1;//建立自己新建的类的对象my1if(my1.exec()==QDialog::Accepted)//利用Accepted信号判断enterBtn是否被按下{w.show();//如果被按下，显示主窗口returna.exec();//程序一直执行，直到主窗口关闭}elsereturn0;//如果没被按下，则不会进入主窗口，整个程序结束运行}主函数必须这么写，才能完成所要的功能。到这里，我们就实现了一个界面结束执行，然后弹出另一个界面的程序。下面我们在主窗口上加一个按钮，按下该按钮，弹出一个对话框，但这个对话框关闭，不会使主窗口关闭。8.如下图，在主窗口加入按钮，显示文本为“弹出一个对话框”，在其上点击鼠标右键，在弹出的菜单中选择gotoslot。9.我们选择单击事件clicked()。10.我们在弹出的槽函数中添加一句：my2.show();my2为我们新建对话框类的另一个对象，但是my2我们还没有定义，所以在widget.h文件中添加相应代码，如下，先加入头文件，再加入my2的定义语句，这里我们将其放到private里，因为一般的函数都放在public里，而变量都放在private里。#ifndefWIDGET_H#defineWIDGET_H#includeQtGui/QWidget#include“mydlg.h”//包含头文件namespaceUi{classWidget;}classWidget:publicQWidget{Q_OBJECTpublic:Widget(QWidget*parent=0);~Widget();private:Ui::Widget*ui;myDlgmy2;//对my2进行定义privateslots:voidon_pushButton_clicked();};#endif//WIDGET_H到这里，再运行程序，便能完成我们实验要求的功能了。整个程序里，我们用两种方法实现了信号和槽函数的关联，第一个按钮我们直接在设计器中实现其关联；第二个按钮我们自己写了槽函数语句，其实图形的设计与直接写代码效果是一样的。三、QtCreator登录对话框实现功能：在弹出对话框中填写用户名和密码，按下登录按钮，如果用户名和密码均正确则进入主窗口，如果有错则弹出警告对话框。实现原理：通过上节的多窗口原理实现由登录对话框进入主窗口，而用户名和密码可以用if语句进行判断。实现过程：1.先新建Qt4GuiApplication工程，工程名为mainWidget，选用QWidget作为Baseclass，这样便建立了主窗口。文件列表如下：2.然后新建一个QtDesignerFormClass类，类名为loginDlg，选用DialogwithoutButtons，将其加入上面的工程中。文件列表如下：3.在logindlg.ui中设计下面的界面：行输入框为LineEdit。其中用户名后面的输入框在属性中设置其objectName为usrLineEdit，密码后面的输入框为pwdLineEdit，登录按钮为loginBtn，退出按钮为exitBtn。4.将exitBtn的单击后效果设为退出程序，关联如下：5.右击登录按钮选择gotoslot，再选择clicked(),然后进入其单击事件的槽函数，写入一句voidloginDlg::on_loginBtn_clicked(){accept();}6.改写main.cpp：#includeQtGui/QApplication#include“widget.h”#include“logindlg.h”intmain(intargc,char*argv[]){QApplicationa(argc,arg