使用Qt Designer创建界面

标签：

在博客 “在Qt中使用C++代码创建界面”  （地址：http://blog.csdn.net/rl529014/article/details/51345619）中，我讲了如何通过纯C++代码来创建Qt图形界面，

这是传统的GUI程序开发方式，只使用C++代码，C++既负责设计界面，也负责处理业务逻辑。

界面是用户能够直接看到的，称为“前端”；业务逻辑的处理用户看不到，在背后默默进行，称为“后台”。

• 传统的GUI程序开发不区分前端和后台，统一使用C++代码管理，源文件中既有创建和设置控件的代码，又有处理业务逻辑的代码，非常杂乱。
  
  
• 使用C++代码直接创建控件，不管是从语法上讲还是从代码量上讲，看起来都比较“麻烦”。学过web开发的朋友应该会有体会，网页就是将前端和后台无缝集成的经典例子。
  
  
• 在网页中，我们能看到的各种文字、颜色、图片、布局、按钮、菜单、列表等界面元素都是使用HTML+CSS（专门用来设计界面的声明式语言）创建的，而后台逻辑才需要JavaScript、Python、PHP、Java等编程语言来处理。
  
  
• 现代GUI程序的设计，或许也借鉴了Web开发的思想，可以使用 XML 来设计界面，使用C++来处理后台逻辑，在 Qt 中可以轻而易举的做到前端和后台分离，从而让代码逻辑更加清晰，开发更加高效。

使用Qt Designer

Qt Designer 是与 Qt 配套的界面设计工具，使用它可以轻而易举的拖拽出简单的界面，下面我们就来学习一下。

在博客   “在Qt中使用C++代码创建界面”  中讲到了，创建 Qt Widgets Application 项目的第四步是填写类信息，

如下图所示：

“创建界面”选项默认是被勾选的。

项目创建完成后可以看到，勾选了“创建界面”选项，IDE 会多生成一个mainwindow.ui文件，如下图所示：

双击 mainwindow.ui，就可以进入设计模式，启动 Qt Designer，如下图所示：

再切换回编辑模式，就可以看到 mainwindow.ui 的源代码，如下图所示：

.ui文件是 Qt Designer 的界面设计文件，由 XML 代码构成。Qt Creator 不允许在编辑模式下修改 .ui 文件，只能切换到设计模式由 Qt Designer 自动生成。


XML是一种标记语言（也称声明式语言），由一个一个地节点组成，每个节点还可以包含多个属性，HTML 就是 XML 的一种具体化。
XML 是程序员必备的技能，也很简单，开发中会经常用到，可以不熟练，但要有所了解。
在编辑区看到的界面，仅包含了程序的客户区，没有包含标题栏，所以不会看到最大化、最小化、关闭等常见按钮。

新创建的程序，默认包含了菜单栏、工具栏和状态栏。如下图所示：

大家可以从左侧的控件箱中拖拽几个控件到编辑区的窗口中，亲自测试一下效果。如下图所示：（左侧控件箱中的控件都可以用鼠标拖到编辑区域，）

下图是我拖拽出的一个记事本界面。运行结果为：

使用Qt Designer创建界面

标签：

原文地址：http://blog.csdn.net/rl529014/article/details/51364457