using loader in qml

4
votes

I have multiple QML files. I just want to link them. Then I want to return to my home page from every page I navigate to. I am using loader in every page Here is my code.

import QtQuick 1.1
Rectangle{
    id:welcome
    width:480
    height:272
    Loader{
        id:loader
        focus:false
        anchors.fill: parent
    }
    gradient: Gradient {
        GradientStop { position: 0.0; color: "light blue" }
        GradientStop { position: 1.0; color: "blue" }
    }
    Text{
        text:"\n\t\tPRESS ENTER"
        font.bold:true
        font.pointSize: 17
    }
    Button {
    id: wel
        height:30;
        x:parent.width/2-30
        y:parent.height/2-30
        focus:true
        border.color:"black"
        opacity: activeFocus ? 1.0 : 0.5
        Text{   
            text:"WELCOME"
            anchors.horizontalCenter:wel.horizontalCenter;
            anchors.verticalCenter:wel.verticalCenter;
        }   
        Keys.onReturnPressed: {
            wel.focus=false
            loader.focus=true;
            anchors.fill=parent
           loader.source="Home.qml";
            //welcome.visible=false;
        }
    }
}

My question is whenever I click on the button its loading new file. But the welcome page will not go. Both the file's will be overlapped. When I did visible=false complete UI will go. I get a white screen. Can any one help me fix this problem? How to load other file?

1
qtqml

1 Answers

5
votes

To load multiple pages you will need to use Connections element to handle signal from the page you have loaded.

Loader {
    id: windowLoader
    source: "Welcome.qml"
    focus: true

    property bool valid: item !== null
}
Button {
    Keys.onReturnPressed: {
        windowLoader.source = "Page1.qml"
    }
}
Connections {
    ignoreUnknownSignals: true
    target: windowLoader.valid? windowLoader.item : null
    onChangeToPage2: { windowLoader.source = "Page2.qml" }
    onPageExit: { windowLoader.source = "Welcome.qml" }
}

And from the pages you load you will need to emit the "changeToPage2" and "pageExit" signals. The emitted signals will be handled by the Connections element.

Page1.qml:

Rectangle {
    id: page1
    signal changeToPage2
    signal pageExit
    Button {
        id: exitButton
        Keys.onReturnPressed: { page1.pageExit() }
    }
}