[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

[GüntherFelgo 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 Felgo installation. It shows how to use both Navigation and AppDrawer.

Best,
Günther

 

[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)

• This reply was modified 7 years, 11 months ago by  mortezaallahpour@outlook.com.

[GüntherFelgo 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 Felgo 3.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

[GüntherFelgo 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

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

[GüntherFelgo 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).

[Motza]

thank you.