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

Stack With Friends Demo

 import QtQuick 2.0
 import Felgo 3.0

 Flickable {
   id: levelList

   contentWidth: grid.width
   contentHeight: grid.height+offset.height
   flickableDirection: Flickable.VerticalFlick

     Connect this property with either LevelEditor::authorGeneratedLevels, LevelEditor::applicationJSONLevels or LevelEditor::applicationQMLLevels. The level array will then be displayed with the levelItemDelegate. See \l{Example Usage} for an example.
   property variant levelMetaDataArray: levelScene.levelArrayFromState()

     This alias property provides access to the \l Column element used for the level list. You can change the default spacing for example from 2 to any other value.

     For a reference how the LevelSelectionList is implemented see \l{LevelSelectionList Source Code}.
   property alias levelColumn: grid

     This property defines the delegate for a single level in the  LevelSelectionList. You can access all of the LevelData::levelMetaData like the \c levelName with \c modelData.levelName.

     By default, a SimpleButton is used for the delegate:
     SimpleButton {
       height: 20
       width: levelSelectionList.width
       text: modelData.levelName
       onClicked: {

     \note: It is required to set the height of the delegate so it can be displayed in the LevelSelectionList. The width of the delegate is set by default to the width you set for the LevelSelectionList.
   property Component levelItemDelegate: LevelItem {}

   signal nextPageClicked
   signal prevPageClicked

   onLevelMetaDataArrayChanged: {

   function updateList() {

     // this removes the elements immediately to see an instant level loading screen
     // we could also leave the old data there!
     levelListRepeater.model = null

     isLoading = true

   function nextPage() {
     if(page>=pageCount) return;
     // don't update the list immediately, but load first


   function prevPage() {
     if(page<=1) return;



   property int pageSize: -1
   property int page: 1
   property int pageCount: 1

   // is used to only show the next and prev buttons when it is not loading
   property alias isLoading: loading.visible

   Timer {
     id: changeModel
     interval: 100
     onTriggered: {
       if(levelMetaDataArray) {
         levelListRepeater.model = levelMetaDataArray
       } else {
         isLoading = false

   MultiResolutionImage {
     id: loading
     source: "../../assets/img/splash-text.png"
     anchors.centerIn: parent
     visible: false

   Grid {
     id: grid
     // the default spacing is 2 pixels
     columns: 5
     spacing: 5

     Repeater {
       id: levelListRepeater

       // delegate is the default property of Repeater
       delegate: levelItemDelegate

       onModelChanged: {
         console.debug("LevelList: listModel changed to", model, ", stringified:", JSON.stringify(model))
         isLoading = false
     }// end of Repeater
   }// end of Column

   Item {
     id: offset
     width: parent.width
Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded