你好，我是安然无虞。

项目功能概述

开发一款 Qt版本的压测工具, 可以用来做 基于HTTP API接口的 性能测试.

要求做一个 MDI 多功能子窗口的 图形界面程序, 方便公司内部测试人员使用.

界面如下:

该项目主要涉及到的知识点有:

• Qt图形界面开发的各个要点:
  • 菜单栏、工具栏、dock window、树控件、表格控件、字体图标的使用、MDI多子窗口、控件动态边界调整、上下文菜单、编辑框文本语法高亮、动态曲线图、matplotlib作图.
• Socket编程
  • 使用 UDP Socket 来接收压测进程的统计数据, 并且可视化呈现.
• 多进程外部程序调用
  • 启动独立的新压测进程, 而不是在图形界面进程中运行压测.

接下来我们一步一步开发这款软件.

构建菜单栏、工具栏

构建菜单栏和工具栏都很简单, 只需要使用Qt Designer拖拽对应的控件即可, 所以这里主要是记录遇到的坑以及Qt Designer相关bug.

1. 菜单栏注意事项

1. 菜单栏消失不见了怎么办?

已经在 Qt Designer 中添加菜单栏了, 但是在预览的时候并没有, 有两点可能的原因是:

1. 窗口类型问题
   • 只有基于 QMainWindow 的窗口才能在 Qt Designer 中正确显示 QMenuBar。如果使用的是其他窗口类型（如 QWidget），则无法直接显示菜单栏. 解决方法是将窗口类型改为 QMainWindow
2. nativeMenuBar 属性问题
   • 在某些系统（如 macOS）上，QMenuBar 默认会隐藏在窗口标题栏中。可以通过设置 nativeMenuBar 属性为 false 来解决. 在 Qt Designer 中，找到 QMenuBar 的属性，将 nativeMenuBar 设置为 false

由于我选择的窗口类型就是QMainWindow并且使用的电脑系统是macOS所以很快确定是第2个问题导致的, 所以只需要进行如下改动即可:

取消勾选 nativeMenuBar即可解决问题.

2. 为什么添加子菜单或动作Action, 命名时中文不可用

这是 Qt Designer 的一个bug, 解决方法也很简单, 我们只需要在其他的文本编辑器中输入想要设置的文本, 然后复制过来即可, 比如我在 Sublime Text中输入‘打开文本编辑框’:

注意哦, 还有一个坑就是不能直接使用快捷键ctr+v, 这样是没有效果的, 需要鼠标右键选择粘贴才能复制成功.

回车之后会自动在 动作编辑器 里创建一个action(默认在菜单栏的一级菜单中再次创建菜单时是action, 当然你也可以自己手动设置为子菜单形式):

如果我们想要改动这个action名称, 可以自行命名, 这里我们命名为action_openProjectFolder.

2. 工具栏注意事项

1. 添加工具栏很简单, 只需要在窗口上右键点击选择 ‘添加工具栏’即可.

2. 如果工具栏中想复用上面菜单栏中某一个action只需将动作编辑器中对应的action拖到工具栏中即可.

3. 如果我们觉得使用文本样式不好看, 想设置为我们本地的图片样式, 可以双击 动作编辑器中对应的action进行更改, 比如这里的:

这样设置好了之后, 对应的action显示就变成这样子了:

这里我们使用 Qt Designer 的预览功能, 显示是正常的:

但是我们 运行 PySide6 程序时发现不对劲, 没有将图标显示出来:

所以这肯定是有问题的, 我们第一时间应该能猜到可能是图片的存放位置导致的, 看看这里的代码结构, 图片存放在images目录下的 folder.png:

为什么说是图片的存放位置导致的呢, 因为在 UI文件(也就是Qt Designer)中打开文件的逻辑和在程序中运行打开文件的地址是不一样的, UI文件中打开图片的当前目录是UI文件所在的目录, 所以我们以文本编辑器的方式打开UI文件, 可以看到:

图片的所在位置是相对于当前UI文件所在目录的上一级目录的images下, 而在程序中使用load()加载这个UI文件时使用的目录是程序文件所在的目录.

