如何构建动态加载 Qml 页面到主页面并在页面之间滑动?
How to build dynamically loading Qml pages onto main and swipe between pages?
我有一个 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()
}
代码以简单的方式显示。这是代码:
我创建了一个新的 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()
}
我有一个 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()
}
代码以简单的方式显示。这是代码: 我创建了一个新的 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()
}