QtDesigner快速入门.doc

几行代码轻松做上位机界面 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插入图片，在这里我们用到另一个重要的东西“样式表”。 样式表是修饰部件的属性，比如字体，颜色，背景图片，鼠标经过，透明度等等。至于每类控件有什么属性可以通过样式表个性化设置可以查一下这里 /4.3/stylesheet-reference.html#list-of-properties 据说样式表的语法和网页的CSS很类似，我不会CSS，会网页设计的朋友说不定能搞出很华丽的效果吧。 言归正传，我们在frame上右键，改变样式表。 在窗口中写入如下代码（本教程里第一次出现需要各位写代码的地方） QFrame#frame_2是对象定义，就是我们下面的style要修饰的是谁 QFrame是Qt定义的类，是所有frame他爹 #表示具体到下面的子类 frame_2 这个就是我们选中的那个frame了 基本上你可以从右下抄过来就是了。如果