Forums

OverviewV-Play 2 Support (Qt 5) › navigationBar.rightBarItem issue

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #11695

    Nee

    I had some code using navigationBar.rightBarItem to add a button on the top-right. But it looks odd on iPhone, and I cannot adjust it.

    import VPlayApps 1.0
    import QtQuick 2.5
    import QtLocation 5.5
    import QtPositioning 5.5
    
    App {
        id:app
        NavigationStack {
            anchors.fill: parent
            splitView: false
    
            navigationBar.rightBarItem: AppButton{
                text:"GO"
                anchors.centerIn: parent
                anchors.rightMargin: 10
                radius: 5
            }
            ListPage {
                title: qsTr("Map Page")
    
    
                PositionSource{
                    id:pos
                    active: true
                    onPositionChanged: {
                        console.log(position.coordinate);
                    }
                }
                Map{
                    id: map
                    anchors.fill: parent
                    plugin: Plugin{name:"osm"}
                    //center: QtPositioning.coordinate(59.930243,10.714635)
                    center: pos.position.coordinate
                    zoomLevel: 15
    
                    Component.onCompleted: {
                        console.log(pos.valid); pos.update();
                    }
                }
            }
        }
    }
    

    If you run it, you will see some right part of button go out of the screen on iPhone, while it is ok on Android.

    Screenshot here : http://screenshot.net/0expgu9

    #11696

    Günther
    V-Play Team

    Hi Nee!

    I looked into the matter – the current implementation of the NavigationBar moves the right item by 8 dp only for iOS.
    My guess is, that this just looked better for the default navigation-bar elements we use in our samples. But of course it makes problems for custom elements, we will fix this for the next update.

    Thanks for bringing this issue to our attention!

    In the meantime, you can add a quickfix yourself:

    navigationBar.rightBarItem: AppButton {
          text:"GO"
          radius: 5
    
          // only center vertically within the navigation-bar
          // horizontal centering doesn't make sense (there is no fixed "right-item-area" to center within)#
          // also, horizontal centering would interfere with the custom x-positioning below
          anchors.verticalCenter: parent.verticalCenter
          x: Theme.isIos ? -dp(8) : 0 // fix displacement on iOS
        }

     

    One thing I want to mention is that we recommend to use the NavigationBarItem type as a base class for navigation bar elements. It currently only sets a default width and height, but in the future, we might extend it with further features.

    A solution that uses the NavigationBarItem could look like this:

    navigationBar.rightBarItem: NavigationBarItem {
          width: button.width + button.anchors.leftMargin + button.anchors.rightMargin // set width based on button (instead of default width of 48 dp)
          // height is automatically based on the height of the navigation bar (different on iOS and android)
    
          // fix displacement on iOS
          anchors.right: parent.right
          anchors.rightMargin: Theme.isIos ? dp(8) : 0
    
          AppButton {
            id: button
            text:"GO"
            radius: 5
    
            // you can also easily add margins this way
            anchors.fill: parent
            anchors.margins: dp(5)
          }
        }

     

    Best,
    Günther

    #11708

    Nee

    I really appreciate your reply, and it works for me. Thank you.

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