AppCardSwipeArea

Adds Tinder-like swipe feature to a component. More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

Signals

Methods

Detailed Description

With the AppCardSwipeArea, you can add Tinder-like swipe gestures to any component. This is used internally in the AppCard component.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   Page {
     Column {
       anchors.centerIn: parent

       // You cannot use anchors directly on the item that needs to be swiped, as this blocks x and y movement
       // However you can still place it in layout components like a Column, as shown in this example
       AppPaper {
         width: dp(300)
         height: appText.height

         AppText {
           id: appText
           width: parent.width
           padding: dp(15)
           text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
         }

         // Fill the parent by default and uses it as target for the swipe
         AppCardSwipeArea {

         }
       }
     }
   }
 }

Property Documentation

mouseArea : MouseArea

Alias to the internal MouseArea used to drag/swipe the target. Available directions are "left" and "right".

This QML property was introduced in V-Play 2.18.1.


rotationFactor : real

A multiplier for the rotation depending on the horizontal swipe distance. Decrease this value to lower the rotation when swiping. The default value is 0.1.

This QML property was introduced in V-Play 2.18.1.


snapBackXAnimation : NumberAnimation

You can fine-tune the horizontal snap back animation, for example you can add easing.

This QML property was introduced in V-Play 2.18.1.


snapBackYAnimation : NumberAnimation

You can fine-tune the vertical snap back animation, for example you can add easing.

This QML property was introduced in V-Play 2.18.1.


swipeActive : bool

Indicates that a swipe is active. Depending on the swipeActiveDelay, this is either immediately when pressed or after the press and hold for the specified delay.

This QML property was introduced in V-Play 2.18.1.

See also swipeActiveDelay.


swipeActiveDelay : int

The target item that shoul be swiped. By default this is the parent of the AppCardSwipeArea.

This QML property was introduced in V-Play 2.18.1.


swipeOutDistance : real

Defines the horizontal distance the target is animated to, when it is swiped out. This is set to screenWidth by default.

This QML property was introduced in V-Play 2.18.1.


swipeOutDuration : real

Defines the duration of the swipe out animation in milliseconds. The default value is 200.

This QML property was introduced in V-Play 2.18.1.


swipeOutThreshold : real

Defines the horizontal threshold needed for a swipe to be considered valid. If the target is released before it has been swiped further than this value, it will snap back to the initial position. If the swipe is considered valid, the target will get swiped out to the left or right direction and the signal swipedOut will be called. The default value is dp(100).

This QML property was introduced in V-Play 2.18.1.


swipeOutXAnimation : NumberAnimation

You can fine-tune the swipe out animation, for example you can add easing.

This QML property was introduced in V-Play 2.18.1.


target : var

The target item that shoul be swiped. By default this is the parent of the AppCardSwipeArea.

This QML property was introduced in V-Play 2.18.1.


Signal Documentation

swipeOutCompleted(var = direction)

This signal is called when the swipe out animation is completed. Available directions are "left" and "right".

This QML signal was introduced in V-Play 2.18.1.

See also swipedOut.


swipedOut(var = direction)

This signal is called when a card is swiped out. This happens if either a swipe was considered valid, or swipeOut has been called. Once the swipe out animation is completed, the signal swipeOutCompleted will be called.

This QML signal was introduced in V-Play 2.18.1.

See also swipeOutCompleted.


Method Documentation

swipeOut( = direction)

Call this function to swipe out the target in the specified direction. Available directions are "left" and "right". This function will also trigger the swipedOut and swipeOutCompleted signal.

This QML method was introduced in V-Play 2.18.1.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support