[Nathan]

Hi. I’ve got a Page in a NavigationStack, so VPlay creates a back button in the top left corner and (presumably, I haven’t tested this yet) handles Android’s back button to pop the stack and show the previous page. One of my pages has multiple frames, however, and I would like to have the back button in the top left and the Android back button switch to the previous frame if the first one is not already active, and otherwise use the normal behavior of popping the stack. I can easily handle deciding which behavior to apply, and implementing the frame switching behavior, but how can I customize the back button handling? I haven’t found anything that looks like what I’m looking for in the docs.

What I want is something like this:

Page {
    onBackPressed: {
        if (currentFrame === 0) navigationStack.pop() // or whatever the default behavior is
        else currentFrame--
    }
}

Ideally I would be able to pass the event to the standard handler somehow in the default case, but if that’s not possible I can just reproduce its behavior manually as well.

[GüntherFelgo Team]

Hi Nathan!

Yes, the Android back button is automatically handled by some app components, which also includes popping pages from the NavigationStack.
Unfortunately, we currently do not yet provide a way to overwrite the default behavior in a convenient way. For that we want to have a well-structured component that handles the back-button and decides which implementation has priority if multiple handlers are defined.

This is already on our roadmap, and there will probably also be a way to define a custom handling within a Page as you suggested.

The inofficial way to add a custom handler to a Page looks like that at the moment:

 

import Felgo 3.0
import QtQuick 2.5

App {

  NavigationStack {
    backButtonEnabled: false // deactivate default behavior of navigation stack

    Page {
      title: "Custom BackButton"

      Text {
        id: textItem
        anchors.centerIn: parent
        text: "Press Back Button"
      }

      // handle back button
      Connections {
        target: getApplication()
        onBackButtonPressedGlobally: {
          event.accepted = true

          // do sth here
          textItem.text = "Back Pressed"
        }
      }

    }
  }

}

 

Note: As this is just a connection to the back button press, other components (e.g. a Navigation which opens the first tab on a back press) might steal the back event from the page. So it might be a good idea to just stick with the default behavior until we have a better solution ready. 😉

 

Cheers,
Günther

• This reply was modified 8 years, 6 months ago by  GT.