Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.