qtqmlqt5swipeview

Add dynamically QML Page on SwipeView QML


i need to add dynamically pages on swipeview. So my code:

    SwipeView {
        id: viewSwipe
        width: parent.width
        height: parent.height * 0.70
        currentIndex: 0
        Component.onCompleted: {
            curIndexWitouthZero = viewSwipe.currentIndex
            curIndexWitouthZero += 1
            addPage(RecipesPhase)
        }

        onCurrentIndexChanged: {
            curIndexWitouthZero = viewSwipe.currentIndex
            curIndexWitouthZero += 1
        }

        Item {
            id: firstPage
            RecipesPhase{}
        }
    }

    PageIndicator {
        id: indicator
        interactive: true
        count: viewSwipe.count
        currentIndex: viewSwipe.currentIndex

        anchors.top: viewSwipe.bottom
        anchors.topMargin: parent.height * 0.05
        anchors.horizontalCenter: parent.horizontalCenter
    }

i've a button who when clicked, the event should add the pages like an Item. My code is:

  MouseArea{
     anchors.fill: parent
     onClicked: {
         console.log("Cliccato additem")
         //viewSwipe.addItem(RecipesPhase)
         viewSwipe.addPage(RecipesPhase)
     }
  }

But nothing happened. So i've tried also:

     SwipeView {
        id: viewSwipe
        width: parent.width
        height: parent.height * 0.70
        currentIndex: 0
        Component.onCompleted: {
            curIndexWitouthZero = viewSwipe.currentIndex
            curIndexWitouthZero += 1
            addPage(RecipesPhase)
        }

        onCurrentIndexChanged: {
            curIndexWitouthZero = viewSwipe.currentIndex
            curIndexWitouthZero += 1
        }

        function addPage(page) {
            console.log("funzione addPage()")
           addItem(page)
           page.visible = true
        }
    }

and then call:

viewSwipe.addPage(MyPageQML)

but nothing happened. So, the question is, where i'm wrong ? Thanks for the solutions.


Solution

  • RecipesPhase is a component not an Item, a component is analogous to a class and an Item to an object, so the idea is to create the item dynamically. For example, I will consider that RecipesPhase is the following component:

    RecipesPhase.qml

    import QtQuick 2.0
    
    Rectangle {
        width: 100
        height: 100
        color: "red"
    }
    

    Then each time you press the mouseArea you create a RecipesPhase of a random color:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.4
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Example")
        property int curIndexWitouthZero: 0
    
        SwipeView {
            id: viewSwipe
            width: parent.width
            height: parent.height * 0.70
            currentIndex: 0
            Component.onCompleted: {
                curIndexWitouthZero = viewSwipe.currentIndex
                curIndexWitouthZero += 1
                addPage(createPage())
            }
    
            onCurrentIndexChanged: {
                curIndexWitouthZero = viewSwipe.currentIndex
                curIndexWitouthZero += 1
            }
    
            function addPage(page) {
                console.log("funzione addPage()")
                addItem(page)
                page.visible = true
            }
            function createPage(){
                var component = Qt.createComponent("RecipesPhase.qml");
                var page = component.createObject(viewSwipe,
                                                  {"color": Qt.rgba(Math.random(), Math.random(), Math.random(), Math.random())}
                                                  );
                return page
            }
        }
        PageIndicator {
            id: indicator
            interactive: true
            count: viewSwipe.count
            currentIndex: viewSwipe.currentIndex
            onCurrentIndexChanged: viewSwipe.currentIndex = currentIndex
    
            anchors.top: viewSwipe.bottom
            anchors.topMargin: parent.height * 0.05
            anchors.horizontalCenter: parent.horizontalCenter
        }
        MouseArea{
            anchors.top: indicator.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            onClicked: viewSwipe.addPage(viewSwipe.createPage())
        }
    }