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

Posted 2023-02-16

【中文标题】qml：无法访问滑块组件中的 styleData

【英文标题】：qml: Can not access styleData in slider componet

【发布时间】：2017-04-22 13:55:53

【问题描述】：

我需要滑块的句柄宽度值，但即使我只是从 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”属性下的项目属性

【问题讨论】：

如果我使用 Component.onCompleted 打印出“styleData.handleWidth”，我得到：styleData is not defined

【参考方案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))

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

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"
    

【讨论】：

感谢您的回复，我需要这些信息是因为手柄按钮的内容是动态的，我需要调整其他gui部分以适应变化。