搜索
bottom↓
回复: 170

几行代码轻松做上位机界面 Qt Designer快速入门小教程

  [复制链接]

出0入0汤圆

发表于 2012-3-28 18:42:13 | 显示全部楼层 |阅读模式
本帖最后由 exilefox 于 2012-3-28 21:38 编辑

       做嵌入式的各位想必或多或少都听说过Qt,各种优点不细数了,简单的说这就是个做界面的IDE。
       我发现很多Qt的教程都是用代码来编写界面程序,有没有图形化的方法呢!答案就是Qt Designer
       打个比方,用代码写界面就像是你用记事本一行行的敲HTML代码,用Qt Designer写界面就很类似用FrontPage或者DreamWeaver,拖些控件,调整一下位置、属性,补些css效果,一个轻松的页面就出来了
       此文意在引导初学者使用Qt Designer快速的入门编写界面,不关心底层的c++实现,总共只用敲几行代码


新建工程开始,如图选择,然后一路next。我就不多说了

工程建立好后来看看工程的结构,Qt Creator帮我们自动建立好了头文件和cpp文件,关键的是ui文件


点击ui文件就可以切换到设计窗口,我们的ui设计主要就是在这里完成的,让我们看看结构



在左边的是控件栏,里面的控件(如我们将用到的按钮、框架等)可以直接拖拽到中间的窗口编辑区。各位有兴趣可以自己把他们一一拖出来,然后按shift+alt+R预览,看看是做什么功能的,我就不一一详述了(其实有些我也没用过,呵呵)。因为我们再之前建立工程时候默认的是Mainwindow类型,所以这个窗口一开始就自带了顶部菜单,顶部图标栏,底部状态栏等,各位想要干净点的可以在创建时试试其他类型。右上的显示的是从属结构,右下显示的是某个部件的属性。底部的是信号与槽编辑窗口,信号与槽的编辑方式有4种:拖拽、在编辑窗口添加,右键“转到槽”,在C++代码中用connect函数,在此只演示右键“转到槽”

熟悉了场地再描述一下我们要做的这个界面
左侧3个按钮,点击就分别跳到右侧对应三个页面,每个页面有一幅图、一段文字,ok
完成效果如图

1做界面第一件事是布局,而布局使用的是Frame(框架)。Frame有点像word里面的文本框,里面放什么都可以。
从左侧控件栏直接拖个文本框出来,同时你可以看到右上从属结构窗口下面就多了一项Frame,以后每个添加进来的控件都是这样,可以在这里看到它属于谁,叫什么名字(还可以在这里修改名字)。


2我们需要三个按钮,于是从控件栏里面拖出三个pushbutton到之前的frame里, 双击修改上面的文字成“第X页”在右上的从属结构窗口下你可以看到这3个button是属于这个frame的,修改他们的名字成page1之类的比较好理解的名字(一般frame这种不重要的东西我就懒得改名字了,但是像button这样的还是改个好记的比较方便后面建立信号和槽)。

3来建立右边的切换的页,这里用到stackedwidge这个控件,把它拖出去~
看到这玩意右上角的两个箭头了吗?这个是在编辑的状态下方便切换页的(右上从属结构窗口显示目前这东西只有两页)。我们要三页,所以在这个控件上右键,添加页。在每一页中拖入一个frame用来放我们的图片。

4添加资源。资源可以是函数库,自制的控件,图片,音乐等等。Qt的资源专门会做成一个qrc文件,我们先建立一个资源文件

添加我们要的资源。之后一定要记得保存,不然在设计界面会显示没有资源(以前这个小细节困扰了我蛮久)。



5再回到设计界面。我们将给每页的frame插入图片,在这里我们用到另一个重要的东西“样式表”。
样式表是修饰部件的属性,比如字体,颜色,背景图片,鼠标经过,透明度等等。至于每类控件有什么属性可以通过样式表个性化设置可以查一下这里http://doc.qt.nokia.com/4.3/styl ... #list-of-properties   据说样式表的语法和网页的CSS很类似,我不会CSS,会网页设计的朋友说不定能搞出很华丽的效果吧。
言归正传,我们在frame上右键,改变样式表。

在窗口中写入如下代码(本教程里第一次出现需要各位写代码的地方)

QFrame#frame_2是对象定义,就是我们下面的style要修饰的是谁
QFrame是Qt定义的类,是所有frame他爹
#表示具体到下面的子类
frame_2 这个就是我们选中的那个frame了
基本上你可以从右下抄过来就是了。如果没有#frame_2只有QFrame,就表示通杀所有的frame
{}里是修饰的内容:添加边界图片(既图片的大小自动适应frame大小)

