QML Swipeview add pages dynamically

I have prepared a small example for you. It will show you how to have a page with three checkboxes. With its help, the user could add / remove corresponding pages upon request.

The strategy used in this example is to prepare and hide the pages. Then add them to the view and show them if needed, or hide them back and remove them from the view if the user wants to.

Here is a form with three checkboxes, namely chkPage1, chkPage2, and chkPage3. You can add as many checkboxes as you like, just follow one pattern. Of course, feel free to change and customize them. In this example, I am using aliases i.e. property alias chkPagex: chkPagex

... You might be better off using signals, but let it be for the sake of demonstration.

SerialSettingsForm.ui.qml

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

Item {
    property alias chkPage1: chkPage1
    property alias chkPage2: chkPage2
    property alias chkPage3: chkPage3

    ColumnLayout {
        id: columnLayout
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.fill: parent

        CheckBox {
            id: chkPage1
            text: qsTr("Page 1")
        }

        CheckBox {
            id: chkPage2
            text: qsTr("Page 2")
        }

        CheckBox {
            id: chkPage3
            text: qsTr("Page 3")
        }
    }
}

      

        
        
        
      

    

Now add some functionality to these checkboxes. Basically, when the user iterates with a specific checkbox, the SwipeView function will be called with the appropriate page as a parameter. We'll worry about these features later.

SerialSettings.qml

import QtQuick 2.7

SerialSettingsForm {
    chkPage1.onClicked: { chkPage1.checked ? view.addPage(page1) : view.removePage(page1) }
    chkPage2.onClicked: { chkPage2.checked ? view.addPage(page2) : view.removePage(page2) }
    chkPage3.onClicked: { chkPage3.checked ? view.addPage(page3) : view.removePage(page3) }
}

      

        
        
        
      

    

Finally, here is the content of main.qml:

main.qml

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

ApplicationWindow {
    visible: true
    minimumWidth: 800
    minimumHeight: 480
    title: qsTr("PowerTune")
    color: "lightBlue"

    SwipeView {
        id: view
        currentIndex: 0
        anchors.fill: parent

        function addPage(page) {
            addItem(page)
            page.visible = true
        }

        function removePage(page) {
            for (var n = 0; n < count; n++) { if (page === itemAt(n)) { removeItem(n) } }
            page.visible = false
        }

        SerialSettings {
            id: firstpage
        }
    }

    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

    Page {
        id: page1
        visible: false;
        background: Rectangle { color: "yellow" }
        Label {
            text: "Page1"
        }
    }

    Page {
        id: page2
        visible: false;
        background: Rectangle { color: "lightGreen" }
        Label {
            text: "Page2"
        }
    }

    Page {
        id: page3
        visible: false;
        background: Rectangle { color: "magenta" }
        Label {
            text: "Page3"
        }
    }
}

      

        
        
        
      

    

Please take a look at these two features added to SwipeView i.e. function addPage(page)

and function removePage(page)

. In this example, pages are always added to the end of the view. If you want them to always be in order, you have to make the above functions more complex. Check out the members inherited from the container here if you want to play with it.