A PageStack on each Tab



  • Hi, i'm coding an application that requires a few tabs and each tab has it's own pageStack (something like the tab behaviour of the Nokia Store on Harmattan). Any example on how to do this? Thanks



  • For the tabs I propose to use QTabWidget and for the tab content we could use QStackedWidget():

    @
    QTabWidget* tab = new QTabWidget();

    QStackedWidget* first_stack = new QStackedWidget();
    tab->addPage(first_stack, "first tab");
    @



  • How if I want to do it qml way with TabGroup and PageStack components? Any suggestion?



  • Good question. I'm currently trying to do the same, without much luck unfortunately. The problem is that the pages I push on the stack overwrite the original toolbar (the one with the tabs defined).

    Maybe it's possible by using a separate toolbar and not to use the page-toolbar mechanism. I'll give that a try. Other suggestions are welcome as well :)



  • I think i've found the answer for my question:

    @import QtQuick 1.1
    import com.nokia.meego 1.0

    PageStackWindow {
    id: mainWindow
    initialPage: mainPage

    Page {
    

    id: mainPage
    tools: mainTools
    }

    TabGroup {
    

    id: tabGroup
    currentTab: tab1

    Page {
    id: tab1
    }

    PageStack {
    id: tab2
    Component.onCompleted: tab2.push(page2);

     Page {
    

    id: page2
    }
    }

    PageStack {
    id: tab3
    Component.onCompleted: tab3.push(page3);

     Page {
    

    id: page3
    }
    }
    }

    ToolBarLayout {
    

    id: mainTools

    ToolIcon {
    iconId: (tabGroup.currentTab.depth > 1) ? "toolbar-back" : "toolbar-back-dimmed";
    onClicked: tabGroup.currentTab.pop();
    }

    ButtonRow {
    style: TabButtonStyle { }
    TabButton {
    iconSource: "../images/icon-m-toolbar-home.png"
    tab: tab1
    }
    TabButton {
    iconSource: "../images/icon-m-toolbar-list.png"
    tab: tab2
    onClicked: {
    tab2.clear();
    tab2.push(page2);
    }
    }
    TabButton {
    iconSource: "../images/icon-m-toolbar-edit.png"
    tab: tab3
    onClicked: {
    tab3.clear();
    tab3.push(page3);
    }
    }
    }
    }
    }@

    Hope it helps =)



  • Thanks a lot for this example! This was almost exactly what I needed. I adapted it to Symbian and slightly changed the behavior.

    My solution is below. Thanks for the great work :)

    @
    import QtQuick 1.1
    import com.nokia.symbian 1.1

    PageStackWindow {
    id: mainWindow
    initialPage: mainPage
    showStatusBar: true
    showToolBar: true

    Page {
        id: mainPage
        tools: ToolBarLayout {
    
            ToolButton {
                property bool closeButton: tabGroup.currentTab.depth <= 1
                iconSource: closeButton ? "img/symbian/close.svg" : "toolbar-back"
                onClicked: {
                    if (closeButton) {
                        Qt.quit()
                    } else {
                        tabGroup.currentTab.pop()
                    }
                }
            }
    
            ButtonRow {
                TabButton {
                    iconSource: "toolbar-home"
                    tab: tab1
                    onClicked: {
                        if (tabGroup.currentTab == tab1) {
                            tab1.clear();
                            tab1.push(page1);
                        }
                    }
                }
                TabButton {
                    iconSource: "toolbar-dialer"
                    tab: tab2
                    onClicked: {
                        if (tabGroup.currentTab == tab2) {
                            tab2.clear();
                            tab2.push(page2);
                        }
                    }
                }
                TabButton {
                    iconSource: "toolbar-home"
                    tab: tab3
                    onClicked: {
                        if (tabGroup.currentTab == tab3) {
                            tab3.clear();
                            tab3.push(page3);
                        }
                    }
                }
            }
        }
    
        TabGroup {
            id: tabGroup
            currentTab: tab1
            anchors.fill: mainPage
    
            PageStack {
                id: tab1
                Component.onCompleted: tab1.push(page1)
    
                Page {
                    id: page1
                    Rectangle {
                        color: "yellow"
                        anchors.fill: parent
    
                        Component {
                            id: page12
                            Page {
                                Rectangle {
                                    color: "orange"
                                    anchors.fill: parent
                                }
                            }
                        }
    
                        MouseArea {
                            anchors.fill: parent
                            onClicked: tab1.push(page12)
                        }
                    }
                }
            }
    
            PageStack {
                id: tab2
                Component.onCompleted: tab2.push(page2)
    
                Page {
                    id: page2
                    Rectangle {
                        color: "red"
                        anchors.fill: parent
                    }
                }
            }
    
            PageStack {
                id: tab3
                Component.onCompleted: tab3.push(page3)
    
                Page {
                    id: page3
                    Rectangle {
                        color: "blue"
                        anchors.fill: parent
                    }
                }
            }
        }
    }
    

    }
    @



  • thanks alot it really heled me :)



  • "This video":/videos/watch/anatomy-of-real-world-apps-dissecting-cross-platform-apps-written-using-qt from last Qt DevDays gives an IMHO really insightful example on how you can create an application with a structure like what you want. It combines QML and C++ to get it done, but I think it is really elegant.


Log in to reply
 

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