Navigation between qml pages from design perception



  • We need to develop a QtQuick project, where we have about 100 screens.

    I had tried to make a demo project for the navigation which has three screens on button click. I had used the concepts of 'States' in the navigation between the pages. Initially I tried the same using 'Loader' but loader was not able to retain the previous state of page, it was re-loading the entire page during the navigation.

    Below is the code snippet of main.qml
    @// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    import QtQuick 1.1

    Rectangle {
    id:main_rectangle
    width: 360
    height: 640

    Page1{
        id:page1
    }
    
    Page2{
        id:page2
    }
    
    Page3{
        id:page3
    }
    
    states: [
        State {
    
            name: "page2"
    
            PropertyChanges { target: page3; visible:false; }
            PropertyChanges { target: page1; visible:false; }
            PropertyChanges { target: page2; visible:true; }
        },
        State {
            name: "page1"
            PropertyChanges { target: page3; visible:false; }
            PropertyChanges { target: page2; visible:false; }
            PropertyChanges { target: page1; visible:true; }
        },
    
        State {
            name: "page3"
            PropertyChanges { target: page1; visible:false; }
            PropertyChanges { target: page2; visible:false; }
            PropertyChanges { target: page3; visible:true; }
        }
    
    ]
    

    }@

    This runs well with the small POC with three screens, but its not feasible to define states for 100 screens. Also we initiate all the pages in the main.qml, which will eventually eat up whole memory.

    From designing aspect we concluded to make a C++ controller we controls the states, visibility of various pages.

    Need suggestions how to implement the 'States' logic in C++ and how to make that controller communicate with qml screens.
    Any new implementation for the navigation is highly appreciated.



  • Maybe you need ListView?
    @
    import QtQuick 1.1

    Rectangle {
    id: window
    width: 360
    height: 360

    ListView {
        anchors.fill: parent
        delegate: myDelegate
        model: myModel
        snapMode: ListView.SnapOneItem
        orientation: ListView.Horizontal
    }
    
    ListModel {
        id: myModel
        ListElement {
            info: "Page one"
        }
        ListElement {
            info: "Page two"
        }
        ListElement {
            info: "Page three"
        }
    }
    
    Component {
        id: myDelegate
        Rectangle {
            width: window.width
            height: window.height
            color: "lightblue"
            border { width: 5; color: "black" }
            Text {
                anchors.centerIn: parent
                font.pixelSize: 24
                text: info
            }
        }
    }
    

    }
    @



  • Don't do that. QtQuick wasn't designed to handle such things imho.

    You'll need to find some way to load your pages dynamicly.
    I think with QtQuick 2.0 and Qt5 you will have better options here, but with 1.1 in pure QML, thats pretty hard.
    Best bet could be to implement your own QML Extension, which could handle/display some of your states.



  • This is relevant to my interests indeed.
    I wonder about the exact same thing.

    So.. now that QT5 arrived, I couldnt find any stuff about this problem, only an outdated qt component only for symbian and meebo devices (?) which uses some kind of stack.

    Anyone wise with some advice?

    thanks



  • You can actually use the Meego PageStack components as is but you will have to copy it manually into your project. We are currently working on adding it into Qt 5.1, but you sill lack some convenience for this with pure Qt Quick. (https://codereview.qt-project.org/#change,43894)


Log in to reply
 

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