这里写自定义目录标题

QT4.7的UI界面设计功能
- 效果展示
- 文件机制
- UI功能详述
- 信号与槽机制（非常重要）
- 添加新文件
- 顶部菜单栏设定
- - 菜单界面与点击下拉栏选项后界面切换
- 弹窗显示
- - 主界面与弹窗界面之间的互换
- 关于界面/窗口背景
- - 直接设定背景
  - 通过TextBrowser间接设定背景
- 极可能出现的两种无厘头错误
- 小结

QT4.7的UI界面设计功能

大一下的暑假就被学校安排去大连东软实习，专业课也只学了C、C++和数据结构，去了之后被要求用一个之前没用过的开发软件QT做一个银行排队系统，授课时间一天，开发时间三天，最后一天用来答辩。明确任务之后就进行了分工，其中我负责UI界面设计，经过三天高强度的检索、实践、尝试、改错、完善、优化，制作的界面总算是可以看了。

在此强调一点，如果你想要学习 QT4.7下的图形用户界面的设计，本文非常合适，因为我用了连续的三天三夜从一无所知到基本完成目标（明人不说暗话：主要是任务摆在那里，要在全体同学面前展示的，不肝不行~），期间经历的整个过程都会在本文中展现出来。

效果展示

文件机制

这一部分介绍QT UI下的文件机制，即如何创建合适的文件，话不多说，直接上图片过程。
打开QT——> 左上角File——>下拉栏里第一个new file or project——>如下图——>起个名字，选定路径——>一路next，最后finish——>新建成功//准备工作完成

解释一下各文件：.pro文件是总的工程文件，当用到一些技术时在里面写入所用到的技术，如：QT += sql（数据库） QT += network（网络），其实我个人感觉和扩入头文件很相似，只有将头文件给扩入了才能用好相应的功能。.ui 文件就是我们用来拖动图形元素进行界面绘制的文件了，后面文章中会详细讲述。.h文件和C++里面的头文件机制一模一样，因为QT在这里也是面向对象的。sources文件夹里就是各种.cpp文件了，其中有个main.cpp文件，在界面设计的部分main函数几乎不做改变，因为其他的界面是从主界面往外延伸的。

UI功能详述

.ui文件就是我们进行图形用户界面显示时主要设计文件，打开.ui文件后可以看到上面的窗口。左侧是各式各样的控件，中间是一张画布，右侧是所拖入控件的属性。这种拖拽式的编程方法是非常方便的，除了QT之外，VS，MATLAB等也有相似的图形界面设计方法。虽然往画布上拖拽控件是一项很容易get到的技能，但是要设计出一些规整的界面还是要了解到一些技巧的。

下面先介绍一下控件们
用的最多的，也是最基本的几项控件如下：
Push Button：按钮：常见的像确认/返回按钮等，点击一下后会产生相应的反应，比如：弹出对话框、关闭当前界面等。
LineEdit：行编辑：简单的说这一个控件可以实现在用户输入界面输入信息，将其转交到程序手中，比如：用户输入账号和密码时就在这里面输。
Lable:标签：写在里面的往往是一些静态的文字提示，就比如：“账号”、“密码”这两个输入项提示。当所要提示的信息比较多时，再用一个小标签就显得有些不合适了，这时就用：TextBrowser（文本浏览器）—— 一个大的文本编辑框。
Layout：层次设定：说白了就是自动对齐，格式化布局设置。首先是vertical layout 是横向层次分布，可以实现若干数量的控件横向系统自排列，同理horizontal layout 是纵向层次自排列。但是用它们来实现格式化布局有些许麻烦（就是需要再把控件拖到层次框的作用范围里面），其实还有一种简单的做法，在画布的正上方有一行图标，其中就有层次格式化布局的四个图标，在圈定层次布局时就还可以先选定所排器件，直接单击画布正上方的相应图标即可。

Spacer：空间间隔组：这个像弹簧一样的控件是用来调节空间间隔的，通过自定义层次设定中各器件的占比（下方蓝笔标出来的即是，中间用逗号隔开），以达到上下编辑框几近等长排列的效果。（调整后效果如下所示）
一个小技巧，若是很难选定到层次布局的底板上时，可以通过点击右侧控件（即下面红笔标出来的）实现。

所有控件介绍如下：
按钮组（Buttons）
Push Button：按钮。
Tool Button：工具按钮。
Radio Button：单选按钮。
Check Box：复选框。
Command Link Button：命令链接按钮。
Button Box：按钮盒

