qml信号和槽

目录结构：

// Main.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Component.onCompleted: {
        print("Window onCompleted")
    }
    Component.onDestruction: {
        print("Window onDestruction")
    }

    Rectangle {
        Component.onCompleted: {
            print("Rectangle onCompleted")
        }
        Component.onDestruction: {
            print("Rectangle onDestruction")
        }
    }

    property Item myItem: Item {
        Component.onCompleted: {
           print("Item onCompleted")
        }
        Component.onDestruction: {
            print("Item onCompleted")
        }
    }

    Button {
        text: "test signal"
        onClicked: {
            print("Button clicked")
        }
        onPressedChanged: {
            print("Button pressed changed")
        }
    }

    // 自定义信号
    //signal <name>[([<type> <parameter name>[, ...]])]
    //接收信号通知，定义一个名为on<Signal> 函数，其中<Signal>是信号的名称，第一个字母大写
    Button {
        y: 30
        text: "signal button"
        contentItem: Text {
            text: parent.text
            color: "black"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        signal mySignal
        signal mySignalPair(int index, string str)

        onClicked: {
            mySignal()
            mySignalPair(100, "mySignalPair")
        }

        onMySignal: {
            print("call mySignal")
        }

        onMySignalPair: (i, s)=>{
            print("call mySignalPair" + i + s)
        }
    }

    Rectangle {
        x: 100
        y: 100
        width: 100
        height: 100

        color: "red"

        property real size: 1.0
        //on<Property>Changed 的​​形式编写，其中<Property>是属性的名称，第一个字母大写
        onSizeChanged: {
            width = size * 100
            height = size * 100
        }

        Button {
            width: 50
            height: 50
            onClicked: {
                parent.size += 0.1
            }
        }
    }

    Item {
        signal testConnectSignal
        function testConnectInit() {
            print("testConnectInit")
        }

        function testConnectSlot() {
            print("testConnectSlot")
        }

        function testConnectSlot1() {
            print("testConnectSlot1")
        }

        Button {
            onClicked: {
                // 可以多次绑定
                parent.testConnectSignal.connect(parent.testConnectSlot)
                parent.testConnectSignal.connect(parent.testConnectSlot)
                parent.testConnectSignal.connect(parent.testConnectSlot1)
                parent.testConnectSignal()
                // 只要解绑一次
                parent.testConnectSignal.disconnect(parent.testConnectSlot)
                parent.testConnectSignal.disconnect(parent.testConnectSlot1)
            }
        }

        Component.onCompleted: {
            testConnectSignal.connect(testConnectInit)
        }
        Component.onDestruction: {
            testConnectSignal.disconnect(testConnectInit)
        }
    }

    // 多个QML组件之间（文件）的信号和槽
    Item {
        MyType {
            id: myType
            y: 200
        }

        Rectangle {
            id: myRect
            width: 200
            height: 200
            color: "green"
            x: 400
            y: 200

            function recvSetSize(w, h) {
                width = w
                height = h
            }
        }

        Component.onCompleted: {
            myType.setSize.connect(myRect.recvSetSize)
        }

        Connections {
            target: myType
            function onSetSize(w, h) {
                print("Connections " + w + "" + h)
            }
        }
    }
}

// MyType.qml
Item {
    signal setSize(int w, int h)

    Rectangle {
        width: 200
        height: 200

        color: "blue"

        Button {
            text: "set size"
            onClicked: {
                parent.width += 10
                parent.height += 10
                setSize(parent.width, parent.height)
            }
        }
    }
}