Qt Designer使用简易教程 比眉伴天荒 2021-12-09 01:19 1464阅读 0赞 以Qt 4.4自带的example/designer/calculatorform为例进行说明。 **创建工作目录。** 打开终端，在预定目录执行如下命令： mkdir CalculatorForm cd CalculatorForm **创建窗体。** 打开Qt Designer（这个也不会的话，请找块豆腐自己撞死）。快捷键Ctrl+N弹出新建窗体菜单，选择Widget模板。点击创建（C reate）。如下图： [![Qt <wbr>Designer使用简易教程][Qt_wbr_Designer]][Qt_wbr_Designer_Qt_wbr_Designer] **添加控件，修改属性和对象名。** 从Qt Designer主窗体的Widget Box里面拖拽6个Label、2个SpinBox、1个HorizontalSpacer、1个VerticalSpacer。简单摆放。修改窗体的WindowTitle为Calculator Form，并在属性编辑器中修改每个Label的显示文字，如下图。 [![Qt <wbr>Designer使用简易教程][Qt_wbr_Designer 1]][Qt_wbr_Designer_Qt_wbr_Designer 1] 用于显示结果的Label还要修改其他几个属性，如下图： [![Qt <wbr>Designer使用简易教程][Qt_wbr_Designer 2]][Qt_wbr_Designer_Qt_wbr_Designer 2] 在对象查看器中修改各控件的对象名，可以起成相关的有意义的名字，参考下图： [![Qt <wbr>Designer使用简易教程][Qt_wbr_Designer 3]][Qt_wbr_Designer_Qt_wbr_Designer 3] 注：我这里用于显示结果的Label所起的对象名（resultLabel）和Qt自带例子中的对象名（outputWidget）不一样，导致后面的代码和自带例子的代码中的一个变量名也不一样。 **调整布局。** 同时选中Input1和它下方的SpinBox（按住shift鼠标左键逐个点击或用鼠标左键圈选），点击Qt Designer主窗体上的垂直布局按钮对二者进行布局，以此类推对Input2和下方SpinBox、Output和结果Label进行垂直布局。然后左键单击窗体空白处，点击Qt Designer主窗体上的栅格布局（GridLayout），给整个窗体赋以栅格布局（如果不对整个窗体进行布局，保存成.ui格式的文件时，占位符无法被保存）。布局结束后，窗体如下图： [![Qt <wbr>Designer使用简易教程][Qt_wbr_Designer 4]][Qt_wbr_Designer_Qt_wbr_Designer 4] **保存窗体。** 快捷键Ctrl+S保存窗体为CalculatorForm.ui（可以使用Ctrl+R快捷键对界面进行预览）。然后就可以关闭Qt Designer了。 **从.ui到.h。** 在终端中工作目录下，使用uic命令 uic -o ui\_CalculatorForm.h CalculatorForm.ui 将在Qt Designer中绘制好的窗体转化成Ui\_CalculatorForm类的头文件（其中包含了窗体控件属性信息及布局信息等） **注**：此一步可以省略，待qmake的时候将自动调用uic生成相应的头文件（默认生成的头文件为ui\_\*\*\*\*\*\*\*\*.h的格式），但由于考虑到下一步的代码中需要include这个头文件，所以这里手工调用uic完成转化。 **定义窗体类。** 在工作目录下编写两个文件（随便你使用vim、emacs、gedit……），定义窗体类以及相应的槽函数（类似于消息响应函数）。内容如下： 头文件 **CalculatorForm.h**如下： // CalculatorForm.h \#ifndef CALCULATORFORM\_H \#define CALCULATORFORM\_H //! \[0\] \#include "ui\_CalculatorForm.h" //! \[0\] //! \[1\] class CalculatorForm : public QWidget \{ Q\_OBJECT public: CalculatorForm(QWidget \*parent = 0); private slots: //根据SpinBox的变化更新显示结果的槽函数 void on\_inputSpinBox1\_valueChanged(int value); void on\_inputSpinBox2\_valueChanged(int value); private: Ui::CalculatorForm ui; \}; //! \[1\] \#endif 相应的 **CalculatorForm.cpp**如下： // CalculatorForm.cpp \#include <QtGui> \#include "CalculatorForm.h" //! \[0\] CalculatorForm::CalculatorForm(QWidget \*parent) : QWidget(parent) \{ ui.setupUi(this); \} //! \[0\] //! \[1\] void CalculatorForm::on\_inputSpinBox1\_valueChanged(int value) \{ ui.resultLabel->setText(QString::number(value + ui.inputSpinBox2->value())); \} //! \[1\] //! \[2\] void CalculatorForm::on\_inputSpinBox2\_valueChanged(int value) \{ ui.resultLabel->setText(QString::number(value + ui.inputSpinBox1->value())); \} //! \[2\] **编写主函数。** 在工作目录下创建main.cpp文件，在其中实现如下代码： //main.cpp \#include <QApplication> \#include "CalculatorForm.h" int main(int argc, char \*argv\[\]) \{ QApplication app(argc, argv); CalculatorForm calculator; calculator.show(); return app.exec(); \} **编译运行。** 使用终端，在工作目录下，用qmake命令生成\*.pro和Makefile文件。输入： qmake -project qmake make 如果程序没有错，可执行程序就编译出来了，名为CalculatorForm。在终端中输入如下命令，启动可执行程序，查看运行效果： ./CalculatorForm 注：本例子程序的类采用单继承法实现，也可以采用Qt Designer手册中介绍的直接法或者多继承法实现。 trackback:http://blog.sina.com.cn/s/blog\_4b0f065f0100e4zv.html http://hi.baidu.com/baijiang0222/blog/item/23ef7d640d0be054eaf8f87c.html 转载于:https://www.cnblogs.com/JohnShao/archive/2011/09/26/2191627.html [Qt_wbr_Designer]: http://s13.sinaimg.cn/bmiddle/4b0f065ft6c2b59b2e42c&690 [Qt_wbr_Designer_Qt_wbr_Designer]: /images/20211209/929101a5d96c4599b68c05916bda7a31.png [Qt_wbr_Designer 1]: http://s10.sinaimg.cn/bmiddle/4b0f065ft6c2b5c93b1f9&690 [Qt_wbr_Designer_Qt_wbr_Designer 1]: /images/20211209/56c2b72c722348d8a2f643fa2fd7c982.png [Qt_wbr_Designer 2]: http://s6.sinaimg.cn/bmiddle/4b0f065ft6c2b5e3ff8b5&690 [Qt_wbr_Designer_Qt_wbr_Designer 2]: /images/20211209/ec66a422c24041cfa380b27d1b93bc11.png [Qt_wbr_Designer 3]: http://s13.sinaimg.cn/bmiddle/4b0f065ft6c2b5f95b4fc&690 [Qt_wbr_Designer_Qt_wbr_Designer 3]: /images/20211209/e3d030f552914b0da8a4dd683078475e.png [Qt_wbr_Designer 4]: http://s9.sinaimg.cn/bmiddle/4b0f065ft6c2b60c4c2d8&690 [Qt_wbr_Designer_Qt_wbr_Designer 4]: /images/20211209/df2399f6fa4444aaab6f1b21ead559e7.png
还没有评论，来说两句吧...