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。下面的代码来自folibis的第二个解决方案。

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滑块样式，在滑块手柄前后指定不同的凹槽颜色

2 个答案: