TabBar with 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.
-
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.
-
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.
-
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 } } } // } } }@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.
Developer @ V-Play Engine - http://v-play.net/qt
V-Play simplifies
- Game Development with Qt
- Mobile App Dev with Qt esp. iOS & Android
What others say
V-Play scored #1 in Cross-Platform App Development Tools Report - see why: https://goo.gl/rgp3rq -
@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 ??
-
@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@ekkescorner Yes sir, i referred your blog...its very helpful. Thanks
-
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.
-
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" } }Developer @ V-Play Engine - http://v-play.net/qt
V-Play simplifies
- Game Development with Qt
- Mobile App Dev with Qt esp. iOS & Android
What others say
V-Play scored #1 in Cross-Platform App Development Tools Report - see why: https://goo.gl/rgp3rq -
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" } }