代码你可以动手敲,也可以如图点击插入border-image。搞好了点应用就能看到效果。
6插入文字。在Qt designer里面真正的文本框要用一个叫做Label的控件插入,如图 输入点什么

这样一页的设置就完成了,亲你现在可以动手炮制剩下两页了。
7现在让我们让按钮与右边的页互动起来,这里终于用到了著名的信号和槽机制。信号和槽,我个人的理解信号就像中断,槽就是中断服务程序。点击按钮发出一个click的信号,相应的槽就执行切换到相应页的工作。信号和槽你可以完全用代码写,但是我比较喜欢的方法是在要发出信号的控件上右键,转到槽。
在第一页按钮上右键-转到槽

这时跳出的窗口问你发出什么信号,在此我们选click,即点下按钮就发出信号,确定
IDE跳转到了MainWindow.cpp,这个是我们建的窗口类的函数实现文件。Qt已经帮我们写好了声明和函数名,仔细看看这个函数名就知道为什么我当初要给按键起个好记的名字了吧。来吧,开始动手把{}填上(第二次也是最后一次敲代码)
现在说明一下这个函数
ui是MainWindow类里面的成员,而我们之前拖进去的按钮啊frame啊又都是ui的成员,我们选择ui->stackedWidget(Qt creator会自动补全的),就是右边那个翻页
setCurrentIndex(0)是stackedWidget的成员函数,作用是显示某一页。我们显示第一页,注意第一页的Index值是0 。这样,当我们点击“第一页”按钮时右边就翻到第二页了。
如法炮制剩下两个按钮,你的第一个ui程序就完成了,编译一下看看效果吧~



总结一下,这里有几个重要概念希望各位能自己再找找资料搞清楚:槽与信号,ui文件,stylesheet。
感谢网上的所有教程,大家如果有敲代码的嗜好偏要想知道本教程的效果要如何纯粹用代码实现的话,可以在youku搜一下“Qt小神童”老师的视频
正如前文所说,这个小教程只是勾引一下大家的学习欲望,后面还需要大家自己多摸索了~祝大家好运
===========================================================================
修改
图老是挂,对这个上传图片已经没辙了,于是草草把教程做成了word ,上传,版权开放大家随便下载。




补充内容 (2012-3-29 20:07):
附件终于上传成功了,在41楼(第二页)

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

阿莫论坛20周年了!感谢大家的支持与爱护!!

一只鸟敢站在脆弱的枝条上歇脚,它依仗的不是枝条不会断,而是自己有翅膀,会飞。

出0入0汤圆

发表于 2012-3-28 18:44:08 | 显示全部楼层
我举报了
~酷贴。

出0入0汤圆

发表于 2012-3-28 18:44:09 | 显示全部楼层
mark一下

出0入0汤圆

发表于 2012-3-28 18:45:11 | 显示全部楼层
图片不见呢?

出0入0汤圆

发表于 2012-3-28 18:56:16 | 显示全部楼层
毕设要用QT。
上学期学过一下,的确如LZ所说,教材都喜欢用个空白文件直接敲代码写界面。QT Designer用起来的确也很方便,但是我发现个问题,在Designer里定义的信号和槽我没找到对应的代码。

出0入0汤圆

 楼主| 发表于 2012-3-28 18:59:44 | 显示全部楼层
为毛图片不出来~~~!!!吃晚饭再试试

出0入0汤圆

发表于 2012-3-28 19:07:42 | 显示全部楼层
没图。。。。。

出0入0汤圆

 楼主| 发表于 2012-3-28 19:25:20 | 显示全部楼层
本帖最后由 exilefox 于 2012-3-28 19:27 编辑


图片总是出不了,试一下
为什么怎么改都只能显示全部图片中某一张图片????

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入147汤圆

发表于 2012-3-28 19:35:43 | 显示全部楼层
同上,图片显示不全?
另外Qt Designer 和Qt Creator IDE 有啥区别?

出0入0汤圆

发表于 2012-3-28 19:41:55 | 显示全部楼层
我也举报了

出0入0汤圆

 楼主| 发表于 2012-3-28 19:46:31 | 显示全部楼层
dreampet 发表于 2012-3-28 19:35
同上,图片显示不全?
另外Qt Designer 和Qt Creator IDE 有啥区别?

Qt SDK包括
            Qt库(平常我们所说的Qt实际上指的就是这个库)
            Qt Creator 这个是一个IDE
                       Qt Designer算是Qt creator 下的一个ui编辑工具,他处理的是ui文件

要写界面,你可以在qt creator里面编辑cpp也可以在Qt Designer里面编辑ui文件,我这里讲的就是后者

