How to access item's properties under a property



  • Hi
    I am making my own slider, so I use the SliderStlye to customize it.
    How do I access ex: the width or radius of the component I use in handle property
    or
    the rec. color of the rectangle for the groove property of the SliderStyle under the style property of the Slider ?

    My code as below:

    import QtQuick 2.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 1.4
    
    Slider {
        id:slider
        orientation: Qt.Vertical
        height: parent.height
    // I try to use myHandleButton.radius  but it did not work,  debugger didnt recognize myHandleButton
        style: SliderStyle
        {
            groove:
                Rectangle
                {  id: rec
                    implicitWidth:parent.height
                    implicitHeight: 1
                    color: "gray"
                }
            handle:
                MyHandleButton
                {
                    id:myHandleButton
                    // radius and other properties I hope to access from slider level
                }
        }
    }
    

    [ambershark]: added code tags.


  • Moderators

    @qtLove I'm a bit confused as to what you want.. What is MyHandleButton and where is it in relation to your Slider?

    Normally to access properties that are underneath the level you have access to you would declare them like property alias radius: slider.radius but I think that I'm misunderstanding what you are trying to accomplish.

    My guess is you need to expose the slider radius property inside your slider which I'm assuming is the base object for MyHandleButton, then you can just access it with myHandleButton.radius.



  • @ambershark

    Hi thanks for your reply, the MyHandleButton is my own component for replacing the normal rectangle handle for the slider.

    My guess is you need to expose the slider radius property inside your slider which I'm assuming is the base object for MyHandleButton, then you can just access it with myHandleButton.radius

    Not sure what do you mean here, My goal is expose the radius property in the myHandleButton to the slider level, that is true and I tried to use
    myHandleButton.radius in the slider level but the debugger just said myHandleButton is undefined. I guess that is because the myHandleButton is too deep as below:

    Slider{
       style:  SliderStyle{                            
                        handle: MyHandleButton{
                                               radius
                                       }
                     }
    }
    

    I will summarize my question .. how to expose properties of an item which is a property of other items?


  • Moderators

    @qtLove Oh ok that's one is easy then. So it would basically look like this:

    Slider {
       id: slide
       property alias hbRadius : mhb.radius
       
       style: SliderStyle {
             handle: MyHandleButton {
                   id: mhb
                }
          }
    }
    

    Now you can use slide.hbRadius to access MyHandleButton's radius.



  • @ambershark

    I actually have tried this, but it did not work. I got : " component is not ready "

    If I use property int hdRadius : mhb.radius, I got: ReferenceError: mhb is not defined


  • Moderators

    @qtLove Oops, ok I should have noticed it was in a Component. You can't link directly to properties in a component since they aren't loaded in time (this reason may not be correct, it's my assumption, I'm new to QML too).

    So the way to do this is to add a property to your root item that the component item inherits, like so:

    TestSlider.qml:

    import QtQuick 2.4 
    import QtQuick.Controls.Styles 1.4 
    import QtQuick.Controls 1.4 
    
    Slider {
        id:slider
        orientation: Qt.Vertical
        height: parent.height
        
        property var myRad : 8 
        property var myColor: "blue"
    
        property Component myHandleComp: Rectangle {
                                                radius: slider.myRad
                                                width: 20
                                                height: 20
                                                color: slider.myColor
                                            }   
    
        style: SliderStyle
        {   
            id: ss
            groove:
                Rectangle
                {  id: rec 
                    implicitWidth:parent.height
                    implicitHeight: 1
                    color: "gray"
                }   
            handle: myHandleComp
        }   
    }
    

    main.qml:

    import QtQuick 2.4 
    import QtQuick.Controls 1.4
    
    Rectangle
    {
        width: 600
        height: 600
        color: "green"
        
        TestSlider { 
            anchors.centerIn: parent
            myColor: "red"
        }
    }   
    

    That allows me to set the color and radius without using an alias into a non-created component item. Note: I broke it out into it's own property Component during some testing I was doing, you do not need to do this. You can just put it straight into handle: YourItem { }.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.