Modify (or remove) black bar at bottom of iOS in QML application

Question

I have a QML application targeted at iOS and Android. When running in iOS - I am trying to (preferably) change the color of the black bar that shows up below the app window (as shown in the red box in the screenshot below) so that it matches the color of the page switcher above it making the page switcher appear continuous to the bottom of the screen, or if that is not possible to remove it entirely and add my own spacing element down there. This black space seems to only show up on phones that have a homebar indicator.

I have tried adding a launch screen storyboard as suggested in iOS 9 Xcode 7 - Application appears with black bars on top and bottom. This does not seem to make any difference.

I have also tried setting my root Window element to have the property of visibility: Window.FullScreen. This did remove the black space at the bottom of the screen but also hid the iOS status bar at the top, which I do NOT want to do.

Window {
    id: root
    visible: true
    width: 450
    height: 800
    color: "black"

    Page {
        id: mainPageId
        anchors.fill: parent
        header: /* ... header ... */


        footer: TabBar {
            id: tabBarid
            width: parent.width
            contentHeight: 80
            background: Rectangle {
                color: "lightgray"
            }

            TabButton {
             /* ... tab button stuff ... */
            }

            TabButton {
             /* ... tab button ... */
            }
        }

        SwipeView {
            id: mainPageSwipeViewId
            anchors.fill: parent
            /* ... swipe to hold the main content of the page ... */
        }
    }
}

How do I remove this space at the bottom of the screen, OR (preferably) just change its color to match the color of my page switcher so that the page switcher appears continuous to the bottom of the screen?

Qt Version: 5.13

XCode Version: 11.4 (11E146)

iOS Version: 13.4.1

Answer 1

Ok, this is pretty tricky to get right. Get ready.....

1. As you have done, you have to have a launch screen storyboard which is good.
2. I use this setting on my Window to run full screen:

    flags: Qt.Window | Qt.MaximizeUsingFullscreenGeometryHint

Probably same effect as your visibility setting above.

3. Now, if you really want to do this right, you will need some C++ code.

QVariantMap System::getSafeAreaMargins(QQuickWindow *window)
{
    QPlatformWindow *platformWindow = static_cast<QPlatformWindow *>(window->handle());
    QMargins margins = platformWindow->safeAreaMargins();
    QVariantMap map;
    map["top"] = margins.top();
    map["right"] = margins.right();
    map["bottom"] = margins.bottom();
    map["left"] = margins.left();
    return map;
}

Note, in your .pro file you'll need to add:

QT += gui-private

and include this header:

#include <QtGui/qpa/qplatformwindow.h>

You need to put that on a class you expose to QML via a C++ class. This will return to you the "Safe Area Margins" for the current device. There's some more information on that topic here:

https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area?language=objc

4. Now you have to use that information to adjust the layout of each of your screens.

The short of it is that when in full screen, your window extends to the physical top of the screen and to the physical bottom of the screen. And that's behind the status bar and behind the home bar at the bottom. If for instance your background is white then your white status bar will look like it disappeared when really it is there but not distinguishable.

The getSafeAreaMargins above returns info that tells you what the safe area margins are around your content based on the device type. You use those to make sure your background content runs up behind the status bar and home bar when it makes sense and that your foreground content never does. You accomplish that by adding this information to each of your page layouts as needed (via margin and padding settings or spacer objects).

Note, these values change as the app launches and as the orientation changes....