diff options
author | Mitch Curtis <mitch.curtis@theqtcompany.com> | 2016-02-27 13:15:46 +0100 |
---|---|---|
committer | Mitch Curtis <mitch.curtis@theqtcompany.com> | 2016-03-15 21:44:12 +0000 |
commit | ef885485a19f0e70273650d88312af0195c32920 (patch) | |
tree | 48ca030228c456a53e08c45df97dee0944a7d2c8 /examples | |
parent | e1add88186ed3ace78c7f6c1e3d683285a1a51fa (diff) |
Add SwipeDelegate
SwipeDelegate presents a view item that can be swiped left or right to
expose more options or information. It is used as a delegate in views
such as ListView.
Change-Id: I7533a2b223f652993b6cee730930ea6dc125c869
Task-number: QTBUG-51610
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>
Diffstat (limited to 'examples')
-rw-r--r-- | examples/controls/gallery/gallery.qml | 1 | ||||
-rw-r--r-- | examples/controls/gallery/gallery.qrc | 1 | ||||
-rw-r--r-- | examples/controls/gallery/pages/DelegatePage.qml | 164 |
3 files changed, 166 insertions, 0 deletions
diff --git a/examples/controls/gallery/gallery.qml b/examples/controls/gallery/gallery.qml index fd019c65..90f4b347 100644 --- a/examples/controls/gallery/gallery.qml +++ b/examples/controls/gallery/gallery.qml @@ -142,6 +142,7 @@ ApplicationWindow { ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" } ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" } ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" } + ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" } ListElement { title: "Drawer"; source: "qrc:/pages/DrawerPage.qml" } ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" } ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" } diff --git a/examples/controls/gallery/gallery.qrc b/examples/controls/gallery/gallery.qrc index 89958333..e29c18ce 100644 --- a/examples/controls/gallery/gallery.qrc +++ b/examples/controls/gallery/gallery.qrc @@ -47,5 +47,6 @@ <file>pages/TextAreaPage.qml</file> <file>pages/TextFieldPage.qml</file> <file>pages/TumblerPage.qml</file> + <file>pages/DelegatePage.qml</file> </qresource> </RCC> diff --git a/examples/controls/gallery/pages/DelegatePage.qml b/examples/controls/gallery/pages/DelegatePage.qml new file mode 100644 index 00000000..049ba00c --- /dev/null +++ b/examples/controls/gallery/pages/DelegatePage.qml @@ -0,0 +1,164 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the examples of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.6 +import QtQuick.Layouts 1.1 +import Qt.labs.controls 1.0 + +Pane { + padding: 0 + + property var delegateComponentMap: { + "ItemDelegate": itemDelegateComponent, + "SwipeDelegate": swipeDelegateComponent + } + + Component { + id: itemDelegateComponent + + ItemDelegate { + text: labelText + width: parent.width + } + } + + Component { + id: swipeDelegateComponent + + SwipeDelegate { + id: swipeDelegate + text: labelText + width: parent.width + + onClicked: if (exposure.active) view.model.remove(ourIndex) + + Component { + id: removeComponent + + Rectangle { + color: swipeDelegate.exposed && swipeDelegate.pressed ? "#333" : "#444" + width: parent.width + height: parent.height + + Label { + text: "Remove" + color: "white" + anchors.centerIn: parent + } + } + } + + exposure.left: removeComponent + exposure.right: removeComponent + } + } + + ColumnLayout { + id: column + spacing: 40 + anchors.fill: parent + anchors.topMargin: 20 + + Label { + Layout.fillWidth: true + wrapMode: Label.Wrap + horizontalAlignment: Qt.AlignHCenter + text: "Delegate controls are used as delegates in views such as ListView." + } + + ListView { + id: listView + Layout.fillWidth: true + Layout.fillHeight: true + clip: true + model: ListModel { + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "ItemDelegate"; text: "ItemDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + ListElement { type: "SwipeDelegate"; text: "SwipeDelegate" } + } + + section.property: "type" + section.delegate: Pane { + width: listView.width + height: sectionLabel.implicitHeight + 20 + + Label { + id: sectionLabel + text: section + anchors.centerIn: parent + } + } + + delegate: Loader { + id: delegateLoader + width: listView.width + sourceComponent: delegateComponentMap[text] + + property string labelText: text + property ListView view: listView + property int ourIndex: index + + // Can't find a way to do this in the SwipeDelegate component itself, + // so do it here instead. + ListView.onRemove: SequentialAnimation { + PropertyAction { + target: delegateLoader + property: "ListView.delayRemove" + value: true + } + NumberAnimation { + target: item + property: "height" + to: 0 + easing.type: Easing.InOutQuad + } + PropertyAction { + target: delegateLoader + property: "ListView.delayRemove" + value: false + } + } + } + } + } +} |