Solved Custom QML Button Template: inheriting JS function when clicked. How?
-
Hello all!
I am developing template button something like this:Item { property string iconSource: "qrc:/images/icons/noIcon.svg"; ** **property var onClickedFunction: {some functions on JS}** ** signal clicked; id: root; Rectangle { id: background; color: "white"; anchors.verticalCenter: root.verticalCenter; anchors.right: root.right; } Image { property real size: background.height * 0.55; id: icon; source: root.iconSource; anchors.verticalCenter: background.verticalCenter; anchors.right: background.right; anchors.rightMargin: background.radius * 1.7; } MouseArea { function buttonOnReleased() { console.log("OnReleased") } id: mouseArea; anchors.fill: parent; onPressed: { console.log("OnPressed") } onReleased: { console.log("OnReleased") } onCanceled: { console.log("OnCanceled"); } onClicked: { ** **root.onClickedFunction();** ** root.clicked(); } } }
The question is - how to add function to the root component (in this case Item) that will be performed like a part of onClicked() that is called from MouseArea component??? And add this function from the Custom Button component that going to be based on this template???
-
Solution found.
The custom button component should have the function that will be called from template. In the template it's only mentioning like stub (something that will not affect whole application - might be log-message). If you will not be defining this function in custom component, the default function will be performed.CustomButton.qml
CustomButton { function fOnClicked() { console.log("CustomButton: fOnClicked"); } }
ButttomTemplate.qml
Item { id: root; function fOnClicked() { console.log("Root/Default: fOnClicked"); } ... MouseArea { id: mouseArea; ... onClicked: { ... fOnClicked(); ... } } }
-
Hi @bogong , i dont know why you are using JS function,but there is also something called as signals in QML.
Here is a sample code,please have a look:-
CustomButton.qml
Rectangle { id: root anchors.fill: parent color: "grey" signal buttonClicked(); MouseArea { anchors.fill: parent onClicked: { root.buttonClicked() } } }
main.qml
CustomButton { anchors.fill: parent onButtonClicked: { console.log("Clicked") } }