×

Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    May 2009
    Location
    Guatemala
    Posts
    186

    Question How to call/load another QML file (a completely new screen) from QML ?

    Hello.

    This must be very simple, but I'm just starting to test Qt Quick and have not seen any example of it.

    Say I have a main.qml file which shows a listview, and I have another QML file which is a form with some buttons and text inputs.

    What code should I use in main.qml so my other qml file (the other form) gets loaded when a list item is clicked ?

    Code:
                MouseArea {
                    anchors.fill: parent
                    onClicked: {/* what code should I put here to call the other qml file ? */}            }
    Does this make sense ?

    Thank you very much.
    Last edited by cadlg; 2011-03-07 at 20:39. Reason: title clarification
    -CarlosDL

  2. #2
    Nokia Developer Moderator
    Join Date
    Mar 2003
    Location
    Lempäälä/Finland
    Posts
    29,167

    Re: How to call/load another QML file (a completely new screen) from QML ?

    basically you would include a script file, then you could use the import statement, like is done in here: http://doc.qt.nokia.com/4.7-snapshot...avascript.html

    and if you would have QML file, it would actually then have a element inside it, and you would use the filename of the QML file as a element name to include it in your own QML file.

  3. #3
    Registered User
    Join Date
    May 2009
    Location
    Guatemala
    Posts
    186

    Re: How to call/load another QML file (a completely new screen) from QML ?

    Thanks for your answer, Symbianyucca. I appreciate your time and your interest.

    But, either you didn't understand my question, or I didn't understand your answer

    I'm not trying to include some element from another qml file into the current screen. I'm trying to completely switch screens when some mouse area is clicked.

    Searching on the web I found a recommendation to do it using a Loader element, something like this:


    Code:
    Item {
        id: mainItem
    
        Loader {
            id: mainLoader
        }
        MouseArea{
            anchors.fill: parent
            onClicked: mainLoader.source = "main2.qml"
        }
    }
    Using this method the screen described in main2.qml is displayed, but objects defined in that file don't respond to mouse clicks.

    Calling another form is done easily in Qt C++. I'm just looking for the equivalent in QML.

    Thank you.
    -CarlosDL

  4. #4
    Super Contributor
    Join Date
    Mar 2005
    Location
    Paris
    Posts
    814

    Re: How to call/load another QML file (a completely new screen) from QML ?

    they don't respond to mouseclick because the mousearea you declare takes all the screen.
    may be something like this :

    Code:
    Item {
        id: mainItem
        MouseArea {
           anchors.fill: parent
           onClicked: mainItem.opacity = 0; secondItem.opacity = 1
        }
    }
    // assuming your qml file is named main2.qml
    main2 {
        id: secondItem
        opacity: 0
    }
    Of course, all that is better is you use states http://doc.qt.nokia.com/latest/qml-state-elements.html http://doc.qt.nokia.com/latest/qdeclarativestates.html

  5. #5
    Registered User
    Join Date
    May 2009
    Location
    Guatemala
    Posts
    186

    Re: How to call/load another QML file (a completely new screen) from QML ?

    Thanks njzk2, that works, but it makes the main2.qml file to be loaded from the beginning, and if the app is comprised of many different screens I guess that could lead to a performance degradation.

    I managed to make it work loading additional files dinamically in the following way:

    In the main file I have this:

    Code:
    ... 
    ... 
    Loader { 
    id: mainLoader 
    anchors.fill: parent 
    } 
    Rectangle { 
    id: firstItem 
    anchors.fill: parent 
    ... 
    ... 
    Connections { 
    target: mainLoader.item 
    onShowScreen: mainLoader.source = file; 
    } 
    ...
            MouseArea{
                anchors.fill: parent
                onClicked: {mainLoader.source = "main2.qml"; firstItem.opacity = 0;}
            }
    }
    And in the other files that are going to be called, I have this:

    Code:
    signal showScreen(string file) 
    
    ... 
    ... 
    MouseArea { 
    ... 
    ... 
    onClicked: myRectangle.showScreen("otherFile.qml") 
    }
    This way only the main file and one additional file is loaded in memory at any time, and it works well visually, but it gets complicated when the application needs to call many different screens and needs to be able to navigate to other previously opened ones.

    On the other hand, using the opacity property to hide previous screens and to be able to get the new screens to react to user interaction seems more like a workaround to me, and make these questions arise:

    Is this the correct way to switch screens in QML ?
    Should QML be used for this kind of apps that need to be able to navigate between many different screens, or should I be using a QWidget based UI instead ?
    -CarlosDL

  6. #6
    Nokia Developer Expert
    Join Date
    Jul 2011
    Posts
    14

    Re: How to call/load another QML file (a completely new screen) from QML ?

    Here is a link that shows how to do it with visible property:
    http://www.developer.nokia.com/Commu...-qml-in-QT-4.7

    As a newbie it makes me wonder though, that if you use loader multiple times, does it every time instantiate a new object, thus consuming more and more memory?

Similar Threads

  1. [Qt QML] Questions regarding QML Performance
    By SeanZhang in forum [Archived] Qt Quick
    Replies: 1
    Last Post: 2011-05-05, 13:07

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×