输入部件组（Input Widgets）
Combo Box：组合框。
FontCombo Box：字体组合框。
LineEdit：行编辑。
TextEdit：文本编辑。
Plain Text Edit：纯文本编辑。
SpinBox：数字显示框（自旋盒）。
Double Spin Box：双自旋盒。
TimeEdit：时间编辑。
DateEdit：日期编辑。
Date/Time Edit：日期/时间编辑。
Dial：拨号。
Horizontal Scroll Bar：横向滚动条。
Vertical Scroll Bar：垂直滚动条。
Horizontal Slider：横向滑块。
Vertical Slider：垂直滑块。
Keysequence Edit：按键序列编辑。

显示控件组（Display Widgets）
Label：标签。
TextBrowser：文本浏览器。
Graphics View：图形视图。
Calendar：日历。
LCDNumber：液晶数字。
Progress Bar：进度条。
Horizontal Line：水平线。
Vertical Line：垂直线。
OpenGL Widget：开放式图形库工具。
QQuickWidget：嵌入QML工具。
QWebView：Web视图。

空间间隔组（Spacers）
Horizontal Spacer：水平间隔。
Vertical Spacer：垂直间隔。

容器组（Containers）
Group Box：组框。
Scroll Area：滚动区域。
ToolBox：工具箱。
TabWidget：标签小部件。
Stacked Widget：堆叠部件。
Frame：帧。
Widget：小部件。
MdiArea：MDI区域。
DockWidget：停靠窗体部件。
QAxWidget：封装Flash的ActiveX控件。

项目视图组（Item Views）
List View：清单视图。
Tree View：树视图。
Table View：表视图。
Column View：列视图。

项目控件组（Item Widgets）
List Widget：清单控件。
Tree Widget：树形控件。
Table Widget：表控件。

信号与槽机制（非常重要）

随着学习的不断深入，发觉信息检索的能力越发重要，知识无穷无尽，而且是不断更新的，即便你能把学过的知识悉数熟练掌握，技术也是会不断更迭的。之前看到过一篇文章，说一个业界大佬即便是40多岁了，也能3天掌握一门新语言，然后用它进行开发，说了这么多，目的只有一个，就是介绍下面推荐的视频链接非常重要，对于QT的学习，非常有帮助。

在这里推荐一个B站上的视频，完全适合新手，这个视频讲的很好，强力推荐！！~ 以视频的形式进行讲述的话也更容易被接受。好的资源应该分享，诺，这是网址： QT5入门精讲. 一定要好好看一下！

信号与槽机制可以说是QT最具特色最靓的一个设计方式了，正是这种信号与槽的机制，实现了固有套路的设定与特定的现实要求完美的无缝切合。核心代码就一段：connect（信号的发出者，发出的信号，信号的接收者，做出的反应）
connect(ui->exitpushButton,SIGNAL(clicked()),this,SLOT(close()));

每个控件都有相对应的信号接收方式，最简单的就像按钮的“点击”。但是光控件就有上面罗列出来的那么一大堆，每一个又对应着好多信号，那么就会有好多的组合。这就要用到help了，通过help就可以查出各控件的对应信号了。

添加新文件

在介绍顶部菜单栏的设定以及弹窗效果之前，先说一下如何在一个文件中添加新的文件，其实做法有很多，我感觉最好用的就是下面图片所展示的。

1.右键单击当前任务文件，在下拉栏里找到**Add new…**这项，然后单击。
2.添加窗口时都是点击QT Designer Form Class这项，然后OK。

3.我们在这里用到的仅是templates下面的五项，前三个Dialog（窗口）都是制作弹窗界面时用的，选定后的效果分别是UI界面自动带上底部的两个按钮、自动带上右侧的两个按钮、不带按钮；第四个main Window就是有菜单栏效果的窗口。

4/5两步见下。

顶部菜单栏设定

4.点击main Window，可以自己起文件名，然后一路next，最后Finish。

这是添加后的样子，注意右上角的type there，这就是我们制作菜单栏管理的起点。

在进行后续步骤之前，应该至少把推荐视频的信号与槽机制那三节视频课看完之后才能继续往下进行。

当在第一个菜单格里输入完第一项后便可以继续往后扩展了。
通过点击下拉栏里的加号可以继续扩展。（很是简单吧~）

菜单界面与点击下拉栏选项后界面切换

这一个与下面的主界面与弹窗界面之间的互换非常相似，都很重要，所推荐的视频上介绍的很详细了已经，一定要把那个视频看好才能更好更快的理解了。

弹窗显示

5.点击Dialog with button bottom/Dialog with button right/Dialog without button中的一个（大多数情况选without button就行，因为按钮我们可以自己按需要添加）同样起文件名，然后一路next，最后Finish。

添加后就这样，很是普通~
然后同样的可以往里面拖控件啥的，没有问题。

主界面与弹窗界面之间的互换

关于界面/窗口背景

