Dynamically create list of ListModel

Question

I want to have a Swipeview, inside a swipeview a list od widgets (buttons). Everything has to be create dynamically, because there can be one screen or five, or one widget or more. It can be added via drawer (in future). Add screen on drawer adds one more screen. Add widget adds one widget on current screen. I think it should be as on image. I was trying to make this like here. My attempt:

main.qml

ApplicationWindow {
visible: true
Item {
    id: root

    ListModel {
        id: listoflists
    }

    ListView {
        id: listview 
    }

    function addlist() {
        CreateObject.create("listofwidgets.qml", root, itemAdded);
    }

    function listadded(obj, source) {
        listoflists.append({"obj": obj, "source": source})
    }

    function addview() {
        CreateObject.create("view.qml", root, itemAdded);
    }

    function viewadded(obj, source) {
        listoflists.append({"obj": obj, "source": source})
    }

}

Component {
    id: modelDelegate
        Text {
            text: name
        }
}

SwipeView {
    id: view
    currentIndex: 0

}

PageIndicator {
    id: indicator

    count: view.count
    currentIndex: view.currentIndex

    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}

Button {
    width: parent.width
    height: 20
    text: "add screen"

    onClicked: {
        addlist()
        addview()
    }
}

Button {
    width: parent.width
    height: 20
    text: "add widget"

    onClicked: {
         listoflist.get(view.currentIndex).addwidget()
    }
}
}

listofwidgets.qml

Item {
id: root2

ListModel {
    id: listofwidgets
}

function addwidget() {
    CreateObject.create("widget.qml", root2, widgetadded);
}

function widgetadded(obj, source) {
    listofwidgets.append({"obj": obj, "source": source})
}

}

widget.qml

ListElement {
    name: ""
}

view.qml

Item {
id: view.currentIndex

ListView {
    model: listoflists.get(view.currentIndex)
    delegate: modelDelegate

}
}

Answer 1

I don't know if that what you need but here is example of totally dynamically created SwipeView:

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Window {
    width: 400
    height: 600
    visible: true

    ColumnLayout {
        anchors.fill: parent
        spacing: 2
        Rectangle {
            Layout.preferredHeight: 50
            Layout.fillWidth: true
            Row {
               Button {
                   text: "Add screen"
                   onClicked: addScreen();
               }
               Button {
                   text: "Add widget"
                   onClicked: addWidget();
               }
            }
        }

        SwipeView {
            id: swipe
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }

    Component {
        id: screenComponent
        Rectangle {
            property alias view: view
            color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            ListView {
                id: view
                spacing: 2
                anchors.fill: parent
                model: ListModel {}
                delegate: widgetComponent
            }
        }
    }
    Component {
        id: widgetComponent
        Button {
            text: name + "_" + index
        }
    }

    function addScreen()
    {
        var page = screenComponent.createObject(swipe);
        swipe.addItem(page);
        swipe.currentIndex = swipe.count - 1;
    }

    function addWidget()
    {
        var page = swipe.currentItem;
        if(page) {
            page.view.model.append({name: "widget"});
        }
    }
}