首页 文章

如何构建动态加载Qml页面到主页面和刷卡页面？

提问于
浏览 次
0

我有一个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()
}
android ios qt qml swipe

1 回答

  • 0

    Code is show in a simple way. Here is the code: I create a new VPlay APP. It was only In Main.qml file. Than I add 3 page (Page1.qml, Page2.qml and Page3.qml) In Main.qml I add below code.

    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
}
}

    And Each page (page1, page2 etc) I add below code;

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

相关问题