SwipeOptionsContainer

A ListView delegate container to implement swipeable rows within a ListView More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

Signals

Methods

Detailed Description

This is a container item for components which can be swiped horizontally to reveal options. It is intended for swipe-able list view rows, like in many native apps on Android or iOS.

SwipeOptionsContainer can be wrapped around any QML Items. You can then specify an Item as leftOption and/or rightOption, to enable swiping to the left or right to reveal these items as options.

If used inside the delegate of an AppListView, starting the swipe gesture in any row will automatically close the options of another row, if currently opened.

Example Usage

To add swipe options to the rows of an AppListView, the following code can be used:

 App {

   ListPage {
     //some JS array as list model
     model: [{text: "Item 1", detailText: "Detail 1"}, {text: "Item 2", detailText: "Detail 2"}]

     // define the SwipeOptionsContainer as delegate
     delegate: SwipeOptionsContainer {
       id: container

       SimpleRow {                         //actual content to be displayed in the list rows
         id: row
       }

       leftOption: SwipeButton {           //left options, displayed when swiped list row to the right
         text: "Option"
         icon: IconType.gear
         height: row.height
         onClicked: {
           row.item.text = "Option clicked"
           row.itemChanged()
           container.hideOptions()         //hide automatically when button clicked
         }
       }

       rightOption: AppActivityIndicator { //right options, displayed when swiped list row to the left
         height: row.height
         width: height
       }
     } // SwipeOptionsContainer
   } // ListPage

 }

Note: SwipeOptionsContainer can only have one direct child Item, which will be the visible content.

Property Documentation

[read-only] isLeft : bool

Readonly property holding the current visibility state of the leftOption item. If the leftOption item is currently revealed (visible) true, otherwise false.


[read-only] isRight : bool

Readonly property holding the current visibility state of the rightOption item. If the rightOption item is currently revealed (visible) true, otherwise false.


leftOption : Item

Set this property to a custom item which should get visible if the user swipes the container item to the right (revealing the left option).

If this property is not set the swipe right gesture is ignored.


rightOption : Item

Set this property to a custom item which should get visible if the user swipes the container item to the left (revealing the right option).

If this property is not set the swipe left gesture is ignored.


Signal Documentation

leftOptionShown()

Called after the user swipes the container to the right so that the leftOption item got revealed.


rightOptionShown()

Called after the user swipes the container to the left so that the rightOption item got revealed.


Method Documentation

hideOptions()

Call this method to hide a currently visible leftOption or rightOption again.


Videos

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