解决方法:

• 如果是Windows系统电脑可以创建硬链接
• 如果是Linux或是macOS系统可以创建符号链接

因为我使用的是macOS系统的电脑, 所以这里我讲的是创建符号链接的方式:

1. 确定图片的实际路径

   首先，需要确定 images 目录的绝对路径, 假设程序目录的路径为 /Users/your_username/your_project，那么 images 目录的路径为 /Users/your_username/your_project/images

2. 创建符号链接

   在 ui 目录下创建一个符号链接，指向 images 目录, 打开终端并执行以下命令：

   ln -s /Users/your_username/your_project/images /Users/your_username/your_project/ui/images
   

   这将在 ui 目录下创建一个名为 images 的符号链接，指向实际的 images 目录

3. 更新UI文件中的图片路径

   在 UI 文件中，将图片路径更新为符号链接的路径. 例如，如果符号链接的路径为 images/folder.png，则在 UI 文件中设置图片路径为 images/folder.png

此时我们再看程序目录:

可能有老铁会说: 直接讲原来images目录复制一份到ui目录下不就行了, 能达到一样的效果.

简单解释一下吧:

• 符号链接：
  • 符号链接是一个特殊的文件系统对象，它指向另一个文件或目录
  • 它并不包含实际的数据，而是存储了目标文件或目录的路径
  • 在文件系统中，符号链接被视为一个“快捷方式”
• 直接复制目录：
  • 直接复制 images 目录是将目录及其内容完整地复制到目标位置
  • 复制后的目录是一个独立的副本，与原始目录没有直接关联

我在网上查看这部分资料时说以硬链接/符号链接的方式管理图片资源并不是最优解, 因为这种虽然可以解决图片路径问题, 但是可能会导致项目可移植性变差, 且在不同操作系统上需要额外配置.

所以更推荐的解决方案是使用 Qt 的资源文件（.qrc）来管理图片资源.

这个解决方案在后面的学习中会讲解到.

4.文件选择对话框标题不显示的问题

我们在代码中设置了 选择目录时选择框会显示标题:

filepath = QFileDialog.getExistingDirectory(self.ui, "请选择项目目录" )

但是在执行的时候没有显示提示标题:

查了之后发现是使用了macOS系统的原生对话框, 我们可以使用以下代码强制使用 PySide6 的文件对话框:

options = QFileDialog.Options() # 创建一个对话框选项的实例
options |= QFileDialog.DontUseNativeDialog  # 强制使用PySide6的文件对话框而不是macOS的原生对话框
filepath = QFileDialog.getExistingDirectory(self.ui, "请选择项目目录", options=options)

这样改动之后再次执行代码就正常显示了:

3. 日志停靠窗口

对于日志停靠窗口的要求如下:

1. 程序各模块可以调用打印日志库函数， 日志窗口显示这些打印信息

2. 日志窗口可以停靠在主窗口的下面、右侧，也可以单独分离出主窗口

3. 设置日志窗口的最大显示行数为1000行

   # 设置日志窗口的最大显示行数为1000行
   self.ui.tb_logger.document().setMaximumBlockCount(1000)
   

4. 超过日志窗口可见范围，要能始终显示最新打印的内容

我们可以使用 Dock Widget 来创建可以拖动并且停靠的控件:

我们可以直接在 Qt Designer中对其进行一些基本的设置:

• 日志窗口可以停靠在主窗口的下面、右侧，也可以单独分离出主窗口

然后我们可以拖动一个 文本浏览框Text Browser(与多行纯文本框PlainTextEdit不同的是只读不可写, 当然我们也可以讲PlainTextEdit控件设置为只读):

因为在 Dock Widget 容器中只有一个Text Browser控件, 所以我们可以直接设置其布局, 这样的话这块看起来就美观一些:

设置布局之后看:

但是我们觉得边界不够美观, 有点大, 可以设置布局的上下左右margin:

将这里的上下左右margin由原先的12全部设置为0, 可以看到下面结果:

这样就好看多了.

遇见安然遇见你，不负代码不负卿。

谢谢老铁的时间，咱们下篇再见～