再试试发图片~


www

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2012-3-28 19:48:40 | 显示全部楼层
行不行,没显示的都是.png的格式。。。。。。。

出0入0汤圆

发表于 2012-3-28 19:50:53 | 显示全部楼层
好贴!不过怎么图片显示不全。。。

出0入0汤圆

发表于 2012-3-28 19:51:37 | 显示全部楼层
图挂了?

出0入0汤圆

 楼主| 发表于 2012-3-28 19:58:38 | 显示全部楼层
Chuda 发表于 2012-3-28 18:56
毕设要用QT。
上学期学过一下,的确如LZ所说,教材都喜欢用个空白文件直接敲代码写界面。QT Designer用起来 ...

如果你用的转到槽功能 槽就在cpp文件里
如果你用下面的信号和槽编辑器,好像在ui_开头的一个.h文件里,这个文件是隐藏的

出0入0汤圆

 楼主| 发表于 2012-3-28 19:59:45 | 显示全部楼层
yirenonege 发表于 2012-3-28 19:48
行不行,没显示的都是.png的格式。。。。。。。

.jpg的我也试过了

出0入0汤圆

发表于 2012-3-28 20:05:11 | 显示全部楼层
好东西  学习一下

出0入0汤圆

发表于 2012-3-28 20:06:37 | 显示全部楼层
标记,要好好学学

出0入0汤圆

发表于 2012-3-28 20:08:38 | 显示全部楼层
现在也在用QT4.8.好像用QT的不多。国内的QTCN论坛我看都死得不成样子了。
CSDN上的QT论坛还好点。。

出0入0汤圆

发表于 2012-3-28 20:15:49 | 显示全部楼层
图片不见呢?

出0入0汤圆

发表于 2012-3-28 20:20:13 | 显示全部楼层
偶尔显示一张图片,图面里面还有“亮点”可看,呵呵

出0入0汤圆

发表于 2012-3-28 20:39:04 | 显示全部楼层
绝对的好东西啊

出0入0汤圆

发表于 2012-3-28 20:47:13 | 显示全部楼层
exilefox 发表于 2012-3-28 19:58
如果你用的转到槽功能 槽就在cpp文件里
如果你用下面的信号和槽编辑器,好像在ui_开头的一个.h文件里,这 ...

原来是在隐藏文件里。
稍后我去找找。

出0入4汤圆

发表于 2012-3-28 20:55:53 | 显示全部楼层
图片不见了呢

出0入0汤圆

发表于 2012-3-28 20:56:51 | 显示全部楼层
最近QT很火啊!

出0入0汤圆

发表于 2012-3-28 20:58:24 | 显示全部楼层
好贴,就是图片不见了,遗憾。

出0入0汤圆

发表于 2012-3-28 20:59:11 | 显示全部楼层
现在qt比较火,图片看不见
头像被屏蔽

出0入0汤圆

发表于 2012-3-28 21:03:03 | 显示全部楼层



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

 楼主| 发表于 2012-3-28 21:17:53 | 显示全部楼层
armok 发表于 2012-3-28 21:03

上传了附件,大家将就点吧,我试了一下(其实是试了很多下。。。终于有一次下载成功了),下下来却是损坏的。
希望大家多交流。
另外
莫老大你发的两张图在我这里也有一张是x啊

出0入0汤圆

发表于 2012-3-28 21:28:29 | 显示全部楼层
没图片啊先mark下

出0入0汤圆

发表于 2012-3-28 21:41:57 | 显示全部楼层
不错啊,学习了

出0入0汤圆

发表于 2012-3-28 21:48:10 | 显示全部楼层
不错看不到图啊

出0入0汤圆

发表于 2012-3-28 22:38:05 | 显示全部楼层
楼主你网速那么不堪难道是我非洲同乡?

出0入0汤圆

发表于 2012-3-28 22:44:48 | 显示全部楼层
不错,学习。

出0入0汤圆

发表于 2012-3-29 00:47:25 | 显示全部楼层
举报~酷贴。

出0入0汤圆

发表于 2012-3-29 02:14:38 | 显示全部楼层
mark,一直没时间学习QT,先做个标记吧,谢楼主

出0入0汤圆

发表于 2012-3-29 02:58:26 | 显示全部楼层
mark,标记一下

出0入0汤圆

发表于 2012-3-29 08:13:00 | 显示全部楼层
收藏,学习一下

出0入0汤圆

发表于 2012-3-29 09:51:41 | 显示全部楼层
怎么回事,图挂了!

出0入0汤圆

发表于 2012-3-29 10:17:51 | 显示全部楼层
囧...附件下载不了啊...楼主不如找个网盘传上去吧...应该不违规吧

