QML Swipeview dynamically add pages

Question

I am very new to programming and trying to get swipeview to dynamically add pages. My main.qml is in the code below . I have the Settings page Serialsettings.qml displayed statically . Now i would like to add other qml pages . The way how i want to do this is by having check boxes in my settings page for each qml , and if they are ticket they should be added to the swipeview . How do i do this ?

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import com.powertune 1.0

ApplicationWindow {


    visible: true
    minimumWidth: 800
    minimumHeight: 480
    title: qsTr("PowerTune")
    color: "black"



    SwipeView {
        id: view

        currentIndex: 0
        anchors.fill: parent

        Item {
            id: firstpage
            SerialSettings{} // Loads Serialsettings.qml into SwipeView
        }

        //Add pages dynamically via Checkboxes in Serialsettings.qml
    }


    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

Answer 1

I've prepared a small example for you. It will show you how to have a page with three checkboxes. With thier help the user could add/remove the corresponding pages on demand.

The strategy used in this example is to have the pages prepared and hidden. Then add them to the view and show them if necessary, or hide them back and remove them from the view if the user want so.

Here is the form with the three checkboxes, namely chkPage1, chkPage2 and chkPage3. You may add as many checkboxes as you want, just follow the same pattern. Of course, feel free to rearrange and customize them. In this example I am using aliases, i.e. property alias chkPagex: chkPagex. You may find it better to use signals, but let's make it this way just for the sake of the 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 let's add some functionality to the checkboxes. Basically, when the user iteracts with a particular checkbox a function of the SwipeView will be called with the corresponding page as parameter. We will worry about those functions 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 the 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 make a note of these two functions added to the SwipeView, i.e. function addPage(page) and function removePage(page). In this example the pages are always added to the end of the view. If you want to have them always in accending order you have to make the above mentioned functions more elaborate. Check here the members inherited from Container if you want to play around with it.