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

How to implement Interaction between two QML Files?



  • OnLeftDockerExpand can respond to the leftDockerExpand signal from sendId in QML.

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    
    Item{
         id:sendId
          signal leftDockerExpand
          Rectangle{
                   id:rctId 
                   anchors.fill:parent
    
                   MouseArea {
                           anchors.fill: parent
                           acceptedButtons: Qt.LeftButton | Qt.RightButton
                   
                           onClicked: {           
                               if (mouse.button == Qt.RightButton){
                                       sendId.leftDockerExpand()                                
                              }
                        }
                }
          }
    }
    
    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Layouts 1.1
    
    Item{
         id:recvId
         OnLeftDockerExpand{
                   console.log("sendId")
          }
    }
    


  • hi
    @mirro said in How to implement Interaction between two QML Files?:

    How to implement Interaction between two QML Files?

    You don't implement interaction between files but between Componets/objects.
    In a QML (.qml) file you describe a Component

    // QmlComponent_A.qml
    Item {
        signal mySignal()
    
        Button{
            text: "emit signal"
            onClicked: mySignal()
        }
    }
    
    
    // QmlComponent_B.qml
    import QtQuick 2.12
    
    Item {
     function react(){
        console.log("reaction")
     }
    }
    
    

    Then create the component, and implement the interaction, for example with Connections type

    //main.qml
    Window {
        id: appWindow
        width: 512
        height: 512
        visible: true
    
        Connections{
            target: a
            function onMySignal(){
                b.react()
            }
        }
    
        QmlComponent_A{
            id:a
        }
    
        QmlComponent_B{
            id:b
        }
    
    }
    
    

    https://doc.qt.io/qt-5/qml-tutorial2.html


  • Qt Champions 2018

    Note that the Connections in the last example is not needed here. It is only needed when you want to react to an object's signal in a different context that its instantiation.

    Here you could do:

    QmlComponent_A{
        onMySignal: b.react()
    }
    
    QmlComponent_B{
        id:b
    }

Log in to reply