qml: Can not access styleData in slider componet

Question

I need the value of slider's handle width, but even if I just copy the example code from Qt document, the debugger still tell me:

Cannot read property 'handleWidth' of null

What did I do wrong?

My code as below

import QtQuick 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4

Slider {
    anchors.centerIn: parent

    style: SliderStyle {
        groove: Rectangle {
            implicitWidth: 200
            implicitHeight: 8
            color: "gray"
            radius: 8
        }
        handle: Rectangle {
            anchors.centerIn: parent
            color: control.pressed ? "white" : "lightgray"
            border.color: "gray"
            border.width: 2
            implicitWidth: 34
            implicitHeight: 34
            radius: 12

            Text{
                text:"test"
                anchors.right:parent.right
                anchors.rightMargin:  styleData.handleWidth * 0.3
            }
        }
    }
}

UPDATE: I found a workaround in the end. Use state and propertychange will allow us to change the item's properties under the "handle" property from slider level

Answer 1

It's not a public property, as it's not documented.

Here's the relevant source:

Loader {
    id: grooveLoader
    property QtObject styleData: QtObject {
        readonly property int handlePosition: handleLoader.x + handleLoader.width/2
    }
    x: padding.left
    sourceComponent: groove
    width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
    y:  Math.round(padding.top + (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2)
}
Loader {
    id: tickMarkLoader
    anchors.fill: parent
    sourceComponent: control.tickmarksEnabled ? tickmarks : null
    property QtObject styleData: QtObject { readonly property int handleWidth: control.__panel.handleWidth }
}
Loader {
    id: handleLoader
    sourceComponent: handle
    anchors.verticalCenter: grooveLoader.verticalCenter
    x: Math.round((control.__handlePos - control.minimumValue) / (control.maximumValue - control.minimumValue) * ((horizontal ? root.width : root.height) - item.width))
}

Notice that there's no styleData object declared for handleLoader.

The handle delegate determines the size of the slider's handle, so you're free to give it a value. As an example, see the Base style's implementation of the handle:

property Component handle: Item{
    implicitWidth:  implicitHeight
    implicitHeight: TextSingleton.implicitHeight * 1.2

    FastGlow {
        source: handle
        anchors.fill: parent
        anchors.bottomMargin: -1
        anchors.topMargin: 1
        smooth: true
        color: "#11000000"
        spread: 0.8
        transparentBorder: true
        blur: 0.1

    }
    Rectangle {
        id: handle
        anchors.fill: parent

        radius: width/2
        gradient: Gradient {
            GradientStop { color: control.pressed ? "#e0e0e0" : "#fff" ; position: 1 }
            GradientStop { color: "#eee" ; position: 0 }
        }
        Rectangle {
            anchors.fill: parent
            anchors.margins: 1
            radius: width/2
            border.color: "#99ffffff"
            color: control.activeFocus ? "#224f7fbf" : "transparent"
        }
        border.color: control.activeFocus ? "#47b" : "#777"
    }
}