Qml学习记录 五（鼠标区域元素）

本节对应（书名：QmlBook） 4.2.5 鼠标区域元素（MouseArea Element）(页码72)

演示效果和代码：

import QtQuick 2.0

Item {
    width: 500; height: 300
    Rectangle {
        id: rect1
        x: 12; y:12
        width: 76; height: 96
        //这个蓝色qt找不到就用的HEX颜色编码代替
        color: "#B0C4DE"
        MouseArea {
            id: area
            width: parent.width
            height: parent.height
            //判断点击事件 点击范围为父窗口的高宽
            onClicked: rect2.visible = !rect2.visible
        }
        Rectangle {
            id:rect2
            x: 112; y:12
            width: 76; height: 96
            border.color: "#B0C4DE"
            border.width: 4
            radius: 8
        }

    }
}

注意（书中原话）：

这是QtQuick中非常重要的概念，输入处理与可视化显示分开。这样你的交互区域可以比你显示的区域大很多。