Qt中的自定义圆形进度条

Question

我能够在 qt 中执行圆形进度条，同时覆盖小部件的 paintEvent 并绘制圆形进度条，但在主圆形进度条后面的第二个圆形进度条（无法像这样绘制）有困难：

有人可以指导我吗？先谢谢了。

Answer 1

我看不出这里有什么问题，您可以使用QPainterPath 并为其添加完整或部分圆弧路径，然后使用Qt::DotLine 样式通过QPen 绘制路径。

如果股票虚线不适合您，可以选择specify a custom pattern via：

void QPen::setDashPattern(const QVector<qreal> & pattern)

---

这是一个简单的示例，如下所示：

class CPBar : public QWidget {
    Q_OBJECT
    qreal p; // progress 0.0 to 1.0
  public:
    CPBar(QWidget * p = 0) : QWidget(p), p(0) {
      setMinimumSize(208, 208);
    }
    void upd(qreal pp) {
      if (p == pp) return;
      p = pp;
      update();
    }
  void paintEvent(QPaintEvent *) {
    qreal pd = p * 360;
    qreal rd = 360 - pd;
    QPainter p(this);
    p.fillRect(rect(), Qt::white);
    p.translate(4, 4);
    p.setRenderHint(QPainter::Antialiasing);
    QPainterPath path, path2;
    path.moveTo(100, 0);
    path.arcTo(QRectF(0, 0, 200, 200), 90, -pd);
    QPen pen, pen2;
    pen.setCapStyle(Qt::FlatCap);
    pen.setColor(QColor("#30b7e0"));
    pen.setWidth(8);
    p.strokePath(path, pen);
    path2.moveTo(100, 0);
    pen2.setWidth(8);
    pen2.setColor(QColor("#d7d7d7"));
    pen2.setCapStyle(Qt::FlatCap);
    pen2.setDashPattern(QVector<qreal>{0.5, 1.105});
    path2.arcTo(QRectF(0, 0, 200, 200), 90, rd);
    pen2.setDashOffset(2.2);
    p.strokePath(path2, pen2);
  }  
};

class Test : public QWidget {
    Q_OBJECT
  public:
    Test() {
      QVBoxLayout * l = new QVBoxLayout(this);
      CPBar * p = new CPBar;
      QSlider * s = new QSlider(Qt::Horizontal, this);
      s->setMinimum(0);
      s->setMaximum(100);
      l->addWidget(p);
      l->addWidget(s);
      setLayout(l);
      connect(s, &QSlider::valueChanged, [=](){ p->upd((qreal)s->value() / s->maximum());});
    }
};