如何构建动态加载 Qml 页面到主页面并在页面之间滑动？

Question

我有一个 3 Qml 的页面，例如 home.qml、weather.qml 和 currency.qml。在 home.qml 页面中，我需要加载（我认为正确的方式）3 页，我可以使用带有加载器的 Qml Swipe 来加载页面。我需要在 1->2->3 和 3->2->1 等页面之间滑动。

此外，我需要显示 home.qml 页是第一页。我检查了 **doc.qt.io/qt-5/qml-qtquick-controls2-swipeview 。 html link 但我无法加载我的其他 2 个页面，所以我可以滑动。我在哪里可以获得信息，因此我可以构建动态加载 Qml 页面到主页面并在页面之间滑动。

有什么帮助吗？

更新的工作代码：在 QML 应用程序项目中的 Qt5.9.2 上测试。

代码以简单的方式显示。这是代码：

我新建了一个VPlay APP。它仅在 Main.qml 文件中。比我添加 3 页（Page1.qml、Page2.qml 和 Page3.qml）在 Main.qml 我添加以下代码。

import VPlayApps 1.0
import QtQuick 2.4
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
Page {
anchors.fill: parent
// Background
Rectangle {
y: 0; width: parent.width; height: parent.height
gradient: Gradient {
GradientStop { position: 0.00; color: “#1AD6FD”  }
GradientStop { position: 1.00; color: “#1D62F0” }
}
}
    SwipeView {
id: view
currentIndex: 0
anchors.fill: parent
anchors.top: parent.top
                    Item{
id: firstItem
Loader {
// index 0
id: pageOneLoader
source: “Page1.qml”
anchors.fill: parent
anchors.top: parent.top
}
}

Item{
id: secondItem
Loader {
// index 1
id: pageSecondLoader
source: “Page2.qml”
anchors.fill: parent
anchors.top: parent.top
}
}

Item{
id: thirdItem
Loader {
// index 2
id: pageThirdLoader
source: “Page3.qml”
anchors.fill: parent
anchors.top: parent.top
}
}
                }
                PageIndicator {
id: indicator
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}

每页（第 1 页、第 2 页等）我添加以下代码；

   // emitting a Signal could be another option
Component.onDestruction: {
cleanup()
}

Answer 1

代码以简单的方式显示。这是代码：我创建了一个新的 VPlay APP。它仅在 Main.qml 文件中。比我添加 3 页（Page1.qml、Page2.qml 和 Page3.qml）在 Main.qml 我添加下面的代码。

import VPlayApps 1.0
import QtQuick 2.4
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
Page {
anchors.fill: parent
// Background
Rectangle {
y: 0; width: parent.width; height: parent.height
gradient: Gradient {
GradientStop { position: 0.00; color: “#1AD6FD”  }
GradientStop { position: 1.00; color: “#1D62F0” }
}
}
    SwipeView {
id: view
currentIndex: 0
anchors.fill: parent
anchors.top: parent.top
                    Item{
id: firstItem
Loader {
// index 0
id: pageOneLoader
source: “Page1.qml”
anchors.fill: parent
anchors.top: parent.top
}
}

Item{
id: secondItem
Loader {
// index 1
id: pageSecondLoader
source: “Page2.qml”
anchors.fill: parent
anchors.top: parent.top
}
}

Item{
id: thirdItem
Loader {
// index 2
id: pageThirdLoader
source: “Page3.qml”
anchors.fill: parent
anchors.top: parent.top
}
}
                }
                PageIndicator {
id: indicator
count: view.count
currentIndex: view.currentIndex
anchors.bottom: view.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}

每页（第 1 页、第 2 页等）我添加以下代码；

   // emitting a Signal could be another option
Component.onDestruction: {
cleanup()
}

如何构建动态加载 Qml 页面到主页面并在页面之间滑动？

How to build dynamically loading Qml pages onto main and swipe between pages?

qt

android

swipe

qml

ios