Qt中如何实现带有圆形空心手柄的滑动条

Qt支持两种主流实现方式，可根据业务需求选择：

• 方案1：使用QSS样式表实现（轻量化方案）
  无需修改控件逻辑，直接为QSlider设置样式即可，示例样式代码如下：

  /* 水平滑动条空心手柄样式 */
  QSlider::handle:horizontal {
      background: transparent;
      border: 2px solid #2196F3;
      width: 16px;
      margin: -8px 0; /* 调整偏移量保证手柄与轨道垂直居中 */
      border-radius: 8px; /* 圆角值设为宽度的1/2即可得到正圆形 */
  }
  /* 滑动条未选中轨道样式 */
  QSlider::groove:horizontal {
      height: 2px;
      background: #e0e0e0;
  }
  /* 滑动条已选中轨道样式 */
  QSlider::sub-page:horizontal {
      background: #2196F3;
  }
  

  该方案适配速度快，适合无特殊自定义交互需求的场景。
• 方案2：自定义QSlider子类重写绘制逻辑（高自由度方案）
  如果需要额外扩展效果（如手柄点击动效、多状态样式切换），可以继承QSlider重写paintEvent方法实现，核心绘制代码示例如下：

  // 头文件中先定义handleSize成员变量，示例值设为16
  void CustomSlider::paintEvent(QPaintEvent *event)
  {
      // 先调用父类绘制方法完成轨道基础绘制
      QSlider::paintEvent(event);
      QPainter painter(this);
      painter.setRenderHint(QPainter::Antialiasing);
      // 计算手柄当前的x轴坐标
      int handlePosX = value() * (width() - handleSize) / (maximum() - minimum());
      // 配置画笔绘制空心圆形
      painter.setPen(QPen(QColor("#2196F3"), 2));
      painter.setBrush(Qt::NoBrush);
      painter.drawEllipse(handlePosX, height()/2 - handleSize/2, handleSize, handleSize);
  }
  

  如需支持手柄拖拽交互，还需要同步重写mousePressEvent、mouseMoveEvent、mouseReleaseEvent三个方法，判断点击区域是否落入手柄范围后更新滑动条数值即可。

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