压测工具开发实战篇(二)——构建侧边栏以及设置图标字体

在这里插入图片描述

你好，我是安然无虞。

文章目录

- 构建侧边栏
- - QtAwesome使用
  - 调整侧边栏宽度
  - 了解: sizePolicy属性
  - 伪状态

在阅读本文之前, 有需要的老铁可以先回顾一下上篇文章:
压测工具开发(一)——使用Qt Designer构建简单界面

构建侧边栏

我们要实现类似于下面这样的侧边栏功能:

在这里插入图片描述
可以在 Qt Designer 中使用(containers)容器里的Frame容器, 拖到主窗口中即可:

要实现侧边栏中每一个功能按钮可以在Frame容器控件中添加所需数量的button按钮控件即可.

在这里插入图片描述
因为界面上需要容纳多个子窗口, 所以还需要使用容器里的MDI容器控件, 添加到主界面中:

我们将侧边栏Frame容器设置为垂直布局, 再将包含侧边栏和MDI子窗口的控件设置为水平布局, 界面即可按预期显示:
在这里插入图片描述
如果我们想要让侧边栏的按钮设置为前面提到的图标模样, 该怎么做呢?

可以在网上搜索 QtAwesome官网

QtAwesome使用

QtAwesome是一个Python库，用于在PyQt和PySide应用中使用图标字体.它支持多种图标系列，如msc、fa5等，允许用户自定义颜色、样式、动画效果.

这个网站上面还有QtAwesome的使用示例, 请试着理解.

关于 QtAwesome 的使用有一个重要的问题就是: 我怎么知道想用的图标对应的名字呢, 从哪里能看到呢?

如果是 Windows电脑可以在安装的QtAwesome目录下找到 qta-browser.exe可执行程序, 双击运行即可显示所有图标信息.

因为我用的是macOS系统电脑, 所以这里主要讲解macOS系统中的操作:
1.确保环境配置正确
确保你已经在 PyCharm 的虚拟环境中正确安装了 qtawesome 模块以及相关的依赖项（如PySide6）
如果尚未安装，可以通过以下命令安装：

pip install qtawesome pyside6

2.找到 icon_browser.py 文件
在 PyCharm 的虚拟环境中，qtawesome 模块通常安装在 site-packages 目录下.
可以通过以下方式找到 icon_browser.py 文件：
打开 PyCharm 的终端, 输入以下命令，找到 qtawesome 的安装路径：

python -c "import qtawesome; print(qtawesome.__file__)"

这将输出类似以下路径：

/path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome/__init__.py

icon_browser.py 文件通常位于 qtawesome 模块的目录下，路径类似于：

/path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome/icon_browser.py

3.运行 icon_browser.py
打开 PyCharm 的终端或命令行工具, 切换到 qtawesome 模块所在的目录：

cd /path/to/your/virtualenv/lib/python3.x/site-packages/qtawesome

运行 icon_browser.py 脚本：

python3 icon_browser.py

如果一切配置正确，icon_browser.py 将启动一个图形界面，显示所有可用的图标及其名称.

通过运行 icon_browser.py，你可以直观地查看 qtawesome 模块中所有可用的图标，并且可以直接复制图标名称用于你的项目中.

运行之后显示如下:
在这里插入图片描述
我们可以筛选自己想设置的图标系列以及名字, 比如想设置用户方面的图标, 就可以在搜索框中输入类似于 user 的文本进行查找即可.

好, 现在已经知道了图标对应的信息, 就可以在我们的PySide6程序中使用了.

我们将侧边栏中的第一个图标设置为客户端图标, 名字叫btn_client, 这个时候可以将其图标设置为刚刚搜索的fa5.user-circle:

import qtawesome as qta# 设置侧边栏图标 - qtawesome
self.ui.btn_client.setIcon(qta.icon('fa5.user-circle', color='SteelBlue'))
self.ui.btn_client.setIconSize(QSize(30, 30))

执行之后显示效果如下:
在这里插入图片描述
我们想把侧边栏宽度调整的小一些, 该怎么做呢?

调整侧边栏宽度

踩坑了, 这个我搞了半个多小时才找出来, 因为 Frame控件和MDI控件位于同一个水平布局中, 理论上只要调整这个父级水平布局中的 layoutStretch 属性即可, 主需要输入两个数值，分别表示 Frame 和 MDI Area 的宽度比例, 把Frame对应的数值调小一些即可, 像这样:
在这里插入图片描述
但是这样设置了之后, Frame控件并没有变化.

要解决这个问题可以设置Frame控件的的最小宽度以及MDI控件的水平拉伸策略改为Expanding, 使其自动填充剩余空间.
在这里插入图片描述
这样就可以解决问题了. 现在侧边栏的宽度就好看多了:

了解: sizePolicy属性

sizePolicy属性决定了控件对可用空间的“需求”和“适应方式”.

sizePolicy 的核心作用

当控件被放置在布局（如水平布局、垂直布局）中时，布局管理器会根据以下因素分配空间：

父窗口/容器的可用空间
控件自身的 sizeHint（建议大小）
控件的 minimumSize/maximumSize（最小/最大限制）
sizePolicy（动态调整策略）

sizePolicy 会告诉布局管理器：

控件是否希望被拉伸（例如填满剩余空间）
控件是否希望保持固定大小
如何与其他控件竞争空间

sizePolicy 的组成部分

sizePolicy 包含两个维度的策略和一个拉伸因子：

1.水平策略 (HorizontalPolicy): 定义控件在水平方向上的大小调整行为.

常见值：

Fixed: 固定宽度（严格使用 sizeHint）
Minimum: 宽度可以扩大，但不可小于 sizeHint
Maximum: 宽度可以缩小，但不可大于 sizeHint
Preferred: 优先使用 sizeHint，但可扩大或缩小
Expanding: 尽可能填满空间（主动抢占剩余空间）
Ignored: 完全忽略 sizeHint（根据布局强制调整）

2.垂直策略 (VerticalPolicy): 定义控件在垂直方向上的大小调整行为（与水平策略同理）.

3.拉伸因子 (HorizontalStretch/VerticalStretch)
一个整数值（默认为 0），用于控制控件在布局中的空间分配比例.

常见场景示例

场景 1：让按钮填满水平空间

设置按钮的 HorizontalPolicy 为 Expanding，它会自动拉伸以填满布局的剩余宽度.

场景 2：固定输入框宽度

设置输入框的 HorizontalPolicy 为 Fixed，宽度由 sizeHint 决定.

场景 3：按比例分配空间

两个控件的 HorizontalStretch 分别为 1 和 2，则它们的宽度比例为 1:2.

伪状态

现在想加一个小功能: 希望按钮在默认情况下没有边框, 当鼠标移动到图标上会显示边框, 并且会有背景色.

这个该怎么做呢?

我们点击 Frame 控件, 选择 styleSheet 属性, 设置想要的属性值即可.

在这里插入图片描述

这里的属性值我们这样设置:

QPushButton {border: none;
}QPushButton:hover {border: 1px solid yellow;background-color: Cornsilk;
}

对上面代码的解释:

QPushButton { border: none; }：当按钮处于正常状态时，不显示边框.
QPushButton:hover { border: 1px solid yellow; background-color: Cornsilk; }：当鼠标悬停在按钮上时，按钮的边框变为1像素宽的黄色实线，背景颜色变为Cornsilk（一种浅黄色）

设置好之后, 我们再来运行程序看看效果:
在这里插入图片描述
符合预期, 但是我们发现上面的Frame控件和MDI控件的周边(左边、右边和中间)都有间隙, 我们想去掉其中的间隙该怎么做呢?