PyQt6中使用QSS后QSlider滑块手柄不可见的问题求助

问题背景 #

自定义继承自QSlider的VideoProgressSlider类，通过QSS修改滑块样式后，滑块手柄无法显示。自定义类代码如下：

import os
from PyQt5.QtWidgets import QSlider
from PyQt5.QtCore import Qt, QMouseEvent

class VideoProgressSlider(QSlider):
    def __init__(self, orientation: Qt.Orientation = Qt.Orientation.Horizontal):
        super().__init__(orientation)
        self.__initUI()

    def __initUI(self):
        self.setMinimumHeight(100)
        self.setStyleSheet(f'''
            QSlider::groove:horizontal {{ 
                height: 12px; 
                left: 0px; 
                right: 0px; 
                border:0px;    
                border-radius:6px;
                background:rgba(0,0,0,50);
             }} 
             QSlider::handle:horizontal{{ 
                width: 8px;
                height: 16px;
                margin-top: -8px; 
                margin-left: 1px; 
                margin-bottom: -8px; 
                margin-right: 1px;
                border-image: {os.path.join('../../Resources', "circle.png")};
                border: 8px solid;
            }} 
            QSlider::sub-page:horizontal{{
                border:0px;    
                border-radius:6px;
                background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #12b9ff, stop: 1.0 #015eea);
            }}
        ''')

    def mousePressEvent(self, event: QMouseEvent) -> None:
        # 点击跳转逻辑（省略）
        pass

效果截图：

已尝试的border-image写法均无效：

• border-image: {os.path.join('../../Resources', "circle.png")};
• border-image: url({os.path.join('../../Resources', "circle.png")});
• border-image: url(:/{os.path.join('../../Resources', "circle.png")});
• 使用绝对路径

项目目录结构：

D:\...\CODE\GUI
│  ...
│
├─Dev
│  ├─Login
│  │    ...
│  │
│  ├─Modules
│  │    ...
│  │
│  ├─MyWidgets
│  │    MyMediaPlayWidget.py
│  │    VideoProgressSlider.py
│  │    ...
│  │
│  └─Utils
│       ...
│ 
└─Resources
      circle.png
      ...

问题分析 #

1. QSS属性冲突与渲染问题：border-image和border:8px solid同时设置会导致图片被边框覆盖，且border-image默认需要切片参数，不适合简单图标；
2. 路径解析错误：Qt的相对路径基于运行时工作目录，而非脚本文件所在目录，导致资源无法加载；
3. 尺寸与偏移错误：margin-top:-8px让手柄向上偏移过多，超出滑块可视区域。

解决方案 #

1. 修复QSS手柄样式，改用image属性 #

将手柄的QSS代码修改为以下内容，使用image属性替代border-image（更适合单图标），并调整尺寸和偏移：

def __initUI(self):
    self.setMinimumHeight(100)
    # 获取脚本所在绝对路径，拼接资源路径
    script_dir = os.path.dirname(os.path.abspath(__file__))
    resource_path = os.path.join(script_dir, '../../Resources/circle.png').replace('\\', '/')
    
    self.setStyleSheet(f'''
        QSlider::groove:horizontal {{ 
            height: 12px; 
            left: 0px; 
            right: 0px; 
            border:0px;    
            border-radius:6px;
            background:rgba(0,0,0,50);
         }} 
         QSlider::handle:horizontal{{ 
            width: 16px;  /* 和circle.png尺寸一致 */
            height: 16px;
            margin-top: -2px;  /* 垂直居中轨道：(16-12)/2=2，取负偏移 */
            margin-bottom: -2px;
            image: url("{resource_path}");  /* 使用绝对路径确保加载 */
            border: none;  /* 去掉边框避免覆盖图片 */
        }} 
        QSlider::sub-page:horizontal{{
            border:0px;    
            border-radius:6px;
            background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #12b9ff, stop: 1.0 #015eea);
        }}
    ''')

2. 推荐使用Qt资源系统（更可靠） #

创建resources.qrc文件，将资源加入：

<RCC>
    <qresource prefix="/">
        <file>Resources/circle.png</file>
    </qresource>
</RCC>

使用pyrcc5编译为Python模块：

pyrcc5 resources.qrc -o resources_rc.py

在脚本中导入并使用资源路径：

import resources_rc

# QSS中直接使用资源路径
image: url(:/Resources/circle.png);

3. 验证路径有效性 #

在代码中加入路径验证，确保资源存在：

resource_path = os.path.join(script_dir, '../../Resources/circle.png')
assert os.path.exists(resource_path), f"资源不存在：{resource_path}"

内容的提问来源于stack exchange，提问作者x0rb64