[SOLVED] Load new View

morker

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

ApplicationWindow {
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“)
// or

onTriggered: 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.2

Rectangle {
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?

p3c0

Hi,

"this":http://qt-project.org/doc/qt-5/qml-qtquick-loader.html#loader-sizing-behavior should explain your problem and its solution.

morker

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?

morker

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?

p3c0

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.

morker

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: true

property 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.2

Rectangle {
id: rectangle1

Button {
    id: button1
    text: qsTr("Button")
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
}

}
@

p3c0

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.

morker

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}

}
@