《QmlBook》笔记（3）：简单转换

定义一个简单的组件：

ClickableImage.qml

import QtQuick 2.0

Image
{
    id: root
    signal clicked
    MouseArea
    {
        anchors.fill: parent
        onClicked: root.clicked()//点击会让图片发信号
    }
}

一个图片组件加上鼠标区域，定义一个信号当鼠标按下时发送此信号。

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true;
    width: bg.width
    height: bg.height
    Image
    {
        id: bg
        source: "/img/background.png"
    }
    MouseArea
    {
        id: backgroundClicker
        anchors.fill: parent
        onClicked:
        {
            rocket.x = 20
        }
    }

    ClickableImage //也就是ClickableImage.qml文件的根项（即一个Image）
    {
        id: rocket
        x: 20; y: 100
        source: "/img/rocket.png"
        onClicked://自身的按下操作
        {
            x += 5
        }
    }
}

    MouseArea
    {
        id: backgroundClicker
        anchors.fill: parent
        onClicked:
        {
            rocket.rotation = 0
        }
    }

    ClickableImage
    {
        id: rocket
        x: 200; y: 100
        source: "/img/rocket.png"
        smooth: true
        onClicked:
        {
            rotation += 5
        }
    }

    MouseArea
    {
        id: backgroundClicker
        anchors.fill: parent
        onClicked:
        {
            rocket.rotation = 0
            rocket.scale = 1.0
        }
    }

    ClickableImage
    {
        id: rocket
        x: 380; y: 100
        source: "/img/rocket.png"
        smooth: true
        onClicked:
        {
            rotation += 5
            scale -= 0.05
        }
    }