Important: Please read the Qt Code of Conduct -
What is the best way open a QML page on mobile?
Hi;
I have 4 QML file:
main.qml,
mainmenu.qml,
A.qmland
B.qml.
I put a
Loaderinto
main.qml. But I can't access that
Loaderfrom outside
main.qml. Also I want to open
B.qmlon
A.qmland I will use a
Loaderfor this job, but should I create static
Loaderlike 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:
Also I want to open
B.qmlfile on the
main.qmlbut I wan to open
A.qmland
mainmenu.qmlfiles 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.qmland
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:
Actually I want to show
MainMenu.qmland
AppArea.qmlas 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.qmland I want creating again
Repeaterin
AppArea.qml(because
modelmaybe different like
1,
2...).
Should I start
AppArea.qmland
MainMenu.qml?
Also I have to open
Result.qmlon
AppArea.qml. I mean if I click the button on
AppArea.qml,
AppArea.qmlwindow doesn't close but I open
Result.qmlon
AppArea.qml. But when I click the button on
Result.qml, Result.qml shall destroy and
AppArea.qmlopening 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?