Forums

OverviewFelgo 2 Support (Qt 5) › How to build dynamically loading Qml pages onto main and swipe between pages?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17798

    Niyazi

    Hi,

    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?

    #17807

    Günther
    Felgo Team
    #17810

    Niyazi

    Yes I looked it. Very confusing me. I am looking for the loading another 2 page and swipe between them.

     

    Say there is a main.qml file. I add another 2 page such as weather.qml and currency.qml.  From my main.qml I need to swipe between this3 pages.Somewhere in main.qml page I need to load other 2 qml page for swipe each other. Your link can’t show loading qml page and swipe between them.

     

    Do you know where I can get small example for my query?

     

    Kind Regards

    #17830

    Günther
    Felgo Team

     

    Hi!

    The use-case from the demo app I mentioned simply shows how to use a SwipeView in your app. You can use the same principle there to add a SwipeView for your project.

    The TimeTablePage from the example dynamically sets the tabs + pages, which is actually a bit more complex than what you need. You can also just use AppTabBar and SwipeView in the same way for your static navigation setup. The AppTabBar handles your tabs defined as AppTabButton items (three tabs in your case). For the SwipeView, you can just show any kind of QML Item within the view, like your three pages.

    Is there a specific reason why this does not work in your case?

    Best,
    Günther

    #17839

    Niyazi

    Thank you Günther,

    Is working now. I reduce the code for just to 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.

     

     

     
    <div>import Felgo 3.0
    import QtQuick 2.4
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.2</div>
    <div>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” }
    }
    }</div>
    <div>    SwipeView {
    id: view
    currentIndex: 0
    anchors.fill: parent
    anchors.top: parent.top</div>
    <div>                    Item{
    id: firstItem
    Loader {
    // index 0
    id: pageOneLoader
    source: “Page1.qml”
    anchors.fill: parent
    anchors.top: parent.top
    }
    }</div>
    <div>
    Item{
    id: secondItem
    Loader {
    // index 1
    id: pageSecondLoader
    source: “Page2.qml”
    anchors.fill: parent
    anchors.top: parent.top
    }
    }</div>
    <div>
    Item{
    id: thirdItem
    Loader {
    // index 2
    id: pageThirdLoader
    source: “Page3.qml”
    anchors.fill: parent
    anchors.top: parent.top
    }
    }</div>
    <div>                }</div>
    <div>                PageIndicator {
    id: indicator
    count: view.count
    currentIndex: view.currentIndex
    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    }</div>
    <div>}</div>
    <div></div>
    <div>And Each page (page1, page2 etc) I add below code;</div>
    <div>   // emitting a Signal could be another option
    Component.onDestruction: {
    cleanup()
    }</div>
    <div></div>

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support