[SOLVED] Load new View
-
Hi there,
i’m developing an android app.
My qml file look like this:
@
//timeline.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1ApplicationWindow {
id: applicationWindow1
visible: true
width: 1200
height: 1920
title: qsTr("whatsOn")
Loader { id: pageLoader }
signal qmlSignal(string msg)menuBar: MenuBar { id: theMenu objectName: "menuBar" Menu { title: qsTr("File") MenuItem { objectName: "menItemName" text: qsTr("Einstellungen");
// onTriggered: applicationWindow1.qmlSignal("Hello from qml“)
// oronTriggered: pageLoader.source = "MyItem.qml"
}
MenuSeparator {}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}// ...
@and I want to load this qml file:
@
//MyItem.qml
import QtQuick 2.0
import QtQuick.Controls 1.2Rectangle {
width: 1200
height: 1920
anchors.fill: parent
objectName: "rect"Button { id: button1 x: 300 y: 200 text: qsTr("Button Test TEst ") }
}
@I’m trying to load a new qml file if the MenuItem is pushed. In the above code you can see two alternatives (see onTriggered):
I tried to load a new qml in my c++ code (with QQmlApplicationEngine) and I also tried to load a new qml file with the page loader.
The first alternative does’t work for me. The second works but the MyItem.qml doesn’t cover the first view, it just add another button to the timeline.qml. I also tried to replace the Rectangle with a ApplicationWindow but it doesn’t work.
How can I do this? What is the best practice to load a new qml file?
Can someone help?
-
Hi,
"this":http://qt-project.org/doc/qt-5/qml-qtquick-loader.html#loader-sizing-behavior should explain your problem and its solution.
-
Thanks for your replay,
my start view (timeline.qml) is always on top so that my second view, if I push the button is behind my start view.
Is there any propertie for the loader that the first view will automaticly invisable or something like that?
-
Thanks for your replay,
my start view (timeline.qml) is always on top so that my second view, if I push the button is behind my start view.
Is there any propertie for the loader that the first view will automaticly invisable or something like that?
-
bq. If an explicit size is not specified for the Loader, the Loader is automatically resized to the size of the loaded item once the component is loaded.
Hence MyItem.qml doesn’t cover the first view
bq. If the size of the Loader is specified explicitly by setting the width, height or by anchoring, the loaded item will be resized to the size of the Loader.
This is the solution. So provide a size to your Loader element by specifying width or height or use anchors.fill: parent and your firstview will be overcome by the Loader Item.
-
Hi,
thanks, i add "anchors.fill: parent" but my timline still covers the MyItem.qml. If I uncomment the timline than I can see the MyItem.
My main.qml
@ApplicationWindow {
id: applicationWindow1
visible: true
width: 1200
height: 1920
title: qsTr("whatsOn")Loader { id: pageLoader anchors.fill: parent } menuBar: MenuBar { Menu { title: qsTr("File") MenuItem { text: qsTr("Verbindung"); onTriggered: pageLoader.source = "MyItem.qml"; } MenuSeparator {} MenuItem { text: qsTr("Exit") onTriggered: Qt.quit(); } } } Timeline{}
}
@My timline:
@Rectangle {
id: rectangle1
width: 1200
height: 1920
visible: trueproperty alias timlineVisible: rectangle1.visible Component { id: contactDelegate Item { width: grid.cellWidth; height: grid.cellHeight Column { anchors.fill: parent spacing: 20 Button { id: deviceImageButton; iconSource: deviceImage; visible: elementVisible; anchors.horizontalCenter: parent.horizontalCenter; onClicked: setVisibleEffect(euroText, kwhText, timeText)} Text { id: euroText; text: euro; font.pointSize: 12; visible: false; anchors.horizontalCenter: parent.horizontalCenter } Text { id: kwhText; text: kwh; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter } Text { id: timeText; text: time; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter } Text { id: dataText; text: date; visible: true; anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.horizontalCenter } move: Transition { NumberAnimation { properties: "x,y"; duration: 2000 } } } function setVisibleEffect(euroText, kwhText, timeText) { euroText.visible = !euroText.visible kwhText.visible = !kwhText.visible timeText.visible = !timeText.visible } } } GridView { id: grid flickableDirection: Flickable.AutoFlickDirection anchors.fill: parent cellWidth: grid.width/3 cellHeight: grid.height/3 anchors.margins: 100 // flow: GridView.LeftToRight model: ContactModel {} delegate: contactDelegate }
}
@My MyItem:
@import QtQuick 2.0
import QtQuick.Controls 1.2Rectangle {
id: rectangle1Button { id: button1 text: qsTr("Button") anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter }
}
@ -
Now here since Timeline Component is loader after Loader Component, Timeline Component is actually overlapped over Loader component and hence MyItem which is child of Loader is not displayed. Just specify z values as per your requirements.
For eg z: 1 for Loader and z: 0 for Timeline. -
Thanks, it works ;-)
the z values did the trick!
@
ApplicationWindow {
id: applicationWindow1
visible: true
width: 1200
height: 1920
title: qsTr("whatsOn")
Loader {
id: pageLoader
anchors.fill: parent
z: 1
}// signal qmlSignal(string msg) menuBar: MenuBar { Menu { title: qsTr("File") MenuItem { text: qsTr("Verbindung"); onTriggered: pageLoader.source = "MyItem.qml"; } MenuSeparator {} MenuItem { text: qsTr("Exit") onTriggered: Qt.quit(); } } } Timeline{z: 0}
}
@