作者： 一去、二三里
个人微信号： iwaleon
微信公众号： 高效程序员

QML 中有一些元素本身是不具备交互能力的（例如：Rectangle、Text、Image 等），那么如何通过鼠标来控制它们的行为呢？这里就需要用到 MouseArea 元素了，它继承于 Item 且不可见，通常需要与可见元素结合使用，以便为其提供鼠标操作的功能。

当然了，尽管 MouseArea 拥有 visible 属性，不过该属性与可见性并没有关系。当 visible 属性值为 false 时，表示忽略该鼠标区域的鼠标事件，行为类似于将 enabled 属性设置为 false。

老规矩，先上一张思维导图：

定义鼠标区域

由于 MouseArea 是一个 Item，所以它可以嵌套在其他元素里面，以便为其提供鼠标事件。

例如，要实现一个鼠标点击后随机变色的效果，可以这样做：

Rectangle