Qml滑块样式，滑块手柄前后分配不同的凹槽颜色

Question

所以我想创建一个滑块样式，类似于默认样式，也更符合我的应用程序样式，但我发现很难在滑块手柄前后分配不同的颜色。

这是我的代码的简化版本，没有渐变、锚点和其他属性：

Slider{
            id: widthSlider
            style: SliderStyle {
                    groove: Rectangle {
                        height: widthSlider.height*0.17
                        width: widthSlider.width
                        color: "black"
                        radius: 8
                    }
                    handle: Rectangle {
                        color: "grey"
                    }
                }
        }

我尝试了一个粗略的解决方法，将两个矩形放在滑块中，固定在手柄位置，如下所示：

Slider{
            id: widthSlider
            Rectangle {
                anchors.left: widthSlider.left
                anchors.right: widthSlider.__handlePos
                color: "black"
            }
            Rectangle {
                anchors.left: widthSlider.__handlePos
                anchors.right: widthSlider.right
                color: "white"
            }
     ...
}

但我无法定位到手柄的位置，因为它只是一个双精度（我收到错误：无法将双精度分配给 QQuickAnchorLine）。

有人知道我如何在 Qml 中执行此操作吗？

Answer 1

是这样的吗？

Slider {
    anchors.centerIn: parent
    value: 0.5
    width: 400
    style: SliderStyle {
        groove: Item {
            implicitHeight: 10
            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, control.height / 2)
                end: Qt.point(control.width, control.height / 2)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "orange" }
                    GradientStop { position: control.value; color: "brown" }
                    GradientStop { position: 1.0; color: "orange" }
                }
            }
        }
    }
}

或者：

Slider {
    anchors.centerIn: parent
    value: 0.5
    width: 400
    style: SliderStyle {
        groove: Rectangle {
            implicitHeight: 10
            color: "lightgrey"
            border {
                color: "#999"
                width: 1
            }
            Rectangle {
                implicitHeight: 10
                color: "orange"
                implicitWidth: control.value * parent.width
                border {
                    color: "#999"
                    width: 1
                }
            }
        }
    }
}

Answer 2

我意识到这是一个老问题。但是，为了将来参考，表示句柄前颜色的 Rectangle 的宽度应为 styleData.handlePosition。下面的代码来自具有此更改的第二个解决方案。

Slider {
        anchors.centerIn: parent
        value: 0.5
        width: 400
        style: SliderStyle {
            groove: Rectangle {
                implicitHeight: 10
                color: "lightgrey"
                border {
                    color: "#999"
                    width: 1
                }
                Rectangle {
                    implicitHeight: 10
                    color: "orange"
                    implicitWidth: styleData.handlePosition
                    border {
                        color: "#999"
                        width: 1
                    }
                }
            }
        }
    }

Qml滑块样式，滑块手柄前后分配不同的凹槽颜色

Qml slider style, assigning different groove color before and after the slider's handle

qt

slider

qml

qtquick2

qtquickcontrols