The Book of Qt 4 翻译：3.1.1 使用Qt设计器产生布局

The Book of Qt 4 翻译：3.1.1 使用Qt设计器产生布局

The Book of QT4 翻译

QT程序设计艺术

---------------------------------------------------------------------------------

原名：The Book of QT 4:The Art of Building Qt Applications

译名：The Book of QT 4中文版：QT程序设计艺术

译者：张小可 mcxiaoke@gmail.com

---------------------------------------------------------------------------------

第三章 使用Qt设计器进行界面设计

 

虽然手工编写像第二章的转换器那样的简单的图形用户界面不会有太多问题，我们仍然需要一个图形界面设计工具，尤其是在设计要放置许多GUI元素的对话框时。Qt提供了Qt设计器工具。

 

3.1 通过鼠标点击创建对话框

 

下面我们将使用Qt设计器创建第二章的ByteConverter对话框。

当设计器启动时会打开许多不同的窗口，这使一些Windows用户不太习惯。如果你想使用停靠窗口模式（Visual Studio的默认模式），你可以在编辑--用户界面模式--停靠窗口中切换。
（译者注：在Windows版的Qt 4.6.2中，默认就是停靠窗口，切换方式为设置--属性--用户界面模式，选择锚接的窗口或者多个顶级窗口）

窗口之一就是新建窗体对话框，它要求你选择一个模板。一般可用的模板有主窗口，对话框和窗口部件。Qt 4 改变了对话框底部边缘右边角落的确认和取消按钮的位置，把它们放置在右边的角落。我们选择其中的一个作为ByteConverter对话框的模板。图3.1显示的是Dialog with Buttons Bottom类型的模板。

图3.1：带有标准按钮的对话框模板

我们不需要指定按钮。我们使用鼠标左键围绕按钮和间隔符号画一个选框。按Del键就可以删除这些对我们的例子来说多余的部件。

下一步是给对话框框架添加行编辑器和标签。它们可以在Widget Box中找到，Widget Box通常位于屏幕的左边。要创建一个新标签，在Display Widgets组（位于Widget Box的底部）里面找到Label并把它拖入对话框。

 

图3.2：包含第一组部件的对话框

 

现在我们添加行编辑器部件。作为一个输入元素，这个用户界面组件位于Input Widgets类别，也可以通过拖放移动到指定位置。除了三个标签和行编辑器，我们还需要一个按钮（位于Buttons→ Push Button），一个水平间隔器和一个垂直间隔器。这些占位符的行为类似于伸缩条；当包含它们的窗口大小改变时，它们调整部件之间的距离。

放置好的GUI元素可以通过鼠标左键拖动重新放置。图3.2显示的是所有必须的部件都放置好后ByteConverter对话框的组成。

Qt4.2或者更新版本的用户可能找不到上面描述的Qt设计器模板，因为奇趣公司对默认的对话框模板做了一些轻微的改变。这是为了克服不同平台上的按钮次序问题：当前样式定义了按钮的次序。在Mac OS X和GNOME上，负面的动作（例如取消）位于左边，正面的动作（例如确定）位于右手边。在Windows和KDE上，次序正好相反。

 

奇趣的解决办法是在Qt4.2中引入一个名为QButtonBox的新类，它自动提供那些以前需要用户手动设置的：一套默认的按钮和间隔器。通过使用QButtonBox，程序将自动选择所选样式的正确次序。图3.3显示的是Cleanlooks(GNOME)和Plastique(KDE)样式的默认模板。

 

图3.3 QButtonBox根据环境样式指示调整按钮次序

如果Qt设计器可以使用QButtonBox，最好的办法是使用它，而不是按照上面的建议移除它然后添加一个新按钮。作为替代，我们在设计器的属性编辑器中修改standardButtons属性为只使用关闭按钮。通过standardButtons属性的下拉框取消所有激活的选项，然后选择QDialogButtonBox::Close就可以了。

对属性编辑器不熟悉的用户，例如从其它图形界面创建工具转移过来的，首先应该阅读第五小节以获得一个简短的介绍。

 

3.1.1 使用Qt设计器产生布局

 

这些部件还没有一个整齐的布置。为避免不得不为界面元素明确指定精确到像素的位置，Qt设计器提供了一些标准布局。为了将许多一起的部件分组，你可以首先使用鼠标左键围绕它们画一个矩形框来高亮它们，然后在上下文菜单（如果你在选定的范围上点击鼠标就会弹出），或者工具栏上，选择想要的布局。推荐后者，尤其是对于使用单键鼠标的Mac用户。

对于这个例子的行编辑器和标签来说，最好的选择是栅格布局；可以在上下文菜单中选择布局--栅格布局。接着布局就会以红色的轮廓线显示，对象也会显示出来，像他们在最终的程序中的一样分组。

当应用一个布局时，Qt设计器会设法允许开发者布置部件导致的任何像素的不精确。如果所选的布局无法按你的意图安排部件，或者对这个布局来说元素的数目错误，可以通过上下文菜单的布局--打破布局来取消布置。

 

如果上面没有选择使用QButtonBox，我们为间隔器和按钮挑选一个水平布局，因为QButtonBox已经包括了内含空白的一个水平布局（布局--水平布局）。

图3.4：用布局分组归类部件

最后，我们将这两个布局与到目前为止没有分组过的垂直间隔器，一起安排进一个单一的垂直布局。这个“全局”布局不需要明确地选择：Qt设计器不会用一个单独的框高亮它，如果你右键点击对话框的空白地方就会打开上下文菜单。它影响所有先前成形的布局和到目前为止还没有分组的元素（例如垂直间隔器）。

结果与我们想要的界面差不多，如图3.4所示。然而，标签还不合适。这个可以通过上下文菜单项“改变文本”，或者屏幕右边的属性编辑器来改变。为了更好的理解后面的部分，先了解一下Qt的属性原理是值得的。

 

作者：张小可
出处：http://mcxiaoke.cnblogs.com/
转载：原创翻译，欢迎转载，不得用于商业目的，必须保留本文的署名张小可（包含链接）.

Tag标签: 翻译,原创,C++,QT4,GUI,The Book of Qt 4