[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.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?


  • Moderators

    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?


  • Moderators

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

    }
    @


  • Moderators

    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}
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.