Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Calling a function in one qml file which is defined in another qml file.



  • I have my function called

    secondContractionButtonEndPoints();
    

    inside my button.qml file.

    And i want to call this function inside another qml file called Control.qml.

    Here is the code present in my Control.qml file.

                ```
    

    ActionButton {
    id: secondContractionButton
    iconSource: Theme.icons.secondContraction

                    checkable: true
                    checked:   contractionModel ? contractionModel.contractionCount === 2 : false
                    visible:   contractionModel ? contractionModel.supportedContractionCount === 2 : false
    
                    color: checked ? Theme.palette.success : Theme.palette.button
    
                    onCheckedChanged: {
                        if(contractionModel)
                        {
                            if (checked) {
                                if(contractionModel.contractionCount !== 2)
                                    contractionModel.contractionCount = 2;
    
                                    Button.secondContractionButtonEndPoints();
                                }
                                else {
                                    if(contractionModel.contractionCount !== 1)
                                        contractionModel.contractionCount = 1;
                                }
                            }
                        }
                    }
    
    But when i run the code, it is giving following error called ReferenceError: Button is not defined. How can i call a function defined in another qml file into this qml file.


  • Yes, found a way.

    Here is the solution.

    Control.qml file

    signal secondContractionButtonClicked()
    
                    ActionButton {
                        id: secondContractionButton
                        iconSource: Theme.icons.secondContraction
    
                        checkable: true
                        checked:   contractionModel ? contractionModel.contractionCount === 2 : false
                        visible:   contractionModel ? contractionModel.supportedContractionCount === 2 : false
    
                        color: checked ? Theme.palette.success : Theme.palette.button
    
                        onCheckedChanged: {
                            if(contractionModel)
                            {
                                if (checked) {
                                    if(contractionModel.contractionCount !== 2)
                                        contractionModel.contractionCount = 2;
                                        secondContractionButtonClicked();
                                }
                                else {
                                    if(contractionModel.contractionCount !== 1)
                                        contractionModel.contractionCount = 1;
                                }
                            }
                        }
                    }
    

    Inside my Button.qml file

    Connections{
            target: contractionPlayer
            onSecondContractionButtonClicked:{
                secondContractionButtonEndPoints();
            }
        }
    
    function secondContractionButtonEndPoints()
        {
           ..........some stuff
        }
    
    


  • Hi @JennyAug13 ,

    Button.secondContractionButtonEndPoints();
    

    You can't do this,

    if you want to call a function that is defined in a qml component you have to create/instanciate the Component

    note : please don't use Button.qml as component name, because in qml there is already a type called Button

    //MyFucntionButton.qml

    Item{
      function secondContractionButtonEndPoints(){
      console.log("function called")
     }
    }
    
    //main.qml
    MyFunctionButton{
     id:btn
    }
    ...
    Component.onCompleted : btn.secondContractionButtonEndPoints()
    

    You also have possibility to create your function in javascript file and import it to use the functions : http://doc.qt.io/qt-5/qtqml-javascript-imports.html

    Singleton may interest you also : https://wiki.qt.io/Qml_Styling


Log in to reply