Search code examples
qtqmlgrid-layoutloader

Dynamically create page based on ListModel count


I am a beginner QT/QML app development

How can I create a qml dynamically based on the ListModel count. In the view I am listing the modelObjects in a GridLayout using Repeater.

Item{
      id:griditem
      anchors.fill:parent

          GridLayout{
               id: grid2
               x:145
               y:30
               Layout.preferredHeight: 480
               Layout.preferredWidth: 1135
               rowSpacing:10
               columnSpacing:40

               columns: 3
               rows: 2

               Repeater{
                   id: repeater_Id
                   model: FeatureModel{}

                   Loader{
                       id: loader_Id

                       source: "QuadTiles.qml"
                       onLoaded: {
                             loader_Id.item.nIndex=index
                             loader_Id.item.type_String = type

                             loader_Id.item.title_Text.text = title
                             loader_Id.item.description_Text.text = description
                             loader_Id.item.btn1_icon.source = icon1

                       }
                   }
               } //Repeater
          }//GridLayout
  }

Edit : I am facing some issues I need to create new views dynamically based on the ModelList count. Each page having maximum 6 item (3 rows and 2 columns) in GridLayout

'QuadTiles.qml' is the qml file which is load in to each item of GridLayout


Solution

  • Try something like this:
    lm is the ListModel that is to be split.

    SwipeView {
        width: 200
        height: 800
        clip: true
        currentIndex: 0
    
        Repeater {
            model: Math.ceil(lm.count / 6)
            delegate:            ListView {
                width: 200
                height: 800
                property int viewIndex: index
                model: DelegateModel {
                    model: lm
                    groups: DelegateModelGroup { name: 'filter' }
                    Component.onCompleted: {
                        for (var i = viewIndex * 6; i < lm.count && i < (viewIndex * 6) + 6; i++) {
                            items.setGroups(i, 1, ['items', 'filter'])
                        }
                    }
    
                    filterOnGroup: 'filter'
    
                    delegate: Rectangle {
                        width: 180
                        height: 30
                        border.width: 1
                        Text {
                            anchors.centerIn: parent
                            text: index
                        }
                    }
                }
            }
        }
    }
    

    And don't use a Loader as a delegate. The delegates are instantiated dynamically, so the Loader is just useless overhead. You might use a Loader within your delegate for parts, that are usually not shown.