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

QML signal and slot between 2 different QML



  • I need to perform some actions in let's say main.qml according to button press in button.qml. Button inside of the button QML is inside of some custom object. Let's give it a name customObject. So customObject in button.qml looks like this:

    customObject {
    id:trialObject
    signal backPagePressed()
    
    Button {
    id:button1
    MultitouchArea {
    onPressed:
    {
       trialObject.backPagePressed()
    }
    

    Now when I press the button, it emits backPagePressed(). My question is: How can I make a slot for this signal in main QML? I'm familiar to signal and slot mechanism in C++, but that does not work for QML. I made something like this in main.qml:

    Loader 
    {
      id:pageLoader
      onBackPagePressed:
    {
      pageLoader.source =""
    }
    }
    

    That part needs to delete the Loader's source so that it will go back to page before. However, I'm not sure about onBackPagePressed: ... How can I connect my signal backPagePressed, to the related part in my loader?


  • Moderators

    @Gunkut

    The use about connections sounds about right :D

    change it to:

    Loader
    {
         id:pageLoader
         anchors.fill:parent
         Connections
    {
         target:pageLoader.item
         onBackPagePressed: {
             console.log("Pressed")
             pageLoader.source =""
        }
    }
    }
    


  • After some trial, I added Connections to the loader. Now loader looks like this:

    Loader
    {
         id:pageLoader
         anchors.fill:parent
         Connections
    {
         target:pageLoader.item
         onBackPagePressed.source =""
    }
    }
    

    But it says QML Connections: Cannot assign to non-existent property "onBackPagePressed"


  • Moderators

    @Gunkut

    The use about connections sounds about right :D

    change it to:

    Loader
    {
         id:pageLoader
         anchors.fill:parent
         Connections
    {
         target:pageLoader.item
         onBackPagePressed: {
             console.log("Pressed")
             pageLoader.source =""
        }
    }
    }
    


  • @J-Hilk Thank your for the answer. It still gives me QML Connections: Cannot assign to non-existent property "onBackPagePressed".


  • Moderators

    @Gunkut can you post the full code from your loader ?



  • @J-Hilk Sure. Here is the code for main.qml (that includes loader).

    Window {
    id:main
    .
    .
    .
    
    
    Loader
    { 
       id:pageLoader
       anchors.fill:parent
       Connections
      {
          target:pageLoader.item
          onBackPagePressed:
     {
         console.log("Pressed back button")
         pageLoader.source=""
    }
    }
    }
    }
    

    And that is the other qml where I emit the signal:

    Item
    {
       Image
     {
        id:kontrol_backButton
        signal backPagePressed()
        MultiTouchArea
         {
           onPressed:
            {
                kontrol_backButton.backPagePressed()
             }
    }
    }
    

  • Moderators

    @Gunkut well
    Image, that has the signal defined, is not the root element. So you'll not get the signal outside of that file.

    move
    signal backPagePressed() to the root item


    main.qml

    import QtQuick 2.12
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    
    ApplicationWindow {
        id: mainWindow
    
        visible: true
        width: 200
        height: 50
    
        Loader{
            id:pageLoader
            anchors.fill: parent
    
            source: "TestFile.qml"
    
            Connections{
                target: pageLoader.item
                onBackPagePressed: {
                    console.log("Pressed")
                    pageLoader.source = ""
                }
            }
        }
    }
    
    

    TestFile.qml

    import QtQuick 2.0
    
    Rectangle {
        color: "blue"
    
        signal backPagePressed()
    
        MouseArea{
            anchors.fill: parent
            onClicked: parent.backPagePressed()
        }
    }
    
    


  • @J-Hilk That solved the error. Thank you :)


Log in to reply