8.4 使用 Qt Designer 创建主窗口

通过对第 5 章的学习,我们已经了解了 Qt Designer 及其组件的基本用法。Qt Designer 提供了许多预定义模板,使用它可以创建多种不同的用户界面。使用 Qt Designer 创建主窗口是非常快捷的,使用其中的 【templates\forms】→【Main Window】就可以完成主窗口类型应用程序界面的设计,主要包括菜单栏、工具栏以及锚接窗口部件的 设定,这其中锚接窗口部件不是必需的。

小贴士:在 Qt4.5 以前的版本中,使用 Qt Designer 不能创建状态栏和锚接窗口部件(Dock Widget),必须使用手写代码实现;而在 Qt4.5 以后,可以在图形界面下创建锚接窗口部件 了,但状态栏还是需要结合手写代码创建。

好了,下面就给出一个完整的创建主窗口应用程序界面的图文流程,示范的环境是在 Windows XP SP2 中文版,Qt4.5.2 开源版下。你在其它操作系统如 Linux 以及 Mac OS X 下 的步骤与此类似,只是软件展现的界面风格有所不同。

8.4.1 创建菜单

在一个大型的应用程序中,菜单往往是不可或缺的,它为客户提供了简便快捷的操作模式。菜单有两种:主菜单和上下文菜单。主菜单的位置是固定的,即在应用程序主界面的顶部;上下文菜单一般在用户单击鼠标右键时出现在鼠标的位置,应用更加灵活方便。

第 1 步,选择 Main Window 模板

依次点击 Qt Designer 主菜单上的【文件】→【新建】,弹出如图 8-3 所示的【新建 窗体】对话框,在其中选择【templates\forms】→【Main Window】模板,然后点击【创 建】按钮,即生成一个默认的主窗口界面,如图 8-4 所示。

图 8-3 选择 Main Window 模板

图 8-4 创建了一个空白主窗口界面

在这个系统默认生成的界面上,已经包含了一个菜单栏和一个状态栏,以及一个中心 窗口部件,我们可以从如图 8-5 所示的对象查看器中看得非常清楚。

图 8-5 从对象查看器中看到的界面组成情况

菜单栏是可以被移除的,如图 8-6 所示,方法是在菜单栏上面点击鼠标右键,弹出上 下文菜单,选择【移除菜单栏】即可完成移除;再次创建菜单栏也很容易,在窗体上点击鼠 标右键,在弹出的上下文菜单上选择 【创建菜单栏】命令,即可增加一个新的菜单栏,如图 8-7 所示。状态栏的移除和创建与此相类似,只是状态栏并不可以在界面上编辑,而只能在 属性编辑器中设定属性,在对象观察器中也可设置其名字等基本属性。

图 8-6 移除菜单栏

图 8-7 再次创建菜单栏

小贴士:根据 Qt Assistant 中的说法,这个界面默认包含了一个菜单栏和一个工具栏,原文如下:This template provides a main application window containing a menu bar and a toolbar by default -- these can be removed if they are not required. 这是与实际情况不符的,希望读者朋友注意。

一个 Qt 应用程序通常只有一个菜单栏和状态栏,但可以有多个工具栏以及锚接窗口部 件。

第 2 步,创建菜单项。

首先设计主菜单。 在主窗口上用鼠标左键双击【在这里输入】区域,在出现的文本框中输入第一个菜单的名字“&File”,并按下【Enter】键或【Return】键确认输入。其中“&”表示把字符 F作为菜单显示文本助记符(在字母 F 下加下划线,即显示为“File”),作用是将 “Alt+F”设置为加速键(accelerator)。当应用程序处在活动状态时,通过按下加速键“Alt+F”,就可以将【File】菜单激活;或者主窗口的菜单栏处在活动的状态下(通过按下”Alt”键就可以将菜单栏激活),在键盘上直接按下 “F”键就可以激活【File】菜 单,如图 8-8 所示。这之后,依次建立【Edit】、【Help】等其它主菜单项。

