c++ - 具有绝对梯度和分块梯度的 QSlider

Question

我正在尝试在 slider 的 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;
}

我得到以下输出:

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

还有可能有一个分块渐变——就像这个进度条一样吗？

Answer 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 .随意实现您自己的类，它可以处理 block 。