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

0
votes

I have a 3 Qml page like home.qml, weather.qml and currency.qml. In home.qml page I need to load (as I thought the right way) 3 page and I can use Qml Swipe with Loader to load pages. I need to swipe between pages like 1->2->3 and 3->2->1.

Also, I need show that home.qml page is the first page. I check the **doc.qt.io/qt-5/qml-qtquick-controls2-swipeview . html link but I couldn’t load my other 2 pages, so I can swipe. Where I can get the info, so I can build dynamically loading Qml pages onto main and swipe between pages.

Any help please?

UPDATED WORKING CODE: Tested on Qt5.9.2 in QML app project.

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()
}
1
androidiosqtqmlswipe
Please show the code of your attempt. – derM
@derM I don't know how to start. All the examples shows inline page creation and than use of swipe. I want some help to get start. – NTMS
Why do you need to use a Loader? (This question is not to critizice you or anything. I need to understand your usecase better) – derM
@derM I want to load Qml pages dynamically. There is also a separate c ++ source code where each Qml page is linked. I don't know how and where to start. C++ is not a difficult for me but I am very new to QML. – NTMS
@derM I update my code. – NTMS

1 Answers

0
votes

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