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

我已经为你准备了一个小例子。它将向您展示如何创建一个包含三个复选框的页面。在他们的帮助下，用户可以 add/remove 按需访问相应的页面。

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

这是带有三个复选框的表单，即 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 的函数，并使用相应的 page 作为参数。我们稍后会担心这些功能。

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的内容：

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)。在此示例中，页面始终添加到视图的末尾。如果您想让它们始终按升序排列，则必须使上述功能更加详尽。如果您想使用它，请检查 here 从 Container 继承的成员。

QML Swipeview动态添加页面

QML Swipeview dynamically add pages

checkbox

qml

swipeview

qtquick2