qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Example: Update the shared UI controls to use input handlers 

Change-Id: I077754d9d9d713d01c7711175eb1b5da5e1f6869
Reviewed-by: Liang Qi <liang.qi@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
This commit is contained in:
Venugopal Shivashankar 2018-10-03 11:19:27 +02:00 committed by Shawn Rutledge
parent 818d7340e7
commit f6bb3c220b
6 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
examples/quick/shared/Button.qml
View File

@ -48,7 +48,7 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.1 import QtQuick 2.12
import QtQuick.Window 2.1 import QtQuick.Window 2.1
Item { Item {
@ -57,8 +57,8 @@ Item {
property alias text: buttonLabel.text property alias text: buttonLabel.text
property alias label: buttonLabel property alias label: buttonLabel
signal clicked signal clicked
property alias containsMouse: mouseArea.containsMouse property alias containsMouse: hoverHandler.hovered
property alias pressed: mouseArea.pressed property alias pressed: tapHandler.pressed
implicitHeight: Math.max(Screen.pixelDensity * 7, buttonLabel.implicitHeight * 1.2) implicitHeight: Math.max(Screen.pixelDensity * 7, buttonLabel.implicitHeight * 1.2)
implicitWidth: Math.max(Screen.pixelDensity * 11, buttonLabel.implicitWidth * 1.3) implicitWidth: Math.max(Screen.pixelDensity * 11, buttonLabel.implicitWidth * 1.3)
height: implicitHeight height: implicitHeight
@ -71,7 +71,7 @@ Item {
anchors.fill: parent anchors.fill: parent
color: palette.button color: palette.button
gradient: Gradient { 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) } GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) }
} }
antialiasing: true antialiasing: true
@ -80,11 +80,12 @@ Item {
border.width: 1 border.width: 1
} }
MouseArea { TapHandler {
id: mouseArea id: tapHandler
anchors.fill: parent onTapped: container.clicked();
onClicked: container.clicked() }
hoverEnabled: true HoverHandler {
id: hoverHandler
} }
Text { Text {

13
examples/quick/shared/CheckBox.qml
View File

@ -48,7 +48,7 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.0 import QtQuick 2.12
Item { Item {
id: root id: root
@ -58,7 +58,7 @@ Item {
height: implicitHeight height: implicitHeight
property alias text: label.text property alias text: label.text
property bool checked property bool checked
property alias pressed: mouseArea.pressed property alias pressed: tapHandler.pressed
property alias row: row property alias row: row
signal clicked signal clicked
@ -71,7 +71,7 @@ Item {
Rectangle { Rectangle {
id: frame id: frame
gradient: Gradient { 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) } GradientStop { position: 1.0; color: Qt.darker(palette.button, 1.3) }
} }
height: label.implicitHeight * 1.5 height: label.implicitHeight * 1.5
@ -96,10 +96,9 @@ Item {
anchors.verticalCenter: frame.verticalCenter anchors.verticalCenter: frame.verticalCenter
} }
} }
MouseArea { TapHandler {
id: mouseArea id: tapHandler
anchors.fill: parent onTapped: {
onClicked: {
parent.checked = !parent.checked parent.checked = !parent.checked
parent.clicked() parent.clicked()
} }

41
examples/quick/shared/LauncherList.qml
View File

@ -48,7 +48,7 @@
** $QT_END_LICENSE$ ** $QT_END_LICENSE$
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.0 import QtQuick 2.12
Rectangle { Rectangle {
property int activePageCount: 0 property int activePageCount: 0
@ -96,9 +96,8 @@ Rectangle {
width: parent.width width: parent.width
height: parent.height - bar.height height: parent.height - bar.height
color: "white" color: "white"
MouseArea{ TapHandler {
//Eats mouse events //Eats mouse events
anchors.fill: parent
} }
Loader{ Loader{
focus: true focus: true
@ -221,29 +220,27 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: 16
MouseArea { TapHandler {
id: mouse id: tapHandler
hoverEnabled: true enabled: activePageCount > 0
anchors.centerIn: parent onTapped: {
pageContainer.children[pageContainer.children.length - 1].exit()
}
}
Rectangle {
anchors.centerIn: back
width: 38 width: 38
height: 31 height: 31
anchors.verticalCenterOffset: -1 anchors.verticalCenterOffset: -1
enabled: activePageCount > 0 opacity: tapHandler.pressed ? 1 : 0
onClicked: { Behavior on opacity { NumberAnimation{ duration: 100 }}
pageContainer.children[pageContainer.children.length - 1].exit() gradient: Gradient {
} GradientStop { position: 0 ; color: "#22000000" }
Rectangle { GradientStop { position: 0.2 ; color: "#11000000" }
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
} }
border.color: "darkgray"
antialiasing: true
radius: 4
} }
} }
} }

14
examples/quick/shared/SimpleLauncherDelegate.qml
View File

@ -47,7 +47,7 @@
** $QT_END_LICENSE$ ** $QT_END_LICENSE$
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.0 import QtQuick 2.12
Rectangle { Rectangle {
id: container id: container
@ -89,12 +89,14 @@ Rectangle {
implicitHeight: col.height implicitHeight: col.height
height: implicitHeight height: implicitHeight
width: buttonLabel.width + 20 width: buttonLabel.width + 20
property alias containsMouse: hoverHandler.hovered
MouseArea { TapHandler {
id: mouseArea id: tapHandler
anchors.fill: parent onTapped: container.clicked()
onClicked: container.clicked() }
hoverEnabled: true HoverHandler {
id: hoverHandler
} }
Column { Column {

26
examples/quick/shared/Slider.qml
View File

@ -48,7 +48,7 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.0 import QtQuick 2.12
Item { Item {
id: slider id: slider
@ -57,18 +57,26 @@ Item {
property real min: 0 property real min: 0
property real max: 1 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 real init: min+(max-min)/2
property string name: "Slider" property string name: "Slider"
property color color: "#0066cc" property color color: "#0066cc"
property real minLabelWidth: 44 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) Component.onCompleted: setValue(init)
function setValue(v) { function setValue(v) {
if (min < max) if (min < max)
handle.x = Math.round( v / (max - min) * handle.x = Math.round( v / (max - min) *
(mousearea.drag.maximumX - mousearea.drag.minimumX) (dragHandler.xAxis.maximum - dragHandler.xAxis.minimum)
+ mousearea.drag.minimumX); + dragHandler.xAxis.minimum);
} }
Rectangle { Rectangle {
id:sliderName id:sliderName
@ -112,16 +120,6 @@ Item {
id: handle id: handle
source: "images/slider_handle.png" source: "images/slider_handle.png"
anchors.verticalCenter: parent.verticalCenter 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)
}
} }
} }
} }

7
examples/quick/shared/TabSet.qml
View File

@ -48,7 +48,7 @@
** **
****************************************************************************/ ****************************************************************************/
import QtQuick 2.0 import QtQuick 2.12
import QtQuick.Window 2.1 import QtQuick.Window 2.1
Item { Item {
@ -100,9 +100,8 @@ Item {
elide: Text.ElideRight elide: Text.ElideRight
font.bold: tabWidget.current == index font.bold: tabWidget.current == index
} }
MouseArea { TapHandler {
anchors.fill: parent onTapped: tabWidget.current = index
onClicked: tabWidget.current = index
} }
} }
} }