blob: 29f4e652b1f0507b380c79bebe4e9802bb47d502 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\example swipetoremove
\keyword Qt Quick Controls - Swipe to Remove
\title Qt Quick Controls - Swipe to Remove
\ingroup qtquickcontrols-examples
\brief Demonstrates removal of list items by swipe gesture.
This example demonstrates how \l SwipeDelegate can be used to implement
removal of list items by swiping. This UI pattern is often used in touch
user interfaces.
\image qtquickcontrols-swipetoremove.png "Screen shot of the app"
Each list item can be swiped to the left, which reveals a label on the
\l {SwipeDelegate::swipe}{right} side indicating that the item will be
removed if the swipe is completed.
\image qtquickcontrols-swipetoremove.gif "Animation of the app working"
The following snippet contains the implementation of the side item.
\snippet swipetoremove/swipetoremove.qml delegate
The following snippet presents how the logic of removing items is
implemented. When the swipe is \l {SwipeDelegate::swipe}{completed}, it
starts a timer that waits a few seconds to let the user undo the remove
action. Once the undo timer triggers, the item is removed from the list:
\snippet swipetoremove/swipetoremove.qml removal
Finally, the removal of an item triggers the following transitions. The
\l {ListView::} {remove} transition applies to the item that is removed,
and the \l {ListView::}{displaced} transition applies to the other items
that got displaced due to the removal:
\snippet swipetoremove/swipetoremove.qml transitions
\include examples-run.qdocinc
*/
|
