Nominate our 2022 Qt Champions!

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 ?


    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")
            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
    //                        anchors.centerIn: swipeView
    //        }

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

       // properties...
        id: myFirstPage
         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
    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 appTabBar.bottom
         anchors.bottom: parent.bottom
         width: parent.width
         clip: true
         Rectangle {
           color: "Red"
         Rectangle {
           color: "Green"

  • @Lorenz Thanks.

Log in to reply