QML: ne peut pas accéder StyleData à curseur componet

Question

J'ai besoin de la valeur de la largeur de la poignée de curseur, mais même si je viens de copier le code exemple du document Qt, le débogueur me dis encore:

Impossible de lire la propriété ' handleWidth 'of null

Qu'est-ce que j'ai fait de mal?

Mon code comme ci-dessous

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

MISE À JOUR: J'ai trouvé une solution à la fin. Utilisez state et propertychange nous permettra de modifier les propriétés de l'élément sous la propriété "handle" du niveau curseur

Answer 1

Ce n'est pas une propriété publique, car il s'agit de 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)) 
} 

avis qu'il n'y a pas d'objet styleData déclaré pour handleLoader.

Le délégué handle détermine la taille de la poignée du curseur, vous pouvez donc lui donner une valeur. À titre d'exemple, voir le Base style's implementation de la poignée:

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