aboutsummaryrefslogtreecommitdiffstats
path: root/src/imports
diff options
context:
space:
mode:
authorJ-P Nurmi <jpnurmi@theqtcompany.com>2015-11-25 19:01:58 +0100
committerJ-P Nurmi <jpnurmi@theqtcompany.com>2015-11-26 17:26:36 +0000
commit9d952ae34819231a25edda9fd760409ae30fdb5b (patch)
treea0c3daebb975f495f7a94220434b36f3f7efa93c /src/imports
parent6fe4cb2e478712baadb8363b14553485c590c252 (diff)
Optimize Material CheckBox
Before: tst_ObjectCount::material(CheckBox): QQuickItems: 5 (total of QObjects: 28 ) tst_CreationTime::material():"CheckBox": 0.28 msecs per iteration (total: 72, iterations: 256) After: tst_ObjectCount::material(CheckBox): QQuickItems: 5 (total of QObjects: 19 ) tst_CreationTime::material():"CheckBox": 0.20 msecs per iteration (total: 53, iterations: 256) Change-Id: I63a76f5bfb190655237d21d68397d5dc93941fe0 Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
Diffstat (limited to 'src/imports')
-rw-r--r--src/imports/controls/material/CheckBox.qml124
1 files changed, 37 insertions, 87 deletions
diff --git a/src/imports/controls/material/CheckBox.qml b/src/imports/controls/material/CheckBox.qml
index 5884a64e..939d5a31 100644
--- a/src/imports/controls/material/CheckBox.qml
+++ b/src/imports/controls/material/CheckBox.qml
@@ -60,12 +60,23 @@ T.CheckBox {
y: control.topPadding + (control.availableHeight - height) / 2
implicitWidth: 20
implicitHeight: 20
- border.color: control.Material.secondaryTextColor
+ color: "transparent"
+ border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor
+ border.width: control.checked ? width / 2 : 2
radius: 2
- Component.onCompleted: {
- color = control.checked || control.pressed ? control.Material.accentColor : "transparent";
- border.width = control.checked || control.pressed ? 0 : 2;
+ Behavior on border.width {
+ NumberAnimation {
+ duration: 100
+ easing.type: Easing.OutCubic
+ }
+ }
+
+ Behavior on border.color {
+ ColorAnimation {
+ duration: 100
+ easing.type: Easing.OutCubic
+ }
}
Ripple {
@@ -81,96 +92,35 @@ T.CheckBox {
id: checkImage
x: (parent.width - width) / 2
y: (parent.height - height) / 2
+ width: 16
+ height: 16
source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/check.png"
fillMode: Image.PreserveAspectFit
- Component.onCompleted: {
- width = control.checked || control.pressed ? 16 : 0;
- height = control.checked || control.pressed ? 16 : 0;
- }
- }
-
- Connections {
- target: control
- onCheckedChanged: {
- pressScaleAnimation.start();
- if (control.checked)
- checkedAnimation.start();
- else
- uncheckedAnimation.start();
- }
- }
-
- SequentialAnimation {
- id: pressScaleAnimation
-
- NumberAnimation {
- target: indicatorItem
- property: "scale"
- // Go down 2 pixels in size.
- to: 1 - 2 / indicatorItem.width
- duration: 120
- }
- NumberAnimation {
- target: indicatorItem
- property: "scale"
- to: 1
- duration: 120
- }
+ scale: control.checked ? 1 : 0
+ Behavior on scale { NumberAnimation { duration: 100 } }
}
- SequentialAnimation {
- id: checkedAnimation
-
- PropertyAction {
- target: indicatorItem.border
- property: "color"
- value: control.Material.accentColor
- }
- NumberAnimation {
- target: indicatorItem.border
- property: "width"
- from: 2
- to: indicatorItem.width / 2
- easing.type: Easing.OutCubic
- duration: 100
- }
- NumberAnimation {
- target: checkImage
- properties: "width, height"
- from: 0
- to: 16
- duration: 100
- }
+ states: State {
+ name: "checked"
+ when: control.checked
}
- SequentialAnimation {
- id: uncheckedAnimation
-
- PropertyAction {
- target: indicatorItem.border
- property: "color"
- value: control.Material.secondaryTextColor
- }
- NumberAnimation {
- target: checkImage
- properties: "width, height"
- from: 16
- to: 0
- duration: 100
- }
- NumberAnimation {
- target: indicatorItem.border
- property: "width"
- from: indicatorItem.width / 2
- to: 2
- easing.type: Easing.OutCubic
- duration: 100
- }
- PropertyAction {
- target: indicatorItem
- property: "color"
- value: "transparent"
+ transitions: Transition {
+ SequentialAnimation {
+ NumberAnimation {
+ target: indicatorItem
+ property: "scale"
+ // Go down 2 pixels in size.
+ to: 1 - 2 / indicatorItem.width
+ duration: 120
+ }
+ NumberAnimation {
+ target: indicatorItem
+ property: "scale"
+ to: 1
+ duration: 120
+ }
}
}
}