• 1. 第6章 Qt应用程序开发6.1 Qt4程序设计基础 6.2 Qt Designer应用 6.3 QMainWindow、QDialog、Layout 6.4 Qt4数据库应用 6.5 Qt4多线程应用 6.6 Qt4定时器 6.7 Qt4事件处理 6.8 Qt4网络编程 6.9 QSS样式设计 6.10 QGraphics View应用 6.11 自定义控件
  • 2. 6.2 Qt Designer应用Qt Designer简介 Qt Designer界面设计 Qt Designer功能框图 Qt Designer工作过程 Qt Designer应用举例
  • 3. Qt Designer简介Qt应用程序除了使用手工编写代码的方式外,还可以用Qt Desinger来完成,Qt Designer的功能十分强大,界面类似于我们常用的VB,而且还提供了大量可供编程使用的组件。
  • 4. 6.2 Qt Designer应用Qt Designer简介 Qt Designer界面设计 Qt Designer功能框图 Qt Designer工作过程 Qt Designer应用举例
  • 5. 在使用Qt Designer程序开发时,一般要涉及到下面几个步骤: 1.创建和初始化子部件 2.设置子部件布局 3.设置Tab键次序(不是必须) 4.建立信号与插槽的连接 Qt Designer界面设计
  • 6. 1.创建并布置部件2.对部件使用布局管理4.建立信号与插槽的连接3.设置Tab键次序Qt Designer界面设计
  • 7. 编辑两个部件之间信号与插槽之间的连接方式Qt Designer界面设计
  • 8. 6.2 Qt Designer应用Qt Designer简介 Qt Designer界面设计 Qt Designer功能框图 Qt Designer工作过程 Qt Designer应用举例
  • 9. Qt4 Designer将界面设计组织成.ui的文件 通过designer设计并保存工程为**.ui文件 保存到一个文件夹内部 2.手工编写一个main.cpp文件 3.手工编写**.cpp和**.h文件。 4.使用qmake工具生成.pro工程文件 qmake -project 5.生成makefile文件 qmake 6.编译 make Qt Designer工作过程
  • 10. 6.2 Qt Designer应用Qt Designer简介 Qt Designer界面设计 Qt Designer功能框图 Qt Designer工作过程 Qt Designer应用举例
  • 11. Qt Designer功能框图
  • 12. 如何在程序中引入自定义窗口部件Qt设计器中绘制好GUI界面后,就可以利用Qt提供的qmake工具和uic编译工具将ui文件编译成C++源文件。该文件默认的命名规则是: ui_.h 该文件中会根据绘制定义类,默认名称为: Ui_ 利用Qt设计器绘制好GUI界面,便可将其加入到工程中,并可以在应用程序中使用该GUI界面。Qt提供了3种方法在应用中使用Qt设计器绘制的界面类。 直接使用方式 单一继承方式 多继承方式
  • 13. 直接使用方式步骤: 1.利用Qt设计器绘制ui文件first.ui 2.使用集成开发环境或者命令行(qmake -project)创建工程文件 3.将ui文件加入到工程中 4.编写应用程序,直接使用ui_first.h中定义的类 举例
  • 14. 直接使用方式#include #include #include #include "ui_design.h" int main(int argc,char **argv ) { QApplication app(argc,argv); QDialog *pDialog = new QDialog; Ui::DialogDesign ui; ui.setupUi(pDialog); pDialog->show(); return app.exec(); }
  • 15. 单一继承方式需声明自定义类,并继承自QDialog或Qwidget等,在这个类的构造函数中初始化和加载GUI用户界面。 class Dialog : public QDialog { Q_OBJECT public: Dialog(QWidget *parent = 0); ~Dialog(); protected: void changeEvent(QEvent *e); private: Ui::Dialog *ui; };
  • 16. 单一继承方式Dialog::Dialog(QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { ui->setupUi(this); }
  • 17. 单一继承方式 int main(int argc, char *argv[]) { QApplication a(argc, argv); Dialog w; w.show(); return a.exec(); }
  • 18. 多继承方式需从标准的Qwidget或QDialog类和Qt设计器绘制的界面类继承。这样,继承自上述两种类的子类就可以直接访问其父类的公有成员和保护成员。 class Dialog : public QDialog ,public Ui::Dialog{ Q_OBJECT public: Dialog(QWidget *parent = 0); ~Dialog(); };
  • 19. 多继承方式Dialog::Dialog(QWidget *parent) : QDialog(parent) { setupUi(this); }
  • 20. 多继承方式 int main(int argc, char *argv[]) { QApplication a(argc, argv); Dialog w; w.show(); return a.exec(); }
  • 21. 6.2 Qt Designer应用Qt Designer简介 Qt Designer界面设计 Qt Designer功能框图 Qt Designer工作过程 Qt Designer应用举例
  • 22. QT应用程序实例—计算器 保存为test.ui文件,放到test文件夹下 Qt Designer应用举例
  • 23. 生成ui_test.h头文件uic –o ui_test.h test.ui 具体代码参见ui_test.h代码Qt Designer应用举例
  • 24. 编写test.h文件#include #include "ui_test.h" class Dialog : public QDialog,public Ui::Dialog { Q_OBJECT public: Dialog(QDialog *parent=0); private slots: void val1(); void val2(); void val3(); void add(); void ok(); private: double num1; double num2; bool flag; };Qt Designer应用举例
  • 25. 编写test.cpp文件 #include #include "test.h" Dialog::Dialog(QDialog *parent) { setupUi(this); num1=0; num2=0; flag=0; connect(Button1, SIGNAL(clicked()), this, SLOT(val1())); connect(Button2, SIGNAL(clicked()), this, SLOT(val2())); connect(Button3, SIGNAL(clicked()), this, SLOT(val3())); connect(Button_add, SIGNAL(clicked()), this, SLOT(add())); connect(Button_ok, SIGNAL(clicked()), this, SLOT(ok())); } Qt Designer应用举例
  • 26. 编写main.cpp#include #include #include"test.h" int main(int argc, char *argv[]) { QApplication app(argc,argv); Dialog *dialog = new Dialog; dialog->show(); return app.exec(); }Qt Designer应用举例
  • 27. 编译及执行cd test qmake –project qmake make ./test Qt Designer应用举例
  • 28. 谢谢!