QML Swipeview动态添加页面 [英] QML Swipeview dynamically add pages

问题描述

我对编程非常陌生，并尝试获取swipeview动态添加页面.我的main.qml在下面的代码中.我有静态显示的设置"页面Serialsettings.qml.现在，我想添加其他qml页面.我要执行此操作的方法是，在我的设置页中为每个qml设置复选框，如果它们是工单，则应将其添加到swipeview中.我该怎么做?

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.

本示例中使用的策略是准备和隐藏页面.然后将它们添加到视图中，并在必要时显示它们，或者如果用户愿意，将它们隐藏起来并从视图中删除.

这是带有三个复选框的表单，分别是 chkPage1 ， chkPage2 和 chkPage3 .您可以根据需要添加任意数量的复选框，只需遵循相同的模式即可.当然，可以随意重新排列和自定义它们.在此示例中，我使用别名，即属性别名chkPagex:chkPagex .您可能会发现使用信号更好，但是仅出于演示目的，让我们采用这种方式.

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")
        }
    }
}

现在让我们向复选框添加一些功能.基本上，当用户使用特定的复选框进行迭代时，将使用相应的 page 作为参数调用 SwipeView 的功能.稍后我们将担心这些功能.

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) }
}

最后，这是main.qml的内容:

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"
        }
    }
}

请记下添加到 SwipeView 中的这两个函数，即 function addPage(page)和 function removePage(page).在此示例中，页面始终添加到视图的末尾.如果要始终按升序排列它们，则必须使上述功能更加详细.在此处中检查从容器，如果您想使用它的话.

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.

这篇关于QML Swipeview动态添加页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！