Question

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

另外，我需要显示home.qml页面是第一页。我检查了** doc.qt.io / qt-5 / qml-qtquick-controls2-swipeview。 HTML链接，但我无法加载我的其他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页面到主页面和刷卡页面？

1 个答案: