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

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

[Nee]

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