Qt Designer快速入门

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

By Exilefox 2012年3月28日

做嵌入式的各位想必或多或少都听说过Qt，各种优点不细数了，简单的说这就是个做界面的IDE。

我发现很多Qt的教程都是用代码来编写界面程序，有没有图形化的方法呢！答案就是Qt Designer

打个比方，用代码写界面就像是你用记事本一行行的敲HTML代码，用Qt Designer 写界面就很类似用FrontPage或者DreamWeaver，拖些控件，调整一下位置、属性，补些css 效果，一个轻松的页面就出来了

此文意在引导初学者使用Qt Designer快速的入门编写界面，不关心底层的c++实现，总共只用敲几行代码

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

工程建立好后来看看工程的结构

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

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

熟悉了场地再描述一下我们要做的这个界面

左侧3个按钮，点击就分别跳到右侧对应三个页面，每个页面有一幅图、一段文字。

这只是个简单演示，你可以想象一下用这类型的模板可以做功能很丰富的交互界面了，比如通信录，第一页换成添加联系人，输入各种信息，第二页换成联系人列表，ok，大家自由发挥。

完成效果如图

1做界面第一件事是布局，而布局使用的是Frame（框架）。Frame有点像word里面的文本框，里面放什么都可以（按钮啊，图片啊，选择框等等）。

从左侧控件栏直接拖个frame框出来，同时你可以看到右上从属结构窗口下面就多了一项Frame，以后每个添加进来的控件都是这样，可以在这里看到它属于谁，叫什么名字（还可以在这里修改名字）。

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

3来建立右边的切换的页，这里用到stackedwidge这个控件，把它拖出去~

看到这玩意右上角的两个箭头了吗？这个是在编辑的状态下方便切换页的（右上从属结构窗口显示目前这东西只有两页）。我们要三页，所以在这个控件上右键，添加页。

然后再在每一页中拖入一个frame用来放我们的图片。

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

添加我们要的资源。

先选添加前缀，删掉前缀，留空（前缀就是在你的每个资源前面加个名字而已），这样添加文件就可选了。添加几张图片（有中文我试过没问题，但是如果图片1M以上好像就不行了，其实程序里面放这么大的图片也是罪过啊）

之后一定要记得保存，不然在设计界面会显示没有资源（以前这个小细节困扰了我蛮久）。

5再回到设计界面。我们将给每页的frame插入图片，在这里我们用到另一个重要的东西“样式表”。

样式表是修饰部件的属性，比如字体，颜色，背景图片，鼠标经过，透明度等等。至于每类控件有什么属性可以通过样式表个性化设置可以查一下这里

https://www.360docs.net/doc/e98159643.html,/4.3/stylesheet-reference.html#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就是这么简单。至于程序的具体功能实现，就是各位平时在cpp里面写的那些了。这些功能通过信号和槽的形势与界面产生互动。这里有几个重要概念希望各位能自己再找找资料搞清楚：槽与信号，ui文件，stylesheet。

感谢网上的所有教程，大家如果有敲代码的嗜好偏要想知道本教程的效果要如何纯粹用代码实现的话，可以在youku搜一下“Qt小神童”老师的视频。

正如前文所说，这个小教程只是勾引一下大家的学习欲望，后面还需要大家自己多摸索了~祝大家好运