qml:无法访问滑块组件中的样式数据

Question

我需要滑块手柄宽度的值，但即使我只是从Qt文档中复制示例代码，调试器仍然告诉我：

无法读取空的属性"句柄宽度">

我做错了什么？

我的代码如下

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

更新： 我最终找到了解决方法。 使用状态和属性更改将允许我们从滑块级别更改"句柄"属性下的项目属性

Answer 1

它不是公共属性，因为它没有记录。

以下是相关来源：

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

请注意，没有为handleLoader声明styleData对象。

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