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.您可以根据需要添加任意数量的复选框，只需遵循相同的模式即可.当然，您可以随意重新排列和自定义它们.在此示例中，我使用了别名，即 property alias 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")
        }
    }
}

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

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:

ma​​in.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屋！