Subproperty not accessible

kshegunov

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.

Kofr

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

kshegunov

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