Solved Subproperty not accessible
-
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 aQtObject
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
-
@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 }