具有绝对梯度和分块梯度的 QSlider答案

【问题标题】：QSlider with absolute and chunked gradient具有绝对梯度和分块梯度的 QSlider
【发布时间】：2016-11-20 02:22:41
【问题描述】：

我正在尝试在滑块的 QSlider::add-page 部分中制作一个具有绝对渐变和分块样式的 QSlider。

以下样式表代码：

QSlider::groove:vertical {
    background: #021017;
    BORDER-radius: 5px;
    position: absolute;
    left: 10px;
    right: 10px;
}
QSlider::handle:vertical {
    height: 10px;
    background: #0b1707;
    border: 1px solid #46992b;
    margin: 0px -10px;
    /* expand outside the groove */

    border-radius: 5px;
}
QSlider::add-page:vertical {
    BORDER-radius: 5px;
    border: 1px solid #0e566d;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
}
QSlider::sub-page:vertical {
    background: #021017;
    BORDER-radius: 5px;
    border: 1px solid #0e566d;
    margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
    background-color: #46992b;
}

我得到以下输出：

但是当我移动手柄时，渐变会根据滑块底部到手柄的高度而变化。我希望渐变基于从滑块底部到顶部的高度。这意味着改变手柄位置不会改变它的外观。

还有可能有一个分块的渐变——比如这个进度条？

【问题讨论】：

为什么边框要大写？与其余部分保持一致时没有不同的效果。
哈哈。大写锁定...和懒惰...没有充分的理由。

标签： c++ css qt

【解决方案1】：

对于第一个问题：是的，有可能。我调整了您提供的样式表（未注释的内容，您会注意到它们）：

QSlider::groove:vertical {
    width: 10px;
    /* background: #021017;*/
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);
    border-radius: 5px;
    position: absolute;
    left: 10px;
    right: 10px;
}
QSlider::handle:vertical {
    height: 10px;
    background: #0b1707;
    border: 1px solid #46992b;
    margin: 0px -10px;
    /* expand outside the groove */

    border-radius: 5px;
}
QSlider::add-page:vertical {
    border-radius: 5px;
    border: 1px solid #0e566d;
    /*background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #46992b, stop: 0.5 #0e566d, stop: 1 #d16a4b);*/
}
QSlider::sub-page:vertical {
    background: #021017;
    border-radius: 5px;
    border: 1px solid #0e566d;
    margin: 0px 1px 0px 1px;
}
QSlider::handle:vertical:hover {
    background-color: #46992b;
}

总结： 使用渐变为groove 设置样式，并跳过add-page 背景颜色。

对于第二个问题，::chunk 不起作用，所以 我认为它不适用于默认 QSlider。随意实现自己的类，它可以处理块。

【讨论】：