使用PySide6/PyQt6实现系统图标的展示和选择处理

屈丽發表於 2025-9-15 22:18:00

使用PySide6/PyQt6实现系统图标的展示和选择处理

在我们的基于PySide6/PyQt6的前端应用中，为了方便和重用，我们收集一些系统图标作为界面的使用，另外PySide/PyQt内部也有内置的图标，我们可以结合起来对图标进行统一的展示和选择处理，如在系统定义动态菜单的时候，我们可以为它指定具体的图标，从而灵活定义菜单的相关展示效果。
<h3>1、使用PySide6/PyQt6实现系统图标的展示和选择处理</h3>
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915212544320-1221806189.png" alt="image" width="1289" height="1029" loading="lazy">
 如上面所示，我们在菜单管理中需要汇总系统的相关图标，以便在菜单编辑中选择具体的图标效果。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915213336378-1240414328.png" alt="image" width="783" height="583" loading="lazy">
选择图标会弹出一个可缩放的对话框出来，如下界面所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915213540911-912956178.png" alt="image" width="793" height="503" loading="lazy">
上面的图标对话框，我们为了更好的展现效果，使用一个自己封装好的可伸缩调整大小的对话框基类，如下关系
<div class="cnblogs_code">
<pre>class MySizedDialog(QDialog):
"""自定义对话框基类"""

def __init__(
 self,
 parent,
 title="默认对话框标题",
 can_scroll=True,
 show_btn_ok=True,
 size=(400, 600),
 pos=None,
):
 super().__init__(parent)

 self.log = settings.log.get_logger()
 self.setWindowTitle(title)
 self.setWindowIcon(images.catalog["appIcon"])
 self.show_btn_ok = show_btn_ok
 self.can_scroll = can_scroll</pre>
</div>
关于可伸缩的对话框基类，我们在控件界面的底部，根据配置创建OK、Cancel的标准按钮集合，如下代码所示。
<div class="cnblogs_code">
<pre> def _add_buttons(self) -> QDialogButtonBox:
 """创建按钮"""

 if self.show_btn_ok:# OK按钮、Cancel按钮都显示
 # 创建标准按钮框（包括 OK 和 Cancel）
 button_box = QDialogButtonBox(
 QDialogButtonBox.StandardButton.Ok
 | QDialogButtonBox.StandardButton.Cancel
 )

 else:# 只显示 Cancel 按钮
 button_box = QDialogButtonBox(QDialogButtonBox.StandardButton.Cancel)

 # 查找 OK 按钮
 ok_button = button_box.button(QDialogButtonBox.StandardButton.Ok)
 if ok_button:# 检查按钮是否存在
 # 设置图标
 ok_button.setIcon(images.catalog["accept"])
 # 异步绑定事件
 ok_button.clicked.connect(self.on_ok)

 cancel_button = button_box.button(QDialogButtonBox.StandardButton.Cancel)
 if cancel_button:# 检查按钮是否存在
 # 设置图标
 cancel_button.setIcon(images.catalog["cancel"])
 # 异步绑定事件
 cancel_button.clicked.connect(self.on_cancel)

 return button_box</pre>
</div>
 
然后再构建一个图标选择的控件类即可，如下所示。
<div class="cnblogs_code">
<pre>class MyImageDialog(ctrl.MySizedDialog):
"""图片选择对话框"""

selected_name = ""
selected_bitmap = None

def __init__(
 self,
 parent,
 title="图片选择对话框",
 can_scroll=True,
 show_btn_ok=True,
 size=(800, 600),
 pos=None,
 return_icon_size=32,
):
 super().__init__(
 parent,
 title=title,
 can_scroll=can_scroll,
 show_btn_ok=show_btn_ok,
 size=size,
 pos=pos,
 )
 self.return_icon_size = return_icon_size</pre>
</div>
 
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915222803606-1958146462.png" alt="image" loading="lazy">
 我们在图标选择的对话框，使用了选项卡控件来构建两个界面，一个是展示我们自定义的图标集合，一个是展示系统的内置图标集合。
<div class="cnblogs_code">
<pre> def add_contents(self, panel: QWidget, grid_sizer: QGridLayout):
 """创建列表面板"""

 # 创建 QTabWidget
 self.notebook = QTabWidget(panel)
 self.notebook.setTabPosition(QTabWidget.TabPosition.North)

 self.first = self.create_first()
 self.second = self.create_second()

 self.notebook.addTab(self.first, get_bitmap("group"), "自定义内嵌图片")
 self.notebook.addTab(self.second, get_bitmap("group_key"), "系统图标")

 # 创建 QLabel，用于显示图片
 self.bmpCtrl = QLabel(panel)
 # self.bmpCtrl.setFixedSize(32, 32)# 设置固定大小
 self.bmpCtrl.setStyleSheet("border: 1px solid black;")# 设置边框样式
 self.bmpCtrl.setSizePolicy(QSizePolicy.Policy.Fixed, QSizePolicy.Policy.Fixed)# 设置尺寸策略

 grid_sizer.addWidget(self.notebook)
 grid_sizer.addWidget(self.bmpCtrl) </pre>
