Question

我对编程非常陌生，并试图让swipeview动态添加页面。我的main.qml在下面的代码中。我静态显示设置页面Serialsettings.qml。现在我想添加其他qml页面。我想要这样做的方法是在我的设置页面中为每个qml设置复选框，如果它们是故障单，则应将它们添加到滑动视图中。我该怎么做？

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 的函数。我们稍后会担心这些功能。

<强> 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动态添加页面

1 个答案: