Qt：混合方式 UI 设计

阳光穿透心脏的1/2处 2022-05-17 11:00 179阅读 0赞

# 1、创建项目并添加资源文件 #

(1)创建一个 Widget Application 项目，在向导的创建窗口类时，选择基类 QMainWindow，新建  
类的名称设置为 QWMainWind，并选择生成窗体。

(2)添加资源文件：用来存储菜单和工具栏的图标和图片文件。

在 Qt Creator 里单击“File”→“New File or Project…”---->"Files and Classes"\[Qt\]------>“Qt Resource File

![70][]

右击qwmainwind.qrc---->open in editor打开资源文件编辑器

![70 1][]

添加资源分组： Add--->Add Prefix.\[前缀名就是资源分组\]

添加图标文件：Add----->Add files选择图标文件，

最好将图标等原始文件放在项目的子目录下

# 2、设计Action #

QAction类：创建Action，并编写trigger()信号的槽函数。使用设计的Action可以创建菜单项，工具栏按钮等

双击 qwmainwind.ui，进入 UI 设计器，在窗体的下方有一个 Action Editor的面板

*  Text：Action的显示文字，该文字会作为菜单标题或者工具栏按钮标题显示。
 *  Object name：该Action1的objectName。
 *  ToolTip：当鼠标在一个菜单项或者工具栏按钮上短暂停留时出现的提示文字
 *  Icon：设置Action的图标，单击其右侧的按钮可以从资源文件中选择图标，或者直接先选择图片文件作为图标
 *  Checkable：设置Action复选状态，如果选中此项，那么该Action就类似于QCheckbox可以改变其复选状态。
 *  Shortcut：设置快捷键

做好这些设置后，单击“OK”按钮就可以新建或修改 Action。所有用于菜单和工具栏设计的功能都需要用Action来实现。

![70 2][]

# 3、设计工具和菜单栏 #

建立好Action之后，就可以在主窗体上设计菜单和工具栏了。本项目的窗体类QWMainWind是从QMainWindow继承的，具有菜单栏，工具栏和字体栏。

## 3.1、设计菜单栏 ##

进入UI编辑器：“Type Here”的地方是菜单栏，

![70 3][]

创建主菜单分组：双击“Type Here”，出现编辑框，输入所设计的菜单分组名称，如“文件/编辑.格式”分组，回车。

![70 4][]

创建菜单项：从Action编辑器的表中将一个Action拖放到菜单的某个分组下面。 类似界面上放置组件

Add Separator创建一个分隔条，然后拖动到需要的位置。

删除菜单项/分隔条：选中，然后快捷菜单remove

![70 5][] ![70 6][]![70 7][]

## 3.2、设计工具栏 ##

直接将action拖入工具栏就可以了。也可以Add Seperator创建分隔条。可以选中后remove

如果需要设计多个工具栏，在主窗口上单击右键，"Add Tool Bar"新建工具栏

![70 8][]

# 4、代码创建其他界面组件 #

工具栏和菜单栏不能添加组件，因此需要代码设计。

*  组件SpinBox用于设置字体大小
 *  组件FontComboBox选择字体。

# 5、Action的功能实现 #

Action是一种不可见的界面元素，主要用于菜单项，工具栏按钮的设计。Action的主要信号是trigger()，为一个Action的trigger()信号编写槽函数之后，菜单和工具栏由此Action创建的菜单项和工具栏按钮都关联此函数。

## 5.1、编辑功能Action的实现 ##

用于编辑的Action有剪切，复制，黏贴和清除的功能，以便对txtEdit组件进行相应的操作。而 QTextEdit 类就有相应的槽函数，无需再编写实现代码，只需将 Action 的 trigger()信号与 txtEdit 的相应槽函数进行关联即可。

![70 9][]

## 5.2、其他Action的功能实现 ##

Action 的主要信号是 trigger()和 trigger(bool)，在单击菜单项或工具栏按钮时发射。

用于设置粗体、斜体和下划线的 3 个 Action 具有 Checkable 属性，选择 trigger(bool)信号设计槽函数更合适，该信号会将 Action 的复选状态作为一个参数传递，在响应代码里可以直接使用。  
其他 Action 可选择 trigger()信号生成槽函数。在 Action 的“Go to slot”对话框，选择信号为 Action创建槽函数。  
下面是用于设置字体粗体的 actFontBold 槽函数代码，使用了 trigger(bool)信号。

## 5.3、Action的enabled和checked属性的更新 ##

在主窗体上选择文本编辑框txtEdit，在快捷键里调出“Go to slot”对话框，对话框里列出QTextEdit的所有信号，有两个可以利用的信号。

*  copyAvilable(bool)信号在内容可以被复制时发射，并且传递了一个bool参数。可以利用此信号来改变 actCut，actCopy 的 enabled 属性。

[70]: /images/20220517/5642873834cb453196ff6cc5d01445fc.png
[70 1]: /images/20220517/bf8f880a4fc14c1b947ee3babfbc1577.png
[70 2]: /images/20220517/fcb7a2f2364149d89f260c4390744cf2.png
[70 3]: /images/20220517/529392fa7bd14754b512d5f0db2848df.png
[70 4]: /images/20220517/951ceae9f706488f8a02b3758fcf9f6b.png
[70 5]: https://img-blog.csdn.net/20180810162442552?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180810162944453?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: /images/20220517/d1c3f8d05d9740c88249f6f0d040715c.png
[70 8]: /images/20220517/0e8b4888a9924d85b85a043cade04c79.png
[70 9]: /images/20220517/316e3b340a384a339c63b757fc9a7571.png