How to access item's properties under a property

qtLove

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.

ambershark

@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.

qtLove

@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?

ambershark

@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.

qtLove

@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

ambershark

@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 { }.