出0入0汤圆

发表于 2012-3-29 13:18:09 | 显示全部楼层
图挂了,附件也下载不了

出0入85汤圆

发表于 2012-3-29 13:23:57 | 显示全部楼层
看看了以后哦

出0入0汤圆

 楼主| 发表于 2012-3-29 20:03:23 | 显示全部楼层
老大给条裤子穿实在是惶恐啊~在此尝试上传附件,希望能成功

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2012-3-29 20:14:53 | 显示全部楼层
Qt好像只能支持C++(C)语言,不能给VB或者C#语言用是吧?

出0入0汤圆

发表于 2012-3-29 20:22:48 | 显示全部楼层
学习了,谢谢分享~

出0入0汤圆

 楼主| 发表于 2012-3-29 21:49:13 | 显示全部楼层
advstar 发表于 2012-3-29 20:14
Qt好像只能支持C++(C)语言,不能给VB或者C#语言用是吧?

支持c++和C 另外,他的界面编辑还支持QSS样式和QML文本语言(类似CSS和XML),这两样最终也是由Qmake等转换成c++的。

出0入0汤圆

发表于 2012-3-30 04:09:56 | 显示全部楼层
mark****************************************

出0入0汤圆

发表于 2012-3-30 08:01:11 | 显示全部楼层
学习了,酷帖~~~

出0入0汤圆

发表于 2012-3-31 08:36:22 | 显示全部楼层
MARK...谢谢。

出0入0汤圆

发表于 2012-3-31 13:40:28 | 显示全部楼层
图都挂了?看不到。

出0入0汤圆

 楼主| 发表于 2012-3-31 21:04:23 | 显示全部楼层
cunlingwang 发表于 2012-3-31 13:40
图都挂了?看不到。

43楼有教程的word版附件

出0入0汤圆

发表于 2012-3-31 21:16:33 | 显示全部楼层
感谢分享。

出0入0汤圆

发表于 2012-3-31 21:20:24 | 显示全部楼层
附件图片都刷不出来,是怎么回事啊

出0入0汤圆

发表于 2012-4-2 16:47:08 | 显示全部楼层
曾经比较看好QT的跨平台,特别是被诺基亚收购后,可惜后来诺基亚放弃了Meego,也等于放弃了QT。
唉,为什么不是被Google收购呢?

出0入0汤圆

发表于 2012-4-4 11:19:13 | 显示全部楼层
先收藏,等老大解决附件问题再下载。

出0入0汤圆

发表于 2012-4-5 22:16:31 | 显示全部楼层
向楼主学习

出0入0汤圆

发表于 2012-4-6 17:08:19 | 显示全部楼层
又见你- -
一样QT爱好者!!!

出0入0汤圆

发表于 2012-4-6 17:25:14 | 显示全部楼层
Mark,xiexie

出0入0汤圆

发表于 2012-4-6 17:35:46 | 显示全部楼层
图片看不到

出0入0汤圆

发表于 2012-4-6 17:47:34 | 显示全部楼层
好多图片都挂了,先收藏,回家慢慢看。

出0入0汤圆

发表于 2012-4-8 02:11:25 | 显示全部楼层
好东西,马克思

出0入0汤圆

发表于 2012-4-8 13:23:46 | 显示全部楼层
收藏,学习一下,谢谢楼主

出0入0汤圆

发表于 2012-4-9 16:07:14 | 显示全部楼层
MARK!!!!!

出0入0汤圆

发表于 2012-4-10 15:57:55 | 显示全部楼层
现在图片打开的很快,都看见了,并且有不少亮点。

出0入0汤圆

发表于 2012-4-10 16:07:08 | 显示全部楼层
这个收藏了!

出0入0汤圆

发表于 2012-4-10 16:19:09 | 显示全部楼层
图片看不到哦

出0入0汤圆

发表于 2012-4-12 18:53:15 | 显示全部楼层
多谢楼主分享

出0入4汤圆

发表于 2012-4-12 20:09:10 | 显示全部楼层
我觉得还是NI的labview好点,框架流程图编程,控件齐全,就是要安装NI驱动

出0入0汤圆

发表于 2012-4-13 15:11:25 | 显示全部楼层
图片真的是亮点啊。。。。。

出90入372汤圆

发表于 2012-6-7 13:45:52 | 显示全部楼层
图片看不到啊

出0入0汤圆

发表于 2012-6-9 13:15:16 | 显示全部楼层
无图无真相。

出0入0汤圆

发表于 2012-6-9 13:30:50 | 显示全部楼层
这个果断要酷...顺便把LZ的word教程转成了PDF,里面有图有真相...



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x

