【QML COOK】- 003-处理鼠标事件

1. 编辑main.qml

import QtQuick

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

    Image {
        id: backgroud
        anchors.fill: parent
        source: "qrc:/Resources/Images/arrow.png"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: backgroud.rotation += 90
    }
}

• MouseArea同Image一样也是一个对象，只不过这个对象在窗口中是不显示的，它的作用是监视区域内的鼠标事件。
• 我想让MouseArea监控整个窗口的鼠标事件，所以使用了"anchors.fill:parent"让它填充整个窗口
• id是每个QML对象都有的属性，它的值唯一标识了一个QML对象。注意值不是字符串，不要用双引号括起来。可以把id的值当作是对象的一个引用。通过id.propery就能修改一个对象的属性。
• onClicked是一个slot，用来处理鼠标点击事件。QML中所有事件slot的名称都是onEventName.
• 我想在点击鼠标时让id是backgroud的Image转90度，所以在MouseArea的onClicked中修改了backgroud的rotation属性

2. 运行程序

正常在串口中每点击一次鼠标，窗口中的图片就会顺时针转90度。