首先的一个准备操作得是将选定的背景图片添加到当前工作文件夹里，添加方法如下：
第一步同添加新文件一样。

第二步选择QT resource file，然后起名，一路next。

第三步往这个文件里加图片（比较关键，反正当时我是找了好长时间资料，又尝试了很多次才加好）

1，点击add prefixs（此时add files也点不动）
2，此时add files就可以点击了

3，选定图片，打开
4，点击copy，然后save，添加背景照片完成。

直接设定背景

1.右击画布，选择change stylesheet

2.点击add resource后面的小三角，下拉栏里的background-image

3.点击那个刷新的按钮，然后OK，但是此时发现并没有添进图片，问题不大，点击一下运行按钮即可。

通过TextBrowser间接设定背景

思路就是整一个TextBrowser控件，然后把它拉到和窗口一样大，把相应的操作转移到对此控件的change stylesheet上就行，同样是右击找到，然后设置，不再赘述。

极可能出现的两种无厘头错误

一、.h文件中声明了某个函数头，但是.cpp文件中没有给出具体定义

ld returned 1 exit status 这个标志性的错误提醒就去.h文件中找一下是否有些声明没有在.cpp文件里面实现。

二、.pro文件中少删了东西

比如说你想要删掉一些文件，比如说就像要把弹窗文件删掉。

直接右击然后remove file是不行的，应该同时点击.pro文件，然后在此文件里删掉所对应的一行代码即可。
比如应该还进行这样的操作：

其实我犯这个错误是在删除resource资源文件时发生的，发现有一些图片用不到，就想要删除掉这些没有用的资源文件，但是却发现编译不过去了，原因就是没有在.pro里删掉那行所对应的代码。（其实原因想想也是这回事，在文件夹里面删掉了那个文件，然后.pro文件在加载的时候发现检索不到了，肯定就会编译不过去了。）

小结

本次实习最重要的收获就是化繁为简，各司其职，分而治之；再就是充分利用好互联网来检索信息，而且是能高效利用的信息；最后就是肝吧，来了任务，肝就完事了。

QT4.7下的UI图形界面设计用例——银行排队系统相关推荐

软件UI图形界面设计常用软件
学习UI图形界面设计,常用的几个软件分别是Photoshop.Illustrator.fireworks. Photoshop,Illustrator ,coreldraw,freehand,Fla ...
[网络安全课设]基于JAVA的系统端口扫描软件设计实现(java代码+IDEA+UI图形界面+实验报告)
链接::l基于JAVA的系统端口扫描软件设计实现(java代码+IDEA+UI图形界面+实验报告) 系统端口扫描软件设计实现设计目的和任务参照superscan.nmap等端口扫描软件的运行情况, ...
JAVA图形界面设计
图形界面设计 1 Java Swing 概述图形化界面(Graphics User Interface,GUI)是指采用图形方式显示的计算机操作用户界面. 通过图形化界面,用户和程序之间可以方便地进 ...
Qt用户图形界面设计应用(闹钟)
Qt用户图形界面设计应用(闹钟) 一.Qt介绍什么是Qt Qt 是一个跨平台的 C++ 图形用户界面库,由挪威 TrollTech 公司于 1995 年底出品,并于 2008年6月17日被NOKIA ...
java图形界面的监听_非专业码农 JAVA学习笔记用户图形界面设计与实现-所有控件的监听事件...
用户图形界面设计与实现-监听事件 System.applet.Applet (一)用户自定义成分 1.绘制图形 Public voit piant(Ghraphics g){ g.drawLine等 ...
java复习之图形界面设计
图形界面设计 AWT和Swing 组件顶层容器 JFrame类常用的构造方法内容窗格面板 JPanel类常用的构造方法 AWT滚动条组件标签按钮 JButton构造方法 JButton类常用 ...
详解使用NetBeans IDE 8.2进行可视化图形界面设计——高仿QQ登录界面
目录前言 QQ登录界面的设计与实现 1.新建一个Java项目 2.在任意包下新建一个JFrame窗体类 3.添加图片 4.设置账号文本框(JTextField)与密码框(JPasswordField ...
Java实验二图形界面设计
学院计算机科学与教育软件学院年级.专业.班网络16* 姓名卟咚君学号 1606100*** 实验课程名称 Java语言实验成绩实验项目名称图形界面设计指导老师 ** 一.实验目的 • ...
Android应用-交互式图形界面设计新趋势
作者:郑萌,华清远见嵌入式学院讲师. 交互设计与图形界面设计发展至今,已经从简单的完成软件界面功能性需求逐步发展为沟通用户,满足用户情感需求的桥梁.注重用户感受,满足用户情感体验,是交互设计的大趋势和 ...

QT4.7下的UI图形界面设计用例——银行排队系统