Forums

OverviewFelgo 2 Support (Qt 5) › Issue with NavigationBar back button in Scene

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16487

    Kool

    Hi All,

    I’m trying to use VPlay App components in my VPlay Game. I’ve used various components without an issue but have an issue with the NavigationBar.

    Here’s a minimal example:

    import Felgo 3.0
    import QtQuick 2.0
    
    GameWindow {
        id: gameWindow
        activeScene: scene
        screenWidth: 960
        screenHeight: 640
    
        Scene {
            id: scene
    
            width: 480
            height: 320
    
            NavigationBar {
                id: tabBar
                anchors {top: scene.gameWindowAnchorItem.top; left: scene.gameWindowAnchorItem.left; right: scene.gameWindowAnchorItem.right}
                backButtonVisible: true
                titleItem: AppText {
                    text: "Training"
                    color: Theme.backgroundColor
                }
            }
        }
    }
    

    When clicking the back button, I get the following error:

    qrc:///qml/VPlayApps/navigation/NavigationBarContent.qml:32: TypeError: Cannot call method 'pop' of null

    I’ve also tried setting a backButtonItem and detecting the clicked signal there, but get the same error.

    Any thoughts on how to proceed/an alternative?

    Many thanks!

    #16489

    Kool

    My guess is that it’s trying to access a property that doesn’t exist in VPlay Games or parent items.

    I made a stab at a solution by using an IconButtonBarItem as the leftBarItem:

    import Felgo 3.0
    import QtQuick 2.0
    
    GameWindow {
        id: gameWindow
        activeScene: scene
        screenWidth: 960
        screenHeight: 640
    
        Scene {
            id: scene
    
            width: 480
            height: 320
    
            NavigationBar {
                id: tabBar
                titleItem: AppText {
                    text: "Training"
                    color: Theme.backgroundColor
                }
                leftBarItem: IconButtonBarItem {
                    icon: IconType.arrowleft
                    onClicked: console.debug("Clicked")
                }
            }
        }
    }
    

    Is there any way to get the default icon? It looks a nicer than the IconType.arrowleft.

    Many thanks!

    #16490

    Kool

    Another question is how can we get the cross-platform handling of the arrow icon when switching from iOS to Android?
    I’m using Vplay App components in my game to get a cross-platform design.

    #16492

    Günther
    Felgo Team

    Hi Kool!

    In Felgo Apps, NavigationBar is usually a part of NavigationStack. The default implementation of the NavigationBar back-button then tries to go-back one page by popping the current page from the NavigationStack.

    As the NavigationStack is not available in your use case, the pop-error is printed. We only recently started to make GameWindow and App more compatible, so there are still some improvements left do – thanks for reporting this NavigationBar issue!

    Regardless, you can react to the back-button being clicked with the backButtonItemPressed property (is set to true while the button is being pressed):

    NavigationBar {
                id: tabBar
                // ...
    
                onBackButtonItemPressedChanged: {
                  if(tabBar.backButtonItemPressed) {
                    console.log("BACK BUTTON WAS PRESSED")
                  }
                }
            }

     

    To use the cross-platform handling of the arrow-icon, the default back-button leftBarItem is required. To avoid the pop-issue of NavigationBar and also use the native transitions when switching back and forth between pages, you can use the NavigationStack instead of a standalone NavigationBar:

    // NavigationStack (with internal NavigationBar)
        NavigationStack {
          id: navStack
          anchors {top: scene.gameWindowAnchorItem.top; left: scene.gameWindowAnchorItem.left; right: scene.gameWindowAnchorItem.right}
    
          // Main Page with Button to Push Additional Page
          Page {
            titleItem: AppText {
              text: "Training"
              color: Theme.backgroundColor
            }
    
            AppButton {
              text: "Push DetailPage"
              anchors.centerIn: parent
              onClicked: navStack.push(detailPage)
            }
    
          }
        }
    
        // Detail Page, will be pushed to stack on button press
        Component {
          id: detailPage
          Page {
            title: "DetailPage"
          }
        }

    Hope this helps!

    Cheers,
    Günther

     

    #16498

    Kool

    Hi Gunther,

    Thanks for the feedback. I’m a bit wary of moving over to a NavigationStack as my current game is composed of a GameWindow with states that switch the activeScene. It’d be quite an effort to switch over and test everything. I think I’ll stick with your first suggestion with the stand alone NavigationBar and live with the error message.

    It’d be really great to get an demo project that demonstrates mixing of VPlay Games and VPlay Apps. I’m trying hard to use only what’s necessary rather than diving deep into the tools provided by VPlay Apps as there’s a lot of issues along the road. If there was a demo project that showed what’s compatible and what’s not, the workarounds, etc, I’d be more comfortable with making full use of VPlay Apps in my game.
    Many thanks!

Viewing 5 posts - 1 through 5 (of 5 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