Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

AppFlickable

A Flickable with a preset rebound animation for a native scrolling experience. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2
Inherits:

Flickable

Properties

Detailed Description

A Flickable with a preset Flickable::rebound animation. The default animation supports either a vertical or a horizontal flick rebound. Use this type to create flickable views with a native scrolling experience.

To add a native styled scroll indicator for the view, see the ScrollIndicator type. To make all the content of a given page scrollable, you can also use the FlickablePage. It contains pre-configured AppFlickable and ScrollIndicator.

AppFlickable uses a vertical flick by default. Set Flickable::flickableDirection to Flickable.HorizontalFlick to switch to horizontal flicking and rebound.

iOS Android

Example Usage

AppFlickable with Column and Repeater

 import QtQuick 2.5
 import Felgo 3.0

 App {
   NavigationStack {

     Page {
       title: "AppFlickable Example"

       AppFlickable {
         anchors.fill: parent
         contentHeight: content.height

         Column {
           id: content
           width: parent.width

           Repeater {
             model: 50
             AppText {
               width: content.width
               height: dp(50)
               text: "Text Item #"+index
               horizontalAlignment: Text.AlignHCenter
             }
           }
         }

       }
     } // Page

   }
 }

More Scrolling Examples

See the guide Use ScrollViews and ListViews in Your App for different examples of scrollable views, like a list view.

Property Documentation

desktopScrollEnabled : bool

Enable improved vertical scrolling on desktop using mousewheels and touchpads. By default, true on desktop platforms.


scrollsToTop : bool

By default, an AppFlickable component scrolls to the top of the list if a user taps the status bar on iOS. Set this property to false to disable that behavior.


Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded