Unsolved What is the best way open a QML page on mobile?
-
Hi;
I have 4 QML file:main.qml
,mainmenu.qml
,A.qml
andB.qml
.
I put aLoader
intomain.qml
. But I can't access thatLoader
from outsidemain.qml
. Also I want to openB.qml
onA.qml
and I will use aLoader
for this job, but should I create staticLoader
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:
Also I want to openB.qml
file on themain.qml
but I wan to openA.qml
andmainmenu.qml
files as fullscreen (I usedanchors.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
andmain.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 showMainMenu.qml
andAppArea.qml
as fullscreen new window. There is a button asClick to press to open App!
onMainMenu.qml
. When I click that button, open theAppArea.qml
and I want creating againRepeater
inAppArea.qml
(becausemodel
maybe different like1
,2
...).
Should I startAppArea.qml
andMainMenu.qml
?
Also I have to openResult.qml
onAppArea.qml
. I mean if I click the button onAppArea.qml
,AppArea.qml
window doesn't close but I openResult.qml
onAppArea.qml
. But when I click the button onResult.qml
, Result.qml shall destroy andAppArea.qml
opening again or I shall creating againRepeater
.
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?