Forums

OverviewV-Play 2 Support (Qt 5) › help for navigationDrawerItem

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #13290

    Motza

    hello,I’m new to v-play (about 2 weeks)

    i want to have a Navigation that navigationDrawerItem is pulled to right,there is no samples in documentations

    #13296

    Günther
    V-Play Team

    Hi Motza!

    Did you have a look at the documentation for Navigation and AppDrawer?
    Which feature exactly are you missing? The AppDrawer can be placed both on the left and right side of the screen, the Navigation element always uses the left side as this is the default for the main Navigation on Android.

    You can have a look at the Component Showcase demo that comes with the SampleLauncher of your V-Play installation. It shows how to use both Navigation and AppDrawer.

    Best,
    Günther

     

    #13312

    Motza

    look at this image.

    i want to move the those bars from left side to right side,any idea ?

    in addition how i can remove that menu bar (Resolution and Theme selector)

    #13315

    Günther
    V-Play Team

    Hi Motza!

    The Navigation element always shows the drawer icon on the left side of the navigation bar.
    But you can manually build a UI like that by using a custom AppDrawer and Page::rightBarItem:

    import VPlayApps 1.0
    import QtQuick 2.0
    
    App {
    
      // app drawer that fills the whole screen
      AppDrawer {
        id: mainDrawer
        drawerPosition: drawerPositionRight
        z: 1
    
        // move drawer gesture area below navigation bar
        slideInStartY: dp(Theme.navigationBar.height) + Theme.statusBarHeight
    
        // drawer background
        Rectangle {
          anchors.fill: parent
          color: "white"
        }
    
        // list of items
        AppListView {
          y: Theme.statusBarHeight
          model: 10
          delegate: SimpleRow { text: index }
        }
      }
    
      // navigation stack with navigation bar
      NavigationStack {
        Page {
          title: qsTr("Main Page")
    
          // add nav icon on the right
          rightBarItem: IconButtonBarItem {
            icon: IconType.navicon
            onClicked: mainDrawer.toggle()
          }
          
          // other page elements
        }
      }
    }
    

    Best,

    Günther

    #13316

    Günther
    V-Play Team

    The resolution and theme menuBar is only shown for test builds on desktop by default.
    When you do a publish build for releasing the app, it won’t be visible. You may also set the App::menuBarVPlayEnabled property to false.

    If you wish to create a custom menu, you can overwrite the menuBar property, which App inherits from the ApplicationWindow base type.

    Best,
    Günther

    #13321

    Motza

    that’s what i looking for,thank you.

    but it have another question,with Navigation the navigating between pages is much easier,with a AppDrawer how i can implement navigation between pages?

    #13324

    Günther
    V-Play Team

    There are different ways to go about that. Based on the example I you can:

    • Add a sub-page with NavigationStack::push or use NavigationStack::clearAndPush to replace the first page when the page should be switched.
    • Have multiple NavigationStacks with an initial page and only switch the visibility when another menu-item is chosen.

    The second solution is similar to how the the Navigation type works. This allows to keep the state of each main page / stack. (E.g. when you push a sub-page on the first stack and then switch to other pages of the main menu the sub-page is still active on the first stack).

    #13325

    Motza

    thank you.

Viewing 8 posts - 1 through 8 (of 8 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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