Question

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

无法读取null的属性'handleWidth'

我做错了什么？

我的代码如下

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

更新：我最终找到了一个解决方法。使用state和propertychange将允许我们从滑块级别“handle”属性下更改项目的属性

Answer 1

这不是公共财产，因为它是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))
}

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

handle委托确定滑块手柄的大小，因此您可以自由地为其赋值。例如，请参阅句柄的Base style's implementation：

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

qml：无法访问滑块组件中的styleData

1 个答案: