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

Ibrahim

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.

timday

@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.

Ibrahim

@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?

timday

@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?