【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2

1)实验平台:正点原子阿尔法Linux开发板
2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434
2)全套实验源码+手册+视频下载地址:http://www.openedv.com/thread-300792-1-1.html
3)对正点原子Linux感兴趣的同学可以加群讨论:935446741

4)关注正点原子公众号,获取最新资料更新

在这里插入图片描述

第四章 使用Qt Designer开发

本章将简介使用Qt Creator里自带的Qt Designer,使用Qt Designer比较方便的构造UI界面。特点是方便布局,比较形象。

4.1 使用UI设计器开发程序
在这小节里我们继续学习如何使用Qt Designer开发程序,Qt Designer是属于Qt Creator的一个功能而已,大家不要搞混了。Qt Designer也叫UI设计师或者 UI设计器,这都是指的同一个东西而已。下面就简单介绍使用UI设计器开发程序,以连接信号与槽为例,简单的介绍这个开发流程。最后我们思考一下这种开发方式的好处以及不便之处。
4.1.1 在UI文件添加一个按钮
新建一个项目为02_designer_example。如果还不会新建工程,请回到3.6小节,步骤一样,这里不再详细说项目的建立过程了。新建的项目如下,为了方便截图,编者已经把3.6小节的项目“01_hello_world”关闭了。剩下的就是我们这个新建的项目02_designer_example。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第1张图片

添加按钮的方法与3.6.3小节添加Label的方法一样,在左边找到Push Button,然后拖拽到中间的显示窗体里,如下图。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第2张图片

并将这个PushButton的text属性(文本属性)改为“关闭程序”。我们在4.1.2小节要设计点击这个按钮将关闭这个窗口,关闭这个程序。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第3张图片

4.1.2 在UI文件里连接信号与槽
在UI设计器里有两种方法可以连接信号与槽。初学者可能不了解什么是Qt的信号与槽。这里先简单的介绍一下信号与槽的功能。所谓信号即是一个对象发出的信号,槽即是当这个对象发出这个信号时,对应连接的槽就发被执行或者触发。以上为非专业术语解释,在下一章节可以学到Qt信号与槽机制。现在我们只要了基本的去了解一下这个信号与槽即可。可以说信号与槽在Qt里是必不可少的。要想事件做出对应的动作就必须用到信号与槽。
UI设计器里信号与槽的连接方法一:
在主窗体的上面部分,我们可以看到一些小小的按钮,如下图框框部分。用鼠标放在这些按钮上面可以查看这个按钮是什么作用。信号槽连接的按钮也在上面。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第4张图片

点击信号槽连接的按钮如下,如下图①处,点击进入信号槽连接模式(若想退出信号槽连接模式,则点击①处左边的按钮),进入信号与槽的连接模式后,将鼠标选中我们的“关闭程序”按钮,按住按钮,然后用鼠标向外拖动,如②处。此时就会出现信号槽连接的符号。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第5张图片

之后按如下图步骤选择,左边的“关闭程序”pushButton按钮的信号,可以看到一个对象的信号可以有多种。右边的QMainWindow的槽函数,如果有其他对象,右边不一定只有MainWidnow的槽函数(槽),也有可能是其他对象的槽。我们选择按钮的clicked()信号,将其连接MainWindow对象的close()槽。这样就完成了信号与槽的连接,非常简单。我们也可以预知这个信号与槽的功能,当“关闭程序”pushButton发出了clicked()信号(也就是单击信号)。这个信号由“关闭程序”pushButton被单击时发出。它就会触发MainWindow的close()。进而使整个程序关闭。MainWindow的close()就是退出关闭程序,退出程序的意思。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第6张图片

完成信号槽连接,如下图。要想返回编辑部件模式点击如下图标注位置的按钮。下图就是信号与槽连接的图示了。在编辑部件模式下我们是看不见的,只有信号槽模式才能看见这样的图示。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第7张图片

UI设计器里信号与槽的连接方法二:
选中“关闭程序”pushButton按钮,然后右键,如下图。选择“转到槽”。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第8张图片

点击“转到槽”后,弹出下面的窗口,这一步是先让我们选择信号。按如下图选择。如果细心的同学,我们还发现这个clicked()信号并不是pushButton的,而是QAbstactButton的。只是pusbButton继承了QAbstracButton,同时把这个信号也继承了下来。除此之外我们还看到其他信号也是不是属于pushButton的,也是被继承下来了。所以我们在C++基础部分学过的继承。在Qt里的作用表现的淋漓尽致!根本不用重写pushButton的clicked()事件。pushButton只需要继承父类的clicked()事件即可!
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第9张图片

点击OK后,就会跳转到槽函数里,这个代码由Qt Creator自动生成。

【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第10张图片

同时在mainwindow.h里声明了这个槽函数。

【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第11张图片
如果我们学过C#,这就好像C#里的跳转到事件一样。其实这种便捷的编程方式很多编程的IDE都非常类似。只要我们对这种IDE有一定的了解,学习起来就不会觉得难。
返回到mainwindow.cpp找到on_pushButton_clicked这个槽函数里。在这个槽数里写上this->close();调用close()方法关闭整个程序。
【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第12张图片

4.1.3 编译及运行创建的UI项目
直接按Ctrl + r或者点击左下角的第一个绿色三角符号,编译且运行这个项目。运行的结果如下。点击“关闭程序”按钮,看看是不是整个程序关闭退出了呢?如果细心的同学还会思考,我们在上面用了两种方法连接信号与槽。那他们是如何连接的呢?他们两者同时连接会有影响吗?在哪里连接的呢?这些都是我们需要探讨的问题?难道第二种方法写上槽函数就会自动被触发?下一节我们继续学习Qt信号与槽了解信号与槽的写法就能解开这个谜了!

【正点原子Linux连载】第四章 使用Qt Designer开发摘自【正点原子】I.MX6U嵌入式Qt开发指南V1.0.2_第13张图片

你可能感兴趣的:(正点原子,linux,运维,服务器)