Question

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

我得到以下输出：

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

也可以有一个分块渐变 - 就像这个进度条一样？

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;
}

video tutorial

摘要：使用渐变设置groove样式并跳过add-page背景色。

对于第二个问题，::chunk无效，因此我认为它无法使用默认。随意实现自己的类，它可以处理块。

QSlider具有绝对和分块渐变

1 个答案: