我刚看了一下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")
}
}
}
那么当我们在蓝色区域触屏时,我们再也看不到上面的输出了.