Qt之混合方式 UI 设计

时间:2024-04-14 18:38:18

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

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

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

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

Qt之混合方式 UI 设计

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

Qt之混合方式 UI 设计

添加资源分组: 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来实现。

Qt之混合方式 UI 设计

3、设计工具和菜单栏

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

3.1、设计菜单栏

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

Qt之混合方式 UI 设计

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

Qt之混合方式 UI 设计

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

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

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

Qt之混合方式 UI 设计  Qt之混合方式 UI 设计Qt之混合方式 UI 设计

3.2、设计工具栏

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

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

Qt之混合方式 UI 设计

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

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

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

5、Action的功能实现

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

5.1、编辑功能Action的实现

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

Qt之混合方式 UI 设计

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 属性。