Forums

OverviewV-Play 1 SupportFlickable TabControl › Reply To: Flickable TabControl

OverviewV-Play 1 SupportFlickable TabControl › Reply To: Flickable TabControl
#12708

Günther
V-Play Team

Hi David!

The TabControl extends the QML TabView. Unfortunately the TabView is not made for implementing flickable tabs, and only allows to change the look of the tabs.

A workaround would be to place the whole TabControl in a Flickable and use it to show the tabs only. You can then use a Loader component to manually show a different page based on the selected tab.

E.g.:

Page {
      title: qsTr("Main Page")

      // tabs
      Flickable {
        id: tabFlickable
        width: parent.width
        height: dp(Theme.tabBar.height)
        contentWidth: tabControl.width
        contentHeight: height

        TabControl {
          id: tabControl
          width: 600 // bigger tab control width

          NavigationItem {
            id: infoTab
            title: "Info"
            icon: IconType.infocircle
          }
          NavigationItem {
            id:installationTab
            title: "Installation"
            icon: IconType.wrench
          }
          NavigationItem {
            id:connectionTab
            title: "Connection"
            icon: IconType.compress
          }
          NavigationItem {
            id:configurationTab
            title: "Configuration"
            icon: IconType.gears
          }
        }
      }

      // content area
      Loader {
        id: content
        anchors.top: tabFlickable.bottom
        anchors.bottom: parent.bottom
        width: parent.width
        source: "Page"+tabControl.currentIndex+".qml" // load different page based on selected tab
      }
    }

 

 

Best,
Günther

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support