出0入0汤圆

发表于 2012-6-12 01:10:55 | 显示全部楼层
mark一下,学习点新手段编软件

出20入70汤圆

发表于 2012-6-12 07:54:43 | 显示全部楼层
不错的教程!

出0入0汤圆

发表于 2012-6-12 08:13:07 | 显示全部楼层
厉害啊!我还是感觉qt-creator比较好一点的。

出0入0汤圆

发表于 2012-6-13 14:23:44 | 显示全部楼层
要不要版权费。

出0入0汤圆

发表于 2012-9-28 21:40:00 | 显示全部楼层
已经不能下载了?

出0入0汤圆

发表于 2012-9-28 22:14:02 | 显示全部楼层
好贴,我顶

出0入0汤圆

发表于 2012-9-28 22:56:26 | 显示全部楼层
mark  一下以后再慢慢看

出0入0汤圆

发表于 2013-3-7 16:15:40 | 显示全部楼层
好贴,我顶

出0入0汤圆

发表于 2013-3-8 10:10:39 | 显示全部楼层
mark                     

出0入0汤圆

发表于 2013-3-8 11:21:43 | 显示全部楼层
商业运用还是选C++ 吧,兼容性压倒一切!其他的都是旁门左道

出0入0汤圆

发表于 2013-3-8 11:23:48 | 显示全部楼层
很多图都看不见啊 。。。

出0入0汤圆

发表于 2013-3-9 10:58:40 来自手机 | 显示全部楼层
马克一下……

出0入0汤圆

发表于 2013-3-11 16:22:20 | 显示全部楼层
对俺来说是个新东西,mark一下

出0入0汤圆

发表于 2013-3-12 14:23:17 | 显示全部楼层
顶一个,,qt

出0入0汤圆

发表于 2013-5-22 20:41:57 | 显示全部楼层
必须顶!

出0入84汤圆

发表于 2013-5-23 07:02:48 来自手机 | 显示全部楼层
不错,mark嘿嘿

出0入0汤圆

发表于 2013-5-23 07:41:09 | 显示全部楼层
为什么 你的头像是“Ot”?

出0入0汤圆

发表于 2013-5-23 08:52:05 | 显示全部楼层
xue xi le

出0入0汤圆

发表于 2013-5-23 09:21:45 | 显示全部楼层
学习一下吧,QT.

出0入0汤圆

发表于 2013-5-29 22:37:30 | 显示全部楼层
不错,学习学习

出0入0汤圆

发表于 2013-5-29 23:44:35 | 显示全部楼层
先MARK...

出0入0汤圆

发表于 2013-5-30 17:26:52 | 显示全部楼层
mark!!!!!!!!!!!!!!!!!!!!!!!!!!!!

出0入0汤圆

发表于 2013-6-28 09:10:57 | 显示全部楼层
不得不说,图真是亮点...

出0入0汤圆

发表于 2013-7-3 15:13:38 | 显示全部楼层
好帖。           

出0入0汤圆

发表于 2013-7-3 15:33:29 | 显示全部楼层
如果是关于 python的教程就好了
头像被屏蔽

出0入0汤圆

发表于 2013-7-3 16:11:33 | 显示全部楼层
QT很火吗?
我怎么感觉这个东西老是在说而已

出0入0汤圆

发表于 2013-7-7 23:11:11 | 显示全部楼层

出0入0汤圆

发表于 2013-7-7 23:26:36 | 显示全部楼层
qml做界面确实很好,但是地城的C++实现也很重要啊
回帖提示: 反政府言论将被立即封锁ID 在按“提交”前,请自问一下:我这样表达会给举报吗,会给自己惹麻烦吗? 另外:尽量不要使用Mark、顶等没有意义的回复。不得大量使用大字体和彩色字。【本论坛不允许直接上传手机拍摄图片,浪费大家下载带宽和论坛服务器空间,请压缩后(图片小于1兆)才上传。压缩方法可以在微信里面发给自己(不要勾选“原图),然后下载,就能得到压缩后的图片】。另外,手机版只能上传图片,要上传附件需要切换到电脑版(不需要使用电脑,手机上切换到电脑版就行,页面底部)。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|Archiver|amobbs.com 阿莫电子技术论坛 ( 粤ICP备2022115958号, 版权所有:东莞阿莫电子贸易商行 创办于2004年 (公安交互式论坛备案:44190002001997 ) )

GMT+8, 2024-3-29 16:24

© Since 2004 www.amobbs.com, 原www.ourdev.cn, 原www.ouravr.com

快速回复 返回顶部 返回列表