Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    A PageStack on each Tab

    QML and Qt Quick
    5
    8
    3477
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cckwes last edited by

      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

      1 Reply Last reply Reply Quote 0
      • BilbonSacquet
        BilbonSacquet last edited by

        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");
        @

        1 Reply Last reply Reply Quote 0
        • C
          cckwes last edited by

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

          1 Reply Last reply Reply Quote 0
          • C
            conny last edited by

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

            1 Reply Last reply Reply Quote 0
            • C
              cckwes last edited by

              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 =)

              1 Reply Last reply Reply Quote 0
              • C
                conny last edited by

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

                }
                @

                1 Reply Last reply Reply Quote 0
                • E
                  engrehabhegazy last edited by

                  thanks alot it really heled me :)

                  Rehab Hegazy

                  1 Reply Last reply Reply Quote 0
                  • A
                    andre last edited by

                    "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.

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post