Subproperty not accessible


  • Qt Champions 2016

    Hello!
    Being green as grass, I am experimenting with QML and QuickControls 2 ... so I decided to "customize" the available tool button to display an image and text under it. So far so good. I was able to do what I want, but extending my component I stumbled on some very strange behavior, I can't access properties of a QtObject I use as property I've declared in my component. Here's the whole code:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    Item {
        id: root
        width: button.width + padding.left + padding.right
        height: button.height + padding.top + padding.bottom
    
        signal clicked()
    
        property alias text: buttonText.text
        property alias image: buttonImage
    
        property QtObject padding: QtObject {
            property int left: 0
            property int right: 0
            property int top: 0
            property int bottom: 0
        }
    
        ToolButton {
            id: button
    
            anchors.fill: parent
            anchors.leftMargin: padding.left
            anchors.topMargin: padding.top
            anchors.rightMargin: padding.right
            anchors.bottomMargin: padding.bottom
    
            width: indicator.width
            height: indicator.height
    
            indicator: Item {
                width: buttonImage.width > buttonText.contentWidth ? buttonImage.width : buttonText.contentWidth
                height: buttonImage.height + buttonText.contentHeight
    
                Image {
                    id: buttonImage
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.leftMargin: buttonText.contentWidth > width ? (buttonText.contentWidth - width) / 2 : 0
                    anchors.right: parent.right
                    anchors.rightMargin: anchors.leftMargin
                }
    
                Text {
                    id: buttonText
                    anchors.top: buttonImage.bottom
                    anchors.left: parent.left
                    anchors.leftMargin: buttonImage.width > contentWidth ? (buttonImage.width - contentWidth) / 2 : 0
                    anchors.right: parent.right
                    anchors.rightMargin: anchors.leftMargin
                    anchors.bottom: parent.bottom
                }
            }
    
            onClicked: parent.clicked()
        }
    }
    

    I can then create my tool buttons, but I get a "Cannot assign to non-existent property ..." error when I try to touch the padding property's properties, like this:

    MyToolButton {
        text: qsTr("Button text")
        image.source: "qrc:/my/image/path"
        image.height: 32
        image.width: 32
        // Problematic part:
        padding.left: 5
        padding.right: 5
        padding.top: 5
        padding.bottom: 10
    }
    

    What am I missing here? It's strange as the image property works without issue whatsoever ...
    Thanks in advance.

    Kind regards.



  • you have not declared padding

    try smth like

    property var padding : {left:0, right:0, top:0, bottom:0} 
    

    however it is strange behavior with QtObject


  • Qt Champions 2016

    @Kofr
    Maybe you're right, but I blame my incompetence for the problem. Finally, after reading a bit in the documentation, I just reworked the code and I don't have the problem anymore.

    Here's the much better working (and much shorter) tool button:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    
    ToolButton {
        id: root
    
        property alias image: buttonImage
    
        contentItem: Item {
            Image {
                id: buttonImage
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                opacity: root.enabled ? 1.0 : 0.3
            }
    
            Text {
                id: buttonText
    
                text: root.text
                font: root.font
    
                anchors.horizontalCenter: buttonImage.horizontalCenter
                anchors.top: buttonImage.bottom
                anchors.topMargin: root.spacing
    
                opacity: root.enabled ? 1.0 : 0.3
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideRight
            }
        }
    
        background.implicitWidth: Math.max(buttonImage.width, buttonText.contentWidth) + leftPadding + rightPadding + buttonText.anchors.topMargin
        background.implicitHeight: buttonImage.height + buttonText.contentHeight + topPadding + bottomPadding
    }
    

Log in to reply
 

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