浅析AbstractButton在QML中的应用

我刚看了一下AbstractButton．这个API提供了一个最基本的供我们写我们的自己按钮的功能，比如它有clicked, pressAndHold信号供我们使用，同时也提供了一个最基本的一下属性，比如hover及触觉功能等．在最新的API中，它也提供了一个最新的功能：

sensingMargins
sensingMargins.left : real
sensingMargins.right : real
sensingMargins.top : real
sensingMargins.bottom : real
sensingMargins.all : real

这个属性是为了能够使得我们定义我们按钮的触发区域，比如，我们想在延伸我们的按钮的区域使得我们可以在更大的区域对我们的按钮产生按钮事件．在下面的例程中，我们来做一个简单的实验：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "abstractbutton.liu-xiao-guo"

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("abstractbutton")

        Rectangle {
            id: red
            anchors.centerIn: parent
            width: units.gu(10)
            height: units.gu(10)
            border.color: "red"

            AbstractButton {
                anchors.fill: parent
                sensingMargins {
                    left: units.gu(1)
                    top: units.gu(1)
                    bottom: units.gu(1)
                    right: units.gu(10)
                }

                onClicked: {
                    console.log("it is clicked in red")
                }
            }
        }

        Rectangle {
            id: blue
            anchors.left: red.right
            anchors.top: red.top
            border.color: "blue"
            width: units.gu(10)
            height: units.gu(10)

//            MouseArea {
//                anchors.fill: parent
//                onClicked: {
//                    console.log("it is clicked in blue")
//                }
//            }
        }
    }
}

在上面，我们定义了一个红色区域的按钮，同时我们也定义了一个蓝色的区域．在红色的按钮中，我们定义了：

 sensingMargins {
                    left: units.gu(1)
                    top: units.gu(1)
                    bottom: units.gu(1)
                    right: units.gu(10)
                }

qml: it is clicked in red
qml: it is clicked in red
qml: it is clicked in red
qml: it is clicked in red

这是因为我们在红色按钮中把它可以触碰的区域延伸到了蓝色的方框中．当然如果，我们把我们上面的代码修改为如下：

        Rectangle {
            id: blue
            anchors.left: red.right
            anchors.top: red.top
            border.color: "blue"
            width: units.gu(10)
            height: units.gu(10)

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("it is clicked in blue")
                }
            }
        }

那么当我们在蓝色区域触屏时，我们再也看不到上面的输出了．

整个项目的代码在： https://github.com/liu-xiao-guo/abstractbuttion

值得指出的是，由于这个sensingMargins比较新，所以它需要最新的软件版本才能够支持．具体要求可以参阅 bug．