Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Dynamic QML Page loader
Forum Updated to NodeBB v4.3 + New Features

Dynamic QML Page loader

Scheduled Pinned Locked Moved Solved QML and Qt Quick
15 Posts 4 Posters 6.6k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ekkescornerE Offline
    ekkescornerE Offline
    ekkescorner
    Qt Champions 2016
    wrote on last edited by
    #5

    @CristianoNarcisiVidex perhaps my blog gives you some hints: https://appbus.wordpress.com/2016/05/27/stacked-pages-app/ (it's something outdated, but you should get the idea HowTo deal with StackView)

    ekke ... Qt Champion 2016 | 2024 ... mobile business apps
    5.15 --> 6.9 https://t1p.de/ekkeChecklist
    QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

    1 Reply Last reply
    2
    • C Offline
      C Offline
      CristianoNarcisiVidex
      wrote on last edited by
      #6

      Thanks @ekkescorner !!! Your blog seems to be very interesting for my purposes. Anyway, i will try to answer either to @shaan7 . I would like to have something that doesn't need to know how the pattern is made. Let me try to explain better ( sorry but my english isn't so rich!).
      Each "page" must contain a Loader object for loading another source. In this way, going back and forward becomes only a call to Loader.setsource("next_page.qml"). The only problem is that i am not still able to close the "current" page as it loads a new one. Doing this, i will have only one QML file loaded at time, reducing the resources used by my interface. I have done this long time ago using QWidget, and i would like to do the same using QML .

      Any hint will be really appreciate!!!

      Thanks a lot

      1 Reply Last reply
      0
      • S Offline
        S Offline
        shaan7
        wrote on last edited by
        #7

        Ah, so you don't want StackView-based navigation per se. In that case, lets say you first call Loader.setSource("Page1.qml"), the Loader will load it and display it. Now, when you want to load Page2, I understand that you want to unload Page1 to conserve resources. To do that, you can simply call Loader.setSource("Page2.qml") and it will do exactly that - it will unload Page1 and load Page2.

        1 Reply Last reply
        1
        • GrecKoG Offline
          GrecKoG Offline
          GrecKo
          Qt Champions 2018
          wrote on last edited by
          #8

          Why not just use StackView and call replace when you want to change the page ?

          1 Reply Last reply
          1
          • C Offline
            C Offline
            CristianoNarcisiVidex
            wrote on last edited by
            #9

            Ok @shaan7 !!! You are suggesting me to use one single Loader, and then each QML file that will be loaded must call it for changing the content of the page, right?
            In this way i can't separate the the pages from the Loader, and i would like to separate each page from any other component as much as possible.

            S 1 Reply Last reply
            0
            • C CristianoNarcisiVidex

              Ok @shaan7 !!! You are suggesting me to use one single Loader, and then each QML file that will be loaded must call it for changing the content of the page, right?
              In this way i can't separate the the pages from the Loader, and i would like to separate each page from any other component as much as possible.

              S Offline
              S Offline
              shaan7
              wrote on last edited by
              #10

              @CristianoNarcisiVidex said in Dynamic QML Page loader:

              In this way i can't separate the the pages from the Loader

              Um, I'm not sure I understand what kind of separation you want here. No matter how you implement things, if you need some code in Page1 to navigate to Page2, then that code will have to call somefunc("Page2.qml"). When you're using a global Loader, its just that somefunc sets the Loader's active property accordingly.

              As an example, lets say I call my somefunc as navigate:

              main.qml:

              Window {
                  width: 800
                  height: 600
              
                  function navigate(page) {
                      loader.source =  page + ".qml";
                  }
              
                  Loader {
                      id: loader
                      anchors.fill: parent
                      source: "Page1.qml"
                  }
              }
              

              Page1.qml

              Item {
                  id: page1
              
                  Button {
                      text: "Next"
                      onClicked: navigate("Page2")
                  }
              }
              

              Page2.qml
              ... as required ...

              In a different approach, I can use a StackView instead of Loader where the navigate will call replace as @GrecKo described.

              C 1 Reply Last reply
              2
              • S shaan7

                @CristianoNarcisiVidex said in Dynamic QML Page loader:

                In this way i can't separate the the pages from the Loader

                Um, I'm not sure I understand what kind of separation you want here. No matter how you implement things, if you need some code in Page1 to navigate to Page2, then that code will have to call somefunc("Page2.qml"). When you're using a global Loader, its just that somefunc sets the Loader's active property accordingly.

                As an example, lets say I call my somefunc as navigate:

                main.qml:

                Window {
                    width: 800
                    height: 600
                
                    function navigate(page) {
                        loader.source =  page + ".qml";
                    }
                
                    Loader {
                        id: loader
                        anchors.fill: parent
                        source: "Page1.qml"
                    }
                }
                

                Page1.qml

                Item {
                    id: page1
                
                    Button {
                        text: "Next"
                        onClicked: navigate("Page2")
                    }
                }
                

                Page2.qml
                ... as required ...

                In a different approach, I can use a StackView instead of Loader where the navigate will call replace as @GrecKo described.

                C Offline
                C Offline
                CristianoNarcisiVidex
                wrote on last edited by
                #11

                Thanks a lot @shaan7! We are about to reach a good solution. I am trying to do the same, but i would like to use Window instead of Item in QML pages. Changing this , the application gets closed after calling the setSource methods.
                Is it the same to you?

                Thanks!

                S 1 Reply Last reply
                0
                • C CristianoNarcisiVidex

                  Thanks a lot @shaan7! We are about to reach a good solution. I am trying to do the same, but i would like to use Window instead of Item in QML pages. Changing this , the application gets closed after calling the setSource methods.
                  Is it the same to you?

                  Thanks!

                  S Offline
                  S Offline
                  shaan7
                  wrote on last edited by
                  #12

                  @CristianoNarcisiVidex said in Dynamic QML Page loader:

                  but i would like to use Window instead of Item in QML pages

                  Why would you do that? It will mean that every time user navigates to new page, a new Window will be shown, it might not be a good experience.

                  About why the application gets closed, can you share a code snippet? Or even a link to a git repo works.

                  1 Reply Last reply
                  0
                  • C Offline
                    C Offline
                    CristianoNarcisiVidex
                    wrote on last edited by CristianoNarcisiVidex
                    #13

                    here is the main.qml, where i have the loader

                    Window {
                        width: 640
                        height: 480
                    
                        function navigate(page)
                        {
                            loader.setSource(page);
                        }
                        Loader
                        {
                            id: loader
                            anchors.fill: parent
                            source: "FirstItem.qml"
                        }
                    }
                    

                    This is FirstItem.qml

                    Window{
                        visible: true
                        width: 800
                        height: 900
                        color: "green"
                    
                        Text {
                            id: element
                            x: 206
                            y: 234
                            text: qsTr("First Element")
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.bold: true
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 43
                        }
                    
                        MouseArea
                        {
                            anchors.fill: parent
                            onClicked:
                            {
                    
                                navigate("SecondItem.qml")
                    
                            }
                        }
                    
                    }
                    
                    
                    

                    And this the second

                    Window{
                        visible: true
                        width: 640
                        height: 480
                        color: "white"
                    
                    
                        Text {
                            id: element
                            x: 206
                            y: 234
                            text: qsTr("Second Element")
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.bold: true
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: 43
                        }
                    
                        MouseArea
                        {
                            anchors.fill: parent
                            onClicked:
                            {
                    
                                navigate("FirstItem.qml")
                    
                    
                            }
                        }
                    
                    }
                    
                    1 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      shaan7
                      wrote on last edited by
                      #14

                      Ah ok, the app exits because the moment your first Window closes (before loading the second), your app has no visible Windows. By default, Qt apps will exit when that happens. You can disable this behavior by adding app.setQuitOnLastWindowClosed(false); in main.cpp

                      C 1 Reply Last reply
                      2
                      • S shaan7

                        Ah ok, the app exits because the moment your first Window closes (before loading the second), your app has no visible Windows. By default, Qt apps will exit when that happens. You can disable this behavior by adding app.setQuitOnLastWindowClosed(false); in main.cpp

                        C Offline
                        C Offline
                        CristianoNarcisiVidex
                        wrote on last edited by
                        #15

                        @shaan7 said in Dynamic QML Page loader:

                        Wonderful!!! You deserve more than one like!!! Thank's a lot @shaan7 !!!

                        1 Reply Last reply
                        1

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved