基于Qt的收银点餐系统之UI的基本实现（一）

待解决问题：将拿到的设计图用Qt实现，完成系统的UI制作
即：

                                   图一 设计图

到

                                 图二 UI

一、开发历程

可以说是从零开始，因为之前有关Qt的记忆已经消失得差不多了。
拿到设计图的时候，很迷，不知道如何在Qt中实现这样的布局，要实现“布局”这个工作逻辑是怎样的，会牵扯到哪些东西，要怎么用这些东西。
印象里面是可以用Qt Designer制作UI的，但已经忘了Qt Designer设计背后的逻辑关系，就没往这方面想。
后来，找到了Qt内置的一个demo，知道了牵扯到哪些东西（如layout，各种widgets等）以及怎么用的大方向，于是仿着那个demo，在网上学习控件细节，将界面完全用代码实现了出来。
由于缺少开发经验，没有合理的设计类，导致用于实现UI界面的代码和其他代码混在了一个类里面（非常糟糕的设计）。于是就在想有没有办法可以实现布局代码和逻辑代码的分离，这就又回到了Qt Designer。

二、Qt中制作UI的两种方式

这整个系统的开发中，我一共接触到了两种方式来制作UI：

• 完全用代码手工实现UI
• 使用Qt Designer实现UI

两者各有优缺点，有所联系，相互辅助。
1.完全用代码手工实现UI
优点：
1）能够对布局的机理有更深刻的理解；
2）较为灵活，如当一个功能需要根据某些不确定信息动态地添加按钮时，可用代码实现。

缺点：
1） 开发效率低；
2）设计出来的类规范程度低：相较于能够将布局里面的各要素组织得井井有条的Qt Designer，手动写的可能就注意不到那么多细节；
3）设计出来的类不合理：正如前面所说，实现布局的代码和逻辑代码混在了一起，同时给开发造成了一定的难度（e.g：变量太多，找不到）

2.使用Qt Designer实现UI
优点：
1）简单方便，可视化
2）开发效率较高
3）由于可以自动生成ui_xxx.h文件，不用自己关注布局代码和逻辑代码的分离
缺点：
不够灵活，不能满足存在动态需求的情况

3.两者的关系
1）在某些情况下，两种方法是平行的，即无论单独使用其中哪一个，均可以达到目的：
自己手动写的那个布局类，实际上与Qt Designer生成的、对开发者不可见的ui_xxx.cpp具有一样的功能。在使用上，手动写的布局类和其他类一样使用，即使用include引入头文件； 后者，除了头文件之外，还需要引入命名空间UI。
2）在某些情况下，两者相互配合：
即前文提到的，当需要实现“动态”任务时，可以先用Qt Designer设计出框架，然后用代码实现动态任务。

详细介绍见：http://blog.csdn.net/tennysonsky/article/details/48030333

三、“布局”中涉及的基本元素

要完成布局这个工作，我们需要首先了解些什么呢？
当我们新建Qt设计师类的时候，Qt给我们提供了三种类型的模板：

• Dialog（对话框）
• Main Window（主窗口）
• Widget（控件）

第一个多用于交互，后两个在布局中会用到。而如何将控件合理地布局在窗口中，就需要Layout（布局管理器）的帮忙了。
1.窗口
在本篇文章使用到的例子中，窗口就是指图二所展示的那个整体，包括窗口名（“收银点餐系统”）、窗口自带按钮（_口X）等。
2.控件
比如说标签（QLabel）、行编辑器（QTextEdit）、按钮（QPushButton）、列表框（QListWidget）等；
3.布局管理器
Qt中提供很多布局管理器，包括QHBoxLayout, QVBoxLayout, QGridLayout, QStackedLayout等。在目标区域应用这些布局管理器，便可以将目标区域布局成相应的样子。目标区域，可以是主窗口，可以是控件，也可以是布局。示意图如下：

可以看出，布局管理器里边可以有布局管理器，控件里面也可以有布局管理器，在某种意义上，布局管理器就是一种控件。
到这里，我们可以把整个布局工作理解成为：用控件和布局管理器将这个大区域划分成若干个小区域，对小区域里用控件和布局管理器做同样的划分，直到布局完成。
其特点为：区域划分，层层嵌套。
在下一篇文章中，将用代码展示这两个特点。