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


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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded