Navigation

A navigation control for using platform-specific navigation modes. More...

Import Statement: import VPlayApps 1.0
Inherits:

Item

Properties

Methods

Detailed Description

The Navigation can be used to automatically use different navigation modes depending on the used platform. It supports navigation by TabControl on top or on bottom of the screen, by AppDrawer, or both.

By default TabControl is used on iOS and AppDrawer with an AppListView as content item on Android. You can change the styling of the AppDrawer's AppListView by overriding values from Theme::navigationAppDrawer.

Note: Navigation uses a lazy-loading mechanism for the contents of each NavigationItem element. This means, that the items within a NavigationItem are created when it is selected for the first time.

Example Usage

The following code demonstrates how easy it is to add a navigation to your app. By default, it will be displayed as tab navigation on iOS and as navigation drawer on Android:

 import VPlayApps 1.0
 import QtQuick 2.5

 App {
   Navigation {

     NavigationItem {
       title: "Navigation"
       icon: IconType.calculator

       NavigationStack {
         Page {
           title: "Navigation Switch"
         }
       }
     }

     NavigationItem {
       title: "List"
       icon: IconType.list

       NavigationStack {
         Page { title: "List Page" }
       }
     }

     NavigationItem {
       title: "Dialogs"
       icon: IconType.square

       NavigationStack {
         Page { title: "Dialogs Page" }
       }
     }

     NavigationItem {
       title: "Settings"
       icon: IconType.cogs

       NavigationStack {
         Page { title: "Settings Page" }
       }
     }
   }
 }

More Navigation Examples

See more navigation examples here: Navigation Guide

How do I navigate between pages?

Apart from the app Navigation, which provides the main menu for your app, the NavigationStack is the main component for navigating back and forth between different pages.

For passing data between pages, the easiest solution is to make relevant settings or properties available in a common parent scope. Public properties, functions, and signals of an ancestor in the QML tree are available for direct access:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   property int count: 0

   // main page
   NavigationStack {
     Page {
       id: mainPage
       title: "Main"

       Column {
         anchors.centerIn: parent

         // text to show the current count and button to push the second page
         AppText {
           anchors.horizontalCenter: parent.horizontalCenter
           text: "Count " + app.count
         }
         AppButton {
           text: "Push Counter Page"
           onClicked: mainPage.navigationStack.push(counterPageComponent)
         }
       }
     }
   }

   // inline-definition of a component, which is later pushed on the stack
   Component {
     id: counterPageComponent
     Page {
       title: "Change Count"
       property Page target: null

       Column {
         anchors.centerIn: parent

         // buttons to increase or decrease the count, which is displayed on the main page
         AppButton {
           text: "Count ++"
           onClicked: {
             app.count++
           }
         }
         AppButton {
           text: "Count --"
           onClicked: {
             app.count--
           }
         }
       }
     }
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Property Documentation

[read-only] count : int

Holds the total number of NavigationItems, regardless of their NavigationItem::showItem setting.


[read-only] countVisible : int

Holds the number of NavigationItems, which have NavigationItem::showItem activated and are visible currently.


currentIndex : int

Gets or sets the index of the currently visible NavigationItem.


[read-only] currentNavigationItem : NavigationItem

Holds the currently visible NavigationItem. To change it, currentIndex property can be changed.


drawer : AppDrawer

The AppDrawer object, which is used if drawer navigation is enabled.


[read-only] drawerVisible : bool

Holds true, if AppDrawer is used for navigation. Change by changing the navigationMode property.


footerView : Component

Component for an Item to appear in the AppDrawer, below the NavigationItem entries.


headerView : Component

Component for an Item to appear in the AppDrawer, above the NavigationItem entries. Per default, this is an invisible item that adds as a padding for the device status bar.


This property defines an item that is shown to toggle the navigation drawer state of the Navigation's AppDrawer item.

By default a toggle Icon is provided, which is sufficient in most cases. If you want to customize that icon you can make use of navigationDrawerItemPressed property to define a custom style for the pressed state.

Here is an example of providing your custom item:

 import VPlayApps 1.0
 import QtQuick 2.5

 App{
   Navigation {
     id: navigation
     navigationMode: navigationModeDrawer

     navigationDrawerItem: Text {
       text: "Open"
       anchors.centerIn: parent
       color: navigation.navigationDrawerItemPressed ? "red" : "green"
     }

     NavigationItem {
       title: "Main"
       icon: IconType.heart

       NavigationStack {
         Page { title: "Main Page" }
       }
     }
   }
 }

See also navigationDrawerItemPressed.


Use this readonly property to customize the pressed state of a custom provided navigationDrawerItem.

See also navigationDrawerItem.


Possible values are:

  • navigationModeDefault: Platform-specific default value (drawer for Android, tabs everywhere else)
  • navigationModeTabs: Use only TabControl
  • navigationModeDrawer: Use only AppDrawer
  • navigationModeTabsAndDrawer: Use TabControl and AppDrawer at the same time
  • navigationModeNone: Completely hide the Navigation. No TabControl or AppDrawer will be visible.

tabPosition : alias


tabs : TabControl

The TabControl object, which is used if tab navigation is enabled.

This QML property was introduced in V-Play 2.12.0.


[read-only] tabsVisible : bool

Holds true, if TabControl is used for navigation. Change by changing the navigationMode property.


Method Documentation

NavigationItem addNavigationItem(Component component)

Add a new NavigationItem at the end. The component should be a Component instantiating a NavigationItem.

Returns the created NavigationItem object.


NavigationItem getNavigationItem(int index)

Returns the NavigationItem at the specified index.


NavigationItem insertNavigationItem(int index, Component component)

Add a new NavigationItem at the specified index. The component should be a Component instantiating a NavigationItem.

Returns the created NavigationItem object.


void moveNavigationItem(int from, int to)

Move the NavigationItem at the specified index from to the index to.


void removeNavigationItem(int index)

Remove the NavigationItem at the specified index.


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