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中非常重要的概念，輸入處理與可視化顯示分開。這樣你的交互區域可以比你顯示的區域大很多。