What is the best way open a QML page on mobile?



  • Hi;
    I have 4 QML file: main.qml, mainmenu.qml, A.qml and B.qml.
    I put a Loader into main.qml. But I can't access that Loader from outside main.qml. Also I want to open B.qml on A.qml and I will use a Loader for this job, but should I create static Loader like this:

    property alias loader: pageLoader
    Loader {
      id: pageLoader
    }
    

    Or should I create dynamic like this:

    var component;
    
    function createPageObject(qmlFile) {
      component = Qt.createComponent(qmlFile);
      if (component.status === QtQuick.Component.Ready || component.status === QtQuick.Component.Error) {
        finishCreation();
      } else {
        component.statusChanged.connect(finishCreation);
      }
    }
    
    function finishCreation() {
      if (component.status === QtQuick.Component.Ready) {
        var page = component.createObject(root);
        if (page === null) {
          console.log("Error creating file");
        }
      } else if (component.status === QtQuick.Component.Error) {
        console.log("Error loading component:", component.errorString());
      }
    }
    

    And I call the function like this:

    Row {
        Button {
          text: 'Click Me!'
          onClicked: Scripts.createPageObject('qrc:/A.qml')
        }
        Item { Layout.fillWidth: true }
        Button {
          text: 'Open B.qml!'
          onClicked: Scripts.createPageObject('qrc:/B.qml')
        }
    }
    

    But I get this result:
    alt text
    Also I want to open B.qml file on the main.qml but I wan to open A.qml and mainmenu.qml files as fullscreen (I used anchors.fill: parent). I know these ways for opening QML files. But what is the best way open QML files on mobile? When I opened a QML file to on a another QML file, should I destroy old QML file? Where should I be careful? Thanks.



  • @Ibrahim Do you need to use Loader at all? Why not have the A and B components just used statically in-place in main.qml, and control their visibility by toggling their visible property. This approach will also make it much easier to add fade-in/fly-in type animations later, if that's something you were planning on.

    In my experience, the main reason to use Loader is to retrofit it to apps as they grow in size to defer the loading of significant but not necessarily immediately (or at all) used chunks of QML and improve app start-up times. But there's little reason to use it if you're just starting out on a small app, and the QML compiler ( CONFIG += qtquickcompiler ) seems to have pushed the point at which you need to consider using Loader even further out.



  • @timday, I created an app and I have MainMenu.qml, AppArea.qml, Result.qml and main.qml. My codes:
    main.qml:

    import QtQuick 2.10
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.2
    
    Window {
      id: root
      visible: true
      width: 640
      height: 480
      title: qsTr("Hello World")
    
      property alias loader: pageLoader
      Loader {
        id: pageLoader
      }
    
      Row {
        anchors.centerIn: parent
        Button {
          text: 'Open Result!'
          onClicked: pageLoader.source = 'qrc:/Result.qml'
        }
        Button {
          text: 'Open AppArea!'
          onClicked: pageLoader.source = 'qrc:/AppArea.qml'
        }
      }
    }
    

    AppArea.qml:

    import QtQuick 2.0
    
    Item {
      id: root
      anchors.fill: parent
    
      Row {
        anchors.fill: root
        Rectangle {
          anchors.fill: parent
          color: 'gray'
        }
    
        Repeater {
          model: 6
          anchors.centerIn: parent
          Rectangle {
            width: 100
            height: 100
            color: 'green'
            Text {
              text: index
              font.pointSize: 15
              anchors.centerIn: parent
              color: 'white'
            }
          }
        }
      }
    }
    

    Result.qml:

    import QtQuick 2.0
    
    Item {
      id: root
      width: 300
      height: 300
      y: -300
      Rectangle {
        color: '#3f3f3f'
        opacity: 15
        anchors.fill: parent
        Text {
          text: 'HELLO WORLD!'
          color: 'white'
          font.pointSize: 20
          anchors.centerIn: parent
        }
    
        NumberAnimation {
          target: parent
          property: 'y'
          to: (screen.height / 2) - (parent.height / 2)
          duration: 2000
          running: true
        }
      }
    }
    

    When I get this result with these codes:
    https://www.dropbox.com/s/gp4hk0zxm4t7hz5/result.mp4?dl=0
    Actually I want to show MainMenu.qml and AppArea.qml as fullscreen new window. There is a button as Click to press to open App! on MainMenu.qml. When I click that button, open the AppArea.qml and I want creating again Repeater in AppArea.qml (because model maybe different like 1, 2 ...).
    Should I start AppArea.qml and MainMenu.qml?
    Also I have to open Result.qml on AppArea.qml. I mean if I click the button on AppArea.qml, AppArea.qml window doesn't close but I open Result.qml on AppArea.qml. But when I click the button on Result.qml, Result.qml shall destroy and AppArea.qml opening again or I shall creating again Repeater.
    How should I plan my way for these jobs?



  • @Ibrahim Sorry I just don't understand why you'd do it like that (with a Loader) rather than (this is just a sketchy outline) like this:

    Window {
    
      AppArea {
        id: appArea
        visible: false
      }
      Result {
        id: result
        visible: false
      }
    
      Button {text: 'Show Result';onClicked: result.visible=true;}
      Button {text: 'Show AppArea';onClicked: appArea.visible=true;}
      
    }
    

    Possibly you're unaware that having the Result.qml and AppArea.qml files gets you Result and AppArea element types you can just use?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.