如何实现QSlider以中心为基准修改增减页面颜色

QSlider默认样式表仅支持基于滑块到一端（左/上）的区域设置颜色，无法直接实现中心基准的变色逻辑。要达成需求，需通过自定义QSlider子类并重写绘制逻辑实现。

核心逻辑 #

1. 计算滑块数值范围的中心值：centerValue = (minimum() + maximum()) / 2
2. 根据当前滑块值与中心值的关系，确定变色区域：
   • 滑块值 > 中心值：绘制中心到滑块位置的右侧（水平）/下方（垂直）区域
   • 滑块值 < 中心值：绘制滑块位置到中心的左侧（水平）/上方（垂直）区域
   • 滑块值 = 中心值：整个凹槽保持统一底色

具体实现代码 #

#include <QSlider>
#include <QPainter>
#include <QStyleOptionSlider>

class CenterBasedSlider : public QSlider
{
    Q_OBJECT
public:
    explicit CenterBasedSlider(Qt::Orientation orientation, QWidget *parent = nullptr)
        : QSlider(orientation, parent) {}

protected:
    void paintEvent(QPaintEvent *event) override {
        Q_UNUSED(event);
        QPainter painter(this);
        QStyleOptionSlider opt;
        initStyleOption(&opt);

        // 获取凹槽和滑块的区域
        QRect grooveRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderGroove, this);
        QRect handleRect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);

        // 计算中心数值与对应凹槽位置
        int centerValue = (minimum() + maximum()) / 2;
        int currentValue = value();
        int totalRange = maximum() - minimum();

        // 绘制凹槽底色
        painter.setPen(Qt::NoPen);
        painter.setBrush(QColor("#e0e0e0")); // 默认凹槽颜色
        painter.drawRect(grooveRect);

        // 绘制变色区域
        painter.setBrush(QColor("#2196F3")); // 变色区域颜色
        if (orientation() == Qt::Horizontal) {
            int grooveLength = grooveRect.width();
            int centerPos = grooveRect.left() + (centerValue - minimum()) * grooveLength / totalRange;
            int handleCenterX = handleRect.center().x();

            if (currentValue > centerValue) {
                painter.drawRect(QRect(centerPos, grooveRect.top(), handleCenterX - centerPos, grooveRect.height()));
            } else if (currentValue < centerValue) {
                painter.drawRect(QRect(handleCenterX, grooveRect.top(), centerPos - handleCenterX, grooveRect.height()));
            }
        } else {
            int grooveHeight = grooveRect.height();
            int centerPos = grooveRect.bottom() - (centerValue - minimum()) * grooveHeight / totalRange;
            int handleCenterY = handleRect.center().y();

            if (currentValue > centerValue) {
                painter.drawRect(QRect(grooveRect.left(), centerPos, grooveRect.width(), handleCenterY - centerPos));
            } else if (currentValue < centerValue) {
                painter.drawRect(QRect(grooveRect.left(), handleCenterY, grooveRect.width(), centerPos - handleCenterY));
            }
        }

        // 绘制滑块
        style()->drawControl(QStyle::CE_SliderHandle, &opt, &painter, this);
    }
};

优化与扩展 #

• 若需要圆角凹槽，将drawRect替换为drawRoundedRect并设置圆角半径
• 可添加自定义属性（如grooveBaseColor、activeRangeColor），实现动态修改颜色无需改动代码
• 即使滑块范围非对称（如0到200），中心值仍对应数值中点，视觉上会对齐凹槽中点

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