QML Swipeview动态添加页面

Question

我是编程和尝试获取swipeview来动态添加页面的新手。我的main.qml在下面的代码中。我有静态显示的“设置”页面Serialsettings.qml。现在，我想添加其他qml页面。我要这样做的方法是，在我的设置页面中为每个qml设置复选框，如果它们是工单，则应将其添加到swipeview中。我该怎么做呢 ？

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

我为你准备了一个小例子。它将向您展示如何拥有一个包含三个复选框的页面。在他们的帮助下，用户可以根据需要添加/删除相应的页面。

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

这是带有三个复选框的表单，即chkPage1、chkPage2和chkPage3。您可以根据需要添加任意数量的复选框，只需遵循相同的模式即可。当然，您可以随意重新排列和自定义它们。在此示例中，我使用别名，即property alias chkPagex: chkPagex. 您可能会发现使用信号更好，但我们这样做只是为了演示。

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的函数，并以相应的页面作为参数。我们稍后会担心这些功能。

串行设置.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的内容：

主.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)。在此示例中，页面始终添加到视图的末尾。如果您想让它们始终按升序排列，则必须使上述函数更加复杂。如果您想尝试一下，请在此处检查从Container继承的成员。