【QML】MouseArea

 ​前言

学习自：B站【英文字幕】Qt quick（QML)技术解读 入门到熟练

MouseArea支持简单的鼠标操作

过程

1.鼠标操作区域，定位为小矩形内

anchors.fill: blueRec

设计模式看鼠标有效区域

2.类似按钮信号槽操作，

        onClicked: {
            Qt.quit();
        }

点击有效区域，蓝色小矩形，执行触发函数：退出应用程序，执行有效。

3.设置覆盖有效，覆盖等于按键，设置覆盖时的槽函数用onEntered:{ }函数

       hoverEnabled: true;
        onEntered: {
            blueRec.color ="red"
            blueRec.rotation = 45
        }

覆盖矩形区域时，触发槽函数，蓝色矩形框颜色变为红色，角度旋转45度

4.把文本Text放到矩形Rec和鼠标区域MouseA后声明，文本会显示在矩形框内，但是矩形旋转时，文本不会跟着旋转，解决方案：给文本Text一个id，在覆盖触发槽函数内写入文本旋转

onEntered: {
            blueRec.color ="red"
            blueRec.rotation = 45
            fooText.rotation = 45
        }


Text {
        id:fooText

5.设置覆盖离开退出时的恢复的函数onExited:{ }函数

onExited: {
            blueRec.color ="blue"
            blueRec.rotation = 0
            fooText.rotation = 0
        }

6.在点击信号槽函数内，改为 console.log() 函数打印出"hello from QML"

onClicked: {
            console.log("hello from QML")
        }

7.console.log打印出矩形框的颜色，打印出的颜色是十六进制颜色码

onClicked: {
            console.log(blueRec.color)
        }