A Page with included AppFlickable and ScrollIndicator. More...

Import Statement: import Felgo 3.0
Since: Felgo 3.1.0



Detailed Description

Many app pages with custom content require an AppFlickable to make the content scrollable. The FlickablePage component is a convenience item wrapping a single AppFlickable component into a Page object. You can access and control the internal AppFlickable item with the flickable property.

It also contains a ScrollIndicator, which you can access with the scrollIndicator property. It is enabled by default. The FlickablePage can thus help to save some boilerplate code for pages with flickable content.

Example Usage

The easiest way to make content flickable is to use the FlickablePage type. It internally uses an AppFlickable with a ScrollIndicator.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {

     FlickablePage {
       title: "Flickable Page"

       // set contentHeight of flickable to allow scrolling
       flickable.contentHeight: column.height

       // set false to hide the scroll indicator, it is visible by default
       scrollIndicator.visible: true

       // page content
       Column {
         id: column
         width: parent.width

         // fill column with 100 AppText items using Repeater
         Repeater {
           model: 100
           delegate: Rectangle {
             width: parent.width
             height: dp(50)
             AppText {
               anchors.centerIn: parent
               text: qsTr("Item") + " " + index
       } // Column

     } // FlickablePage


More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Property Documentation

flickable : AppFlickable

An alias to access the AppFlickable within the page.

scrollIndicator : ScrollIndicator

An alias to the ScrollIndicator item of the page. You can hide the indicator by setting scrollIndicator.visible to false.

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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support