压测工具开发实战篇(二)——构建侧边栏以及设置图标字体
|
|
文章目录
- 构建侧边栏
- 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控件的周边(左边、右边和中间)都有间隙, 我们想去掉其中的间隙该怎么做呢?
由于 Frame控件和MDI控件 位于同一个水平布局中, 所以只需要调整外层的水平布局的Layout 对应的属性值即可.
按照上面设置后, 再运行看看效果:
ok, 没问题, 刚刚的间隙没有了.
现在还需要对侧边栏的图标控件添加一个小功能: 当鼠标移动到图标上时显示对应的名称, 比如鼠标移动到 btn_client 图标上会显示 客户端 的字样.
只需要点击对应的图标控件, 然后设置 toolTip 的值即可, 像这样:
现在就实现了前面提到的功能:
|
|
|
|