Qt如何自定义滑动条

下面是Qt自定义滑动条的完整攻略，包括两条示例说明。

1. 什么是Qt滑动条？

Qt滑动条是一种基本的用户界面控件，通常用于设置数值范围或滚动浏览内容。它基于QWidget类，并提供了许多自定义选项，如最小值、最大值、当前值、步进值和方向等。

2. 怎样自定义Qt滑动条？

要自定义Qt滑动条，你可以继承QAbstractSlider类并覆盖它的虚函数。下面的示例说明了如何创建一个自定义滑动条控件。

2.1 示例1：自定义Qt滑动条的背景和针

class CustomSlider : public QAbstractSlider
{
    Q_OBJECT

public:
    CustomSlider(QWidget *parent = nullptr);

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    int m_value;
};

CustomSlider::CustomSlider(QWidget *parent)
    : QAbstractSlider(parent), m_value(0)
{
}

void CustomSlider::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QRect bgRect = rect().adjusted(0, height() / 3, 0, -height() / 3);
    painter.fillRect(bgRect, QColor(230, 230, 230));

    QRect valueRect = bgRect;
    valueRect.setRight(valueRect.left() + ((double)value() / maximum() * bgRect.width()));
    painter.fillRect(valueRect, palette().highlight());

    painter.setPen(Qt::NoPen);
    painter.setBrush(palette().shadow());
    painter.drawEllipse(valueRect.center(), width() / 6, height() / 2);
}

在上述示例代码中，我们继承了QAbstractSlider类，并覆盖了它的paintEvent()函数。通过使用QPainter类，我们绘制了一个灰色的背景，用高亮颜色填充了值所占用的百分比，最后用阴影颜色画了一个针。通过设置rect()，我们调整了滑动条的位置和大小。此外，我们重载了QAbstractSlider的构造函数，并初始化了m_value的值。

2.2 示例2：自定义Qt滑动条的样式和动画

class CustomSlider : public QSlider
{
    Q_OBJECT

public:
    CustomSlider(QWidget *parent = nullptr);

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    QLinearGradient m_gradient;
    qreal m_knobPos;
};

CustomSlider::CustomSlider(QWidget *parent)
    : QSlider(parent), m_gradient(QPointF(0, 0), QPointF(1, 0)), m_knobPos(0)
{
    setStyleSheet("QSlider::groove:horizontal {"
                  "border: none;"
                  "height: 12px;"
                  "margin: 4px 0;"
                  "background-color: #e0e0e0;"
                  "border-radius: 6px;"
                  "}"
                  "QSlider::handle:horizontal {"
                  "border: none;"
                  "width: 24px;"
                  "height: 24px;"
                  "background-color: white;"
                  "border-radius: 12px;"
                  "margin-top: -6px;"
                  "}"
                  "QSlider::handle:horizontal:hover {"
                  "background-color: #f0f0f0;"
                  "}"
                  "QSlider::sub-page:horizontal {"
                  "background: qlineargradient("
                  "x1:0, y1:0, x2:1, y2:0,"
                  "stop:0 #45a0a2, stop:1 #66cc66);"
                  "height: 12px;"
                  "border-radius: 6px;"
                  "}"
                  );

    connect(this, &QSlider::valueChanged, [this](int value) {
        QPropertyAnimation *anim = new QPropertyAnimation(this, "m_knobPos");
        anim->setStartValue(m_knobPos);
        anim->setEndValue((double)value / maximum() * width());
        anim->setDuration(300);
        anim->setEasingCurve(QEasingCurve::OutQuad);
        anim->start(QAbstractAnimation::DeleteWhenStopped);
    });
}

void CustomSlider::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    QRectF grooveRect(QPointF(0, (height() - 8) / 2), QSizeF(width(), 8));
    QRectF handleRect(QPointF(m_knobPos - 12, (height() - 24) / 2), QSizeF(24, 24));

    m_gradient.setColorAt(0, QColor(0, 170, 170));
    m_gradient.setColorAt(1, QColor(102, 204, 102));

    painter.fillRect(grooveRect, m_gradient);
    painter.setCompositionMode(QPainter::CompositionMode_Plus);
    painter.setBrush(QColor(0, 255, 255, 64));
    painter.drawEllipse(handleRect);

    painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
    painter.setPen(QColor(255, 255, 255));
    painter.setFont(QFont("Arial", 10));
    painter.drawText(grooveRect, Qt::AlignCenter, QString::number(value()));
}

Q_PROPERTY(qreal knobPos READ knobPos WRITE setKnobPos)

qreal CustomSlider::knobPos() const
{
    return m_knobPos;
}

void CustomSlider::setKnobPos(qreal pos)
{
    m_knobPos = pos;
    update();
}

在此示例中，我们继承了QSlider类，并覆盖了它的paintEvent()函数。我们使用QPainter类和QLinearGradient类来绘制滑动条的样式和颜色。我们还为滑动条的部件设置了一个样式表。通过使用QPropertyAnimation类，我们实现了滑动条针头的动画效果。在knobPos()函数和setKnobPos()函数中，我们使用了Q_PROPERTY宏来声明了一个动画属性，以便在动画过程中同步更新参数。最后，我们重载了QSlider的构造函数，并初始化了m_gradient和m_knobPos的值。

3. 总结

以上是自定义Qt滑动条的两个示例。通过继承QAbstractSlider或QSlider类，并覆盖相关虚函数，你可以自由地定义Qt滑动条的外观和行为。为了更好地操作和控制，建议在自定义滑动条的过程中要使用QPainter 良好的函数处理方法，并使用 QCss 自定义样式表的方式，精细调整控件样式和动态效果。