TabBar with SwipeView



  • Hi all

    I am using Tab bar with swipe view to develop a screen, i want to have different content for each page or each tab on the screen, but when i am trying to do that i get same content on each tab.

    Can anyone guide me, how to have different content on each tab ? and where i need to place the code for that either in Tab bar or in swipe view ?

    Thanks

    the code i am trying is as follows

    import QtQuick 2.0
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.1
    
    ApplicationWindow {
        visible: true
        width: 750
        height: 400
    
        footer: TabBar {
            id: tabBar
            width: parent.width
            currentIndex: swipeView.currentIndex
    
            TabButton {
                text: qsTr("Contacts")
            }
            TabButton {
                text: qsTr("Call History")
            }
            TabButton {
                text: qsTr("Dail Pad")
            }
        }
    
    
        SwipeView{
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Repeater {
                model: 3
    
    //            Pane {
    //                width: swipeView.width
    //                height: swipeView.height
    //                Column {
    //                    spacing: 40
    //                    width: parent.width
    
    //                    Label {
    //                        width: parent.width
    //                        wrapMode: Label.Wrap
    //                        horizontalAlignment: Qt.AlignHCenter
    //                        text: "TabBar is a bar with icons or text which allows the user"
    //                              + "to switch between different subtasks, views, or modes."
    //                    }
    //                }
                    Item {
                        id: name
                        Rectangle {
                            id: rect
                            implicitHeight: 20
                            implicitWidth: 50
                            color:"red"
    //                        anchors.centerIn: swipeView
                        }
                    }
                }
    //        }
        }
    
    }
    
    


  • create qml components for each page and then put them inside the SwipeView:

    SwipeView{
       // properties...
      
      MyFirstPage{
        id: myFirstPage
      }
    
      MySecondPage{
         id: mySecondPage
      }
    
    }
    

    the SwipeView automatically sets MyFirstPage to index 0, MySecondPage to index 1 and so on.



  • @dauuser You mean to say separate component like MyfirstPage.qml ( the content of this page in this .qml file) and then set this file in a swipe view ??



  • TabBar is basically implemented with a list view or a path view where you add button-like delegates (usually TabButton) and behaves like a radiobutton group. The actual content is elsewhere and you can use TabBar even for other purposes without content pages if you really want to.


  • Qt Champions 2016

    @Naveen_D last year I have written a sample app for TabBar
    blogpost: https://appbus.wordpress.com/2016/06/07/tab-pages-app-tabbar/
    github: https://github.com/ekke/tab_pages_x
    hopefully you'll get some ideas



  • Have a look at this code sample.

    The example shows how to put a red and a green rectangle inside a swipe view. You can replace these Rectangles with whatever QML item you like, as dauuser already indicated.

    If you need native style for iOS and Android, check out V-Play.



  • @Naveen_D yes, exactly



  • @ekkescorner Yes sir, i referred your blog...its very helpful. Thanks



  • @Lorenz Thanks for the information... to use this i need to install V-Play ?



  • Hi @Naveen_D
    Yes, you need to install V-Play if you want the native styles etc. provided by V-Play.
    However, the code sample I referred to should be usable also without V-Play:

       // tab contents
       QuickControls2.SwipeView {
         id: swipeView
         anchors.top: appTabBar.bottom
         anchors.bottom: parent.bottom
         width: parent.width
         clip: true
    
         Rectangle {
           color: "Red"
         }
    
         Rectangle {
           color: "Green"
         }
    
       }
    


  • @Lorenz Thanks.


Log in to reply
 

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