How to implement Interaction between two QML Files?

mirro

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")
      }
}

ODБOï

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

GrecKo

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
}