</div>
 我们以自定义的图表集合为例，我们创建的第一个create_first()函数里面就是根据集合遍历进行展示，如下代码。
<div class="cnblogs_code">
<pre> def create_first(self) -> QWidget:
 """创建自定义内嵌图片面板"""

 # 创建面板
 panel = self._create_window(self, True)
 # 创建 WrapSizer
 icon_layout = ctrl.FlowLayout()

 # 遍历图片目录，创建图标
 for idx, (key, value) in enumerate(images.catalog.items()):
 icon_panel = self.create_icon(panel, value, key)
 icon_layout.addWidget(icon_panel)

 child_panel = QWidget(panel)
 child_panel.setLayout(icon_layout)
 if isinstance(panel, QScrollArea):
 panel.setWidget(child_panel)

 return panel</pre>
</div>
 
而其中images是我们导入的系统全局图标集合，它是在系统初始化的时候进行内存加载，驻留全局使用的。
<div class="cnblogs_code">
<pre>from core.core_images import CoreImages as images</pre>
</div>
 
 我们是在登录界面初始化的时候，就对系统全局图标集合进行加载的。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915215329742-189028339.png" alt="image" width="701" height="359" loading="lazy">
 我们和WxPython 的做法类似，使用Base64编码进行图片处理，其中Base64编码我们通过辅助类来构建生成。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915215709860-2055129607.png" alt="image" width="921" height="568" loading="lazy">
 如果需要根据文件生成base64编码，单独运行辅助类即可，它运行提示输入文件，或者拖入文件即可获得文件名，运行后生成Base64编码和相关代码，拷贝过去使用即可。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915220226605-1662125980.png" alt="image" width="920" height="536" loading="lazy">
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915220502946-842970641.png" alt="image" width="925" height="360" loading="lazy">
 对于PySide/PyQT的内置图标
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250915220816331-401443021.png" alt="image" width="920" height="603" loading="lazy">
 我们可以通过遍历 QStyle.StandardPixmap 来获取并展示的
<div class="cnblogs_code">
<pre> # 创建 WrapSizer
 icon_layout = ctrl.FlowLayout()

 # 获取所有标准图标
 i = 0
 for standard_icon in QStyle.StandardPixmap:
 icon = QApplication.style().standardIcon(standard_icon)# 获取标准图标
 # 检查图标是否有效
 if icon.isNull():
 # print(f"跳过无效图标: {standard_icon.name}")
 continue

 pixmap_32 = icon.pixmap(32, 32)# 生成 32x32 的 QPixmap
 icon_32 = QIcon(pixmap_32)# 重新创建 QIcon
 name = standard_icon.name# 获取图标名称

 icon_panel = self.create_icon(panel, icon_32, name)
 icon_layout.addWidget(icon_panel)

 i += 1</pre>
</div>
 
在图标展示后，每个图标都在接收单击事件后，传入对象的相关信息，因此选中并确认后返回图标的信息。
<div class="cnblogs_code">
<pre> def on_item_selected(self, event, name: str):
 """鼠标左键单击事件处理"""
 icon = get_bitmap(name, self.return_icon_size)
 bitmap = icon.pixmap(32, 32)
 bitmap = bitmap.scaled(32, 32, Qt.AspectRatioMode.KeepAspectRatio, Qt.TransformationMode.SmoothTransformation)

 self.selected_name = name
 self.selected_bitmap = bitmap

 self.bmpCtrl.setPixmap(bitmap)
 print(f"你选择了: {name}")</pre>
</div>
 
这样我们就可以根据名称进行图标的展示了。
我们在bitmap_util.py的辅助类中定义获取图标为位图对象QIcon的转换，如下是根据名称生成对应的位图对象QIcon。
<div class="cnblogs_code">
<pre>def get_bitmap(name: str, icon_size: int = 32) -> QIcon:
"""获取位图,可以根据名称获取images里面的内容，或者是系统内置的图标SP_XXX"""

if name is None or name == "":
 name = "appIcon"

if name.startswith("SP_"):
 # 系统内置的图标
 icon = get_standard_icon(name, icon_size)
 return icon
elif name.startswith("ic_fluent_"):
 # 微软Fluent系统图标
 icon = FluentSystemIconUtil.create_icon_by_name(name, icon_size)
 return icon
else:
 # 自定义内置的图标
 icon = get_customed_icon_with_default(name, icon_size)
 return icon</pre>
</div>
 
以上就是基于PySide6/PyQt6的前端应用中，对自定义的图标资源以及内置图标资源进行整合的展示处理，以及如何生成base64编码，加载显示图标的一整个过程。
 

</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>

专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com </div> 
来源：https://www.cnblogs.com/wuhuacong/p/19093841

頁: [1]

琼殿技术论坛's Archiver

使用PySide6/PyQt6实现系统图标的展示和选择处理