QT5与QML（三）

MouseArea元素

为了能和这些元素互动，那我们就需要用到MouseArea元素，他可以在长方形的元素里面帮助你捕捉到鼠标的事件，MouseArea元素通常和一些可视的元素一起使用，来帮助他们执行一些指令。

，

注意：这是QtQuick和重要的一点，对输入的处理和视觉呈现分离开来，这样，允许你的输入处理的区域可以比显示出来的区域更大。

1.4.3 组件

组件是可以重复使用的元素，QML提供了多种方法来创建一个组件。但是我们现在先只关注一种：基于文件的组件，基于文件的组件是由一个QML元素和一个文件名组成，比如button.qml，你可以像使用别的元素一样的使用这个组件，比如你可以在你的代码里面这样写Button { ...}。

我们来看一下这个例子，我们创建一个包含一个文本和鼠标区域的长方形，这是一个很简单的Button的例子，不需要太复杂的逻辑。

现在我们的目的就是提取出来一个Button，把他变成一个可以重复使用的组件。我们想到一个简单的Button的API，想象一下别人该怎么样使用你的API，这大概是我的想法：

为了实现我想要的结果，我采用text属性来填充文本，使用MouseArea来接收我的输入，并实现我的回调函数，然后我需要给这个Button一个合适的大小，现在我们创建一个Button.qml的文件，然后把Button的UI描述信息写到里面，此外我们需要将要导出的元素级别设置为root级别。

// Button.qml
import QtQuick 2.0
Rectangle {
    id: root
    // export button properties
    property alias text: label.text
    signal clicked
    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"
    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

我们将一个signal和一个text放到了root级别，通常我们会将我们的根元素命名为root，是为了更好的被外部引用，这里用到了QML的alias功能，也就是别名功能，这是一种内部嵌套属性被提升到root级别的一种方式。因为只有在根级别的属性，才能够在被当做一个组件时，被别的元素使用到。

为了使用我们新定义的Button元素，我们只需要在别的qml文件中简单的描述即可，我们来看一下这个简单的例子。

现在你可以在任何地方都可以使用Button{}这样的形式定义许许多多的Button按钮了。

注意：个人而言，你还可以在深入研究一下，比如你也可以让一个Item来充当一个根元素，这样我们可以防止用户改变我们的按钮颜色，也保护了我们提供出去的API。

有了我们以上介绍的这些技术，我们可以很轻松的就创建很多可以重复利用的组件