图 8-8 创建主菜单

你也可以在菜单项中输入中文名称,如 “文件”、“编辑”、“帮助”等,但我们不 推荐直接输入中文字符。输入中文的常见做法是 在主窗口上用鼠标左键双击“在这里输 入”区域,在出现的文本框中输入第一个菜单的名字 “文件(&F)”,并按下【Enter】键或【Return】键确认输入。同上,字母 F 将作为助记符,显示为“文件(F)”。其他菜单依此 类推。

小贴士:输入完毕后,一定要按下回车键(Enter 或 Return)予以确认,否则刚输入的字 符将无效。要拒绝输入的字符,可以按下【Escape】键,也可以同时按下“Ctrl+Z”组合键取消刚才的输入。

使用简单的拖拽方式就可以把主菜单项调整到你希望的位置,当你使用鼠标左键拖拽 主菜单项时,一条红色的竖线会提示出目的位置。

主菜单可以有任意多个菜单项,主菜单项的删除可以用上下文菜单命令实现,而不可 以使用【Delete】键。

然后设计子菜单。 子菜单的设计与主菜单类似,需要说明的是如何设置快捷键,这需要借助属性编辑器来完成,在属性编辑器中选中要设定的子菜单项,然后点击 ”shortcut”栏,如图 8-9 所示,在上面按下你想要加入的快捷键,比如 “Ctrl+N”,就同时按下这两个键即可完成设 置。这之后,用同样的做法完成各个子菜单项的添加。

图 8-9 设置子菜单项的快捷键

子菜单也可以有任意多个或多个级联菜单项。子菜单项也可以使用拖拽方式到任意一 个主菜单下面,即使是一个已经关闭的主菜单。要删除子菜单项,可以直接按下 Delete 键。

小贴士:创建子菜单的同时,就创建了动作( Action),这也是创建动作的方法之一。下面 还会讲到如何创建动作,并与菜单项进行关联。

第 3 步,设置属性 设置属性可以做到非常的快捷。请看下面的专题介绍。

专题:对象查看器和属性编辑器的配合使用

首先将对象查看器和属性编辑器按照如图 8-10 所示排列,然后在对象查看器中用鼠标 左键点击选中某一个对象,再切换到属性编辑器里面设置该对象的属性。

这种方法的好处是,不必在界面上费力气的逐个点击对象,再设置属性;而且有些对 象是不能通过鼠标点击获得焦点并设置属性的,如 Status Bar 等。

图 8-10 组合使用对象查看器和属性编辑器

8.4.2创建动作

当菜单栏和工具栏被创建好之后,它们还不能够被使用,必须与动作关联起来。 Qt Designer 提供了一个动作编辑器,使用它创建和管理动作是一件非常轻松的事情。

创建动作有两种做法,一种就是在创建子菜单的同时,一并创建动作;另一种就是先 不创建子菜单,而是使用动作编辑器创建动作,然后再把动作 “拖”到菜单项上,这就在创 建动作的同时也创建了子菜单项。第一种前面已经讲过了,这里重点讲解后一种做法。首先 了解一下动作编辑器的用法。

专题:动作编辑器(Action Editor)

默认情况下,动作编辑器是显示在 Qt Designer 的右半部分的,如图 8-11 所示。

图 8-11 动作编辑器的样子

要控制动作编辑器的显示和隐藏也很容易,方法是依次点击主菜单项 【视图】→【动 作编辑器】,如图 8-12 所示。选中时,该项前面有一个对勾标记,表示显示动作编辑器, 反之,该项前面没有对勾,则表示隐藏动作编辑器。

图 8-12 显示或隐藏动作编辑器

动作编辑器允许用户创建、删除动作。它同时也提供了基于动作文本的搜索选项。 动作编辑器可以以图标视图(Icon View)或者是细节视图(Detailed View)的方式浏览。配置的方法是通过鼠标右键的上下文菜单,如图 8-13 所示,通过使用该菜单项可以对 动作进行增加、删除等各种操作。也可以使用动作编辑器工具栏上的快捷按钮。

