TabBar with SwipeView

[Naveen_D]

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

}

[dauuser]

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.

[Naveen_D]

@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 ??

[Eeli K]

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.

[ekkescorner]

@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

[Lorenz]

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.

[dauuser]

@Naveen_D yes, exactly

[Naveen_D]

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

[Naveen_D]

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

[Lorenz]

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

   }

[Naveen_D]

@Lorenz Thanks.