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. How to preload the child.qml files while loading the main.qml file
Forum Updated to NodeBB v4.3 + New Features

How to preload the child.qml files while loading the main.qml file

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 3 Posters 1.1k 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.
  • J Offline
    J Offline
    James A
    wrote on last edited by
    #1

    Hai All,

    I have child.qml file with TableView. On clicking a button from the main.qml file it loads the child.qml file
    There is delay in loading the child.qml Page due to the TableView component. And I am running this application in a embedded board.

    How to preload the Child.qml file while loading the main.qml file. But make it visible only on clicking the button. ?
    Or Is it possible to load the child.qml to the cache ? , so when I click the button for the second time it loads the qml file faster

    main.qml

     msa_chager.onClicked: {
            console.log("clicked")
            StackView.view.push("child.qml")
        } 
    

    child.qml

    Page {
        StackLayout {
            width: parent.width
            height: parent.height-tabBar.height
            currentIndex: tabBar.currentIndex
    
            LiveView{}
            
    } 
    

    LiveView.qml

    Item {
        id: item1
        property alias btn_ClearFaults: btn_ClearFaults
    
        TableView {
            anchors.fill: parent
            anchors.rightMargin: 20
            anchors.leftMargin: 25
            anchors.bottomMargin: 66
            anchors.topMargin: 20
            TableViewColumn {
                role: "ID"
                title: "ID"
                width: 100
            }
            TableViewColumn {
                role: "Description"
                title: "Description"
                width: 675
            }
    
            model: liveView
        }
    }
    
    kshegunovK 1 Reply Last reply
    0
    • J James A

      Hai All,

      I have child.qml file with TableView. On clicking a button from the main.qml file it loads the child.qml file
      There is delay in loading the child.qml Page due to the TableView component. And I am running this application in a embedded board.

      How to preload the Child.qml file while loading the main.qml file. But make it visible only on clicking the button. ?
      Or Is it possible to load the child.qml to the cache ? , so when I click the button for the second time it loads the qml file faster

      main.qml

       msa_chager.onClicked: {
              console.log("clicked")
              StackView.view.push("child.qml")
          } 
      

      child.qml

      Page {
          StackLayout {
              width: parent.width
              height: parent.height-tabBar.height
              currentIndex: tabBar.currentIndex
      
              LiveView{}
              
      } 
      

      LiveView.qml

      Item {
          id: item1
          property alias btn_ClearFaults: btn_ClearFaults
      
          TableView {
              anchors.fill: parent
              anchors.rightMargin: 20
              anchors.leftMargin: 25
              anchors.bottomMargin: 66
              anchors.topMargin: 20
              TableViewColumn {
                  role: "ID"
                  title: "ID"
                  width: 100
              }
              TableViewColumn {
                  role: "Description"
                  title: "Description"
                  width: 675
              }
      
              model: liveView
          }
      }
      
      kshegunovK Offline
      kshegunovK Offline
      kshegunov
      Moderators
      wrote on last edited by kshegunov
      #2

      Something along these lines?

      Main.qml

      RootQMLItem {
          id: rootItem
          property var childComponent;
      
          msa_chager.onClicked: {
              if (childComponent.status != Component.Ready)  {
                  return // still loading
              }
              var item = childComponent.createObject(rootItem)
              ​StackView.view.push(item)
          ​}
      
          Component.onCompleted {
              childComponent = Qt.createComponent("child.qml", Component.Asynchronous, rootItem);
          }
      }
      

      ... or you could use a Loader instead.

      Read and abide by the Qt Code of Conduct

      1 Reply Last reply
      1
      • J Offline
        J Offline
        James A
        wrote on last edited by
        #3

        @kshegunov

        The creation of object is happening at the below line, which is again causing the delay in loading the UI.

         var item = childComponent.createObject(rootItem)
        

        Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster

        kshegunovK 1 Reply Last reply
        0
        • J James A

          @kshegunov

          The creation of object is happening at the below line, which is again causing the delay in loading the UI.

           var item = childComponent.createObject(rootItem)
          

          Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster

          kshegunovK Offline
          kshegunovK Offline
          kshegunov
          Moderators
          wrote on last edited by
          #4

          @James-A said in How to preload the child.qml files while loading the main.qml file:

          The creation of object is happening at the below line, which is again causing the delay in loading the UI.

          If the object creation is the heavy thing, then you could incubate the object (offload the instantiation) - see here:
          https://doc.qt.io/qt-5/qml-qtqml-component.html#incubateObject-method

          Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster.

          Yes, it is. You just put the creation code there instead of the click handler. However do keep an instance to the component so you can check if it's been loaded/completed. Btw, doesn't Loader work for your case?

          Read and abide by the Qt Code of Conduct

          1 Reply Last reply
          0
          • J.HilkJ Offline
            J.HilkJ Offline
            J.Hilk
            Moderators
            wrote on last edited by
            #5

            @James-A like @kshegunov said, Loader is the way to go, make sure to set the asynchronous property to true


            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            1 Reply Last reply
            0

            • Login

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