图 8-13 设置动作编辑器的浏览方式

要创建一个动作,可以在动作编辑器中点击 【新建】按钮,将弹出【新建动作】对话 框,如图 8-14 所示。像图中那样为动作设置各个属性。当一个动作被创建完成后,它就可 以被应用了。

图 8-14 新建一个动作

在配置动作的图标时,如果不满意默认的图标,可以使用资源浏览器创建一个资源文 件(.qrc 文件),并添加各种图标文件。资源浏览器的使用请看后面的专题。

创建一个动作后,还需要把它与菜单或工具栏连接起来。方法是在动作编辑器上的某 个动作上点击鼠标左键,不要松开,把它拖到要关联的菜单或工具栏上。 Qt Designer 提供 了红色的高亮线来指示动作要关联的位置,判断好了之后,就可以释放鼠标左键,从而把动 作与菜单或工具栏按钮关联起来。图 8-15 显示了设置动作与菜单项关联的情形,图 8-16 显示了设置动作与工具栏按钮关联的情形。

图 8-15 设置动作与菜单项的关联

图 8-16 设置动作与工具栏按钮的关联

8.4.3 创建工具栏

创建工具栏很容易,通过使用鼠标右键的上下文菜单项 【添加工具栏】即可,如图所 示。同样的,如果已经有了工具栏,同样可以通过该上下文菜单项移除工具栏。

图 8-17 添加工具栏

要创建工具栏上的按钮,就必须在动作已经被创建的情况下才能进行。一个比较好的 方法是从动作编辑器中拖动动作至工具栏上,在认为合适的地方松开鼠标左键,这时就创建 了一个工具栏按钮。具体做法与上一小节介绍的相同。

工具栏上的按钮是可以被分组的,方法是使用鼠标右键的上下文菜单项 【添加分隔 符】,这样为【File】和【Edit】菜单分别创建工具组,如图 8-18 所示。

图 8-18 设置好工具栏的主窗口程序

8.4.4 创建锚接窗口部件(不是必需的)

从 Qt 4.5 开始,Qt Designer 在其窗口部件盒中可视化的提供了锚接窗口部件,这就 进一步简化了创建锚接窗口的步骤。因此,为主窗口程序创建锚接窗口比较简单,就是把这个部件从窗口部件盒中拖出来,放到合适的位置。如图 8-19 所示的例子中,一共放置了 4个锚接窗口部件,而且上、下、左、右这 4 个可供停靠的位置上可以放置不止一个锚接窗 口部件。

图 8-19 添加锚接窗口部件

注意,拖动锚接窗口部件时,不必太在意它的初始位置,这可以在属性编辑器中调 整,其锚接位置主要是通过 dockWidgetArea 属性来设置,如图 8-20 所示。

图 8-20 设置 dockWidgetArea 属性

8.4.5 创建中心窗口部件

在 Qt Designer 中为主窗口创建中心窗口部件,只需要将一个窗口部件拖动到窗口部 件盒中,然后再设置一个布局即可, Qt 会为程序设置好中心部件。如图 8-21 所示,图中 放置了一个 TextEdit 窗口部件,然后设置了一个垂直布局。

图 8-21 设置好中心窗口部件

我们可以从对象查看器中看到布局以及中心窗口部件的设置情况,如图 8-22 所示。

图 8-22 布局以及中心窗口部件的情况

好了,到此我们就使用 Qt Designer 创建了一个完整的主窗口界面,步骤也是比较清 晰的。中间用到了属性编辑器、对象浏览器、资源浏览器和动作编辑器以及窗口部件盒等重 要的工具,几乎将 Qt Designer 所用到的功能练习了一遍。使用 Qt Designer 创建主窗口 界面后,仍然需要使用代码完成菜单项的功能,可以采用手写代码的方式,也可以借助于 Qt Creator 这样的 IDE。请读者朋友自行练习。