From f6bb3c220b1276ee9f5782a4fe0165cf62ba727a Mon Sep 17 00:00:00 2001 From: Venugopal Shivashankar Date: Wed, 3 Oct 2018 11:19:27 +0200 Subject: Example: Update the shared UI controls to use input handlers Change-Id: I077754d9d9d713d01c7711175eb1b5da5e1f6869 Reviewed-by: Liang Qi Reviewed-by: Shawn Rutledge --- examples/quick/shared/Button.qml | 19 +++++------ examples/quick/shared/CheckBox.qml | 13 ++++---- examples/quick/shared/LauncherList.qml | 41 +++++++++++------------- examples/quick/shared/SimpleLauncherDelegate.qml | 14 ++++---- examples/quick/shared/Slider.qml | 26 +++++++-------- examples/quick/shared/TabSet.qml | 7 ++-- 6 files changed, 58 insertions(+), 62 deletions(-) (limited to 'examples') diff --git a/examples/quick/shared/Button.qml b/examples/quick/shared/Button.qml index 8abce273bd..ce7dad717f 100644 --- a/examples/quick/shared/Button.qml +++ b/examples/quick/shared/Button.qml @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.12 import QtQuick.Window 2.1 Item { @@ -57,8 +57,8 @@ Item { property alias text: buttonLabel.text property alias label: buttonLabel signal clicked - property alias containsMouse: mouseArea.containsMouse - property alias pressed: mouseArea.pressed + property alias containsMouse: hoverHandler.hovered + property alias pressed: tapHandler.pressed implicitHeight: Math.max(Screen.pixelDensity * 7, buttonLabel.implicitHeight * 1.2) implicitWidth: Math.max(Screen.pixelDensity * 11, buttonLabel.implicitWidth * 1.3) height: implicitHeight @@ -71,7 +71,7 @@ Item { anchors.fill: parent color: palette.button gradient: Gradient { - GradientStop { position: 0.0; color: mouseArea.pressed ? Qt.darker(palette.button, 1.3) : palette.button } + GradientStop { position: 0.0; color: tapHandler.pressed ? Qt.darker(palette.button, 1.3) : palette.button } GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) } } antialiasing: true @@ -80,11 +80,12 @@ Item { border.width: 1 } - MouseArea { - id: mouseArea - anchors.fill: parent - onClicked: container.clicked() - hoverEnabled: true + TapHandler { + id: tapHandler + onTapped: container.clicked(); + } + HoverHandler { + id: hoverHandler } Text { diff --git a/examples/quick/shared/CheckBox.qml b/examples/quick/shared/CheckBox.qml index bcf8178f74..7b1588d2d9 100644 --- a/examples/quick/shared/CheckBox.qml +++ b/examples/quick/shared/CheckBox.qml @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.12 Item { id: root @@ -58,7 +58,7 @@ Item { height: implicitHeight property alias text: label.text property bool checked - property alias pressed: mouseArea.pressed + property alias pressed: tapHandler.pressed property alias row: row signal clicked @@ -71,7 +71,7 @@ Item { Rectangle { id: frame gradient: Gradient { - GradientStop { position: 0.0; color: mouseArea.pressed ? Qt.darker(palette.button, 1.3) : palette.button } + GradientStop { position: 0.0; color: tapHandler.pressed ? Qt.darker(palette.button, 1.3) : palette.button } GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) } } height: label.implicitHeight * 1.5 @@ -96,10 +96,9 @@ Item { anchors.verticalCenter: frame.verticalCenter } } - MouseArea { - id: mouseArea - anchors.fill: parent - onClicked: { + TapHandler { + id: tapHandler + onTapped: { parent.checked = !parent.checked parent.clicked() } diff --git a/examples/quick/shared/LauncherList.qml b/examples/quick/shared/LauncherList.qml index a4c75e544e..fe44cf3634 100644 --- a/examples/quick/shared/LauncherList.qml +++ b/examples/quick/shared/LauncherList.qml @@ -48,7 +48,7 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.12 Rectangle { property int activePageCount: 0 @@ -96,9 +96,8 @@ Rectangle { width: parent.width height: parent.height - bar.height color: "white" - MouseArea{ + TapHandler { //Eats mouse events - anchors.fill: parent } Loader{ focus: true @@ -221,29 +220,27 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 16 - MouseArea { - id: mouse - hoverEnabled: true - anchors.centerIn: parent - width: 38 - height: 31 - anchors.verticalCenterOffset: -1 + TapHandler { + id: tapHandler enabled: activePageCount > 0 - onClicked: { + onTapped: { pageContainer.children[pageContainer.children.length - 1].exit() } - Rectangle { - anchors.fill: parent - opacity: mouse.pressed ? 1 : 0 - Behavior on opacity { NumberAnimation{ duration: 100 }} - gradient: Gradient { - GradientStop { position: 0 ; color: "#22000000" } - GradientStop { position: 0.2 ; color: "#11000000" } - } - border.color: "darkgray" - antialiasing: true - radius: 4 + } + Rectangle { + anchors.centerIn: back + width: 38 + height: 31 + anchors.verticalCenterOffset: -1 + opacity: tapHandler.pressed ? 1 : 0 + Behavior on opacity { NumberAnimation{ duration: 100 }} + gradient: Gradient { + GradientStop { position: 0 ; color: "#22000000" } + GradientStop { position: 0.2 ; color: "#11000000" } } + border.color: "darkgray" + antialiasing: true + radius: 4 } } } diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml index 86a3b0dfd3..75aecf262c 100644 --- a/examples/quick/shared/SimpleLauncherDelegate.qml +++ b/examples/quick/shared/SimpleLauncherDelegate.qml @@ -47,7 +47,7 @@ ** $QT_END_LICENSE$ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.12 Rectangle { id: container @@ -89,12 +89,14 @@ Rectangle { implicitHeight: col.height height: implicitHeight width: buttonLabel.width + 20 + property alias containsMouse: hoverHandler.hovered - MouseArea { - id: mouseArea - anchors.fill: parent - onClicked: container.clicked() - hoverEnabled: true + TapHandler { + id: tapHandler + onTapped: container.clicked() + } + HoverHandler { + id: hoverHandler } Column { diff --git a/examples/quick/shared/Slider.qml b/examples/quick/shared/Slider.qml index 28f92446d0..cdda86e39e 100644 --- a/examples/quick/shared/Slider.qml +++ b/examples/quick/shared/Slider.qml @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.12 Item { id: slider @@ -57,18 +57,26 @@ Item { property real min: 0 property real max: 1 - property real value: min + (max - min) * mousearea.value + property real value: min + (max - min) * dragHandler.value property real init: min+(max-min)/2 property string name: "Slider" property color color: "#0066cc" property real minLabelWidth: 44 + DragHandler { + id: dragHandler + target: handle + xAxis.minimum: Math.round(-handle.width / 2 + 3) + xAxis.maximum: Math.round(foo.width - handle.width/2 - 3) + property real value: (handle.x - xAxis.minimum) / (xAxis.maximum - xAxis.minimum) + } + Component.onCompleted: setValue(init) function setValue(v) { if (min < max) handle.x = Math.round( v / (max - min) * - (mousearea.drag.maximumX - mousearea.drag.minimumX) - + mousearea.drag.minimumX); + (dragHandler.xAxis.maximum - dragHandler.xAxis.minimum) + + dragHandler.xAxis.minimum); } Rectangle { id:sliderName @@ -112,16 +120,6 @@ Item { id: handle source: "images/slider_handle.png" anchors.verticalCenter: parent.verticalCenter - MouseArea { - id: mousearea - anchors.fill: parent - anchors.margins: -4 - drag.target: parent - drag.axis: Drag.XAxis - drag.minimumX: Math.round(-handle.width / 2 + 3) - drag.maximumX: Math.round(foo.width - handle.width/2 - 3) - property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX) - } } } } diff --git a/examples/quick/shared/TabSet.qml b/examples/quick/shared/TabSet.qml index d66aa33634..9e2759c3ec 100644 --- a/examples/quick/shared/TabSet.qml +++ b/examples/quick/shared/TabSet.qml @@ -48,7 +48,7 @@ ** ****************************************************************************/ -import QtQuick 2.0 +import QtQuick 2.12 import QtQuick.Window 2.1 Item { @@ -100,9 +100,8 @@ Item { elide: Text.ElideRight font.bold: tabWidget.current == index } - MouseArea { - anchors.fill: parent - onClicked: tabWidget.current = index + TapHandler { + onTapped: tabWidget.current = index } } } -- cgit v1.2.3