在 QML 应用程序中修改（或删除）iOS 底部的黑条

Question

我有一个针对 iOS 和 Android 的 QML 应用程序。在 iOS 中运行时 - 我正在尝试（最好）更改显示在应用程序窗口下方的黑条的颜色（如下面屏幕截图中的红色框所示），使其与其上方的页面切换器的颜色相匹配使页面切换器显示在屏幕底部连续，或者如果无法完全删除它并在那里添加我自己的间距元素。这个黑色空间似乎只出现在带有 homebar 指示器的手机上。

我已尝试按照iOS 9 Xcode 7 - Application appears with black bars on top and bottom 中的建议添加启动屏幕故事板。这似乎没有任何区别。

我还尝试将我的根 Window 元素设置为具有visibility: Window.FullScreen 的属性。这确实删除了屏幕底部的黑色空间，但也隐藏了顶部的 iOS 状态栏，我不想这样做。

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 ... */
        }
    }
}

如何删除屏幕底部的这个空间，或者（最好）改变它的颜色以匹配我的页面切换器的颜色，以便页面切换器显示在屏幕底部连续？

Qt 版本： 5.13

XCode 版本： 11.4 (11E146)

iOS 版本： 13.4.1

Answer 1

好的，要做到这一点非常棘手。准备好.....

1. 正如您所做的那样，您必须有一个很好的启动屏幕故事板。
2. 我在Window 上使用此设置来全屏运行：

    flags: Qt.Window | Qt.MaximizeUsingFullscreenGeometryHint

可能与上述可见性设置的效果相同。

1. 现在，如果您真的想做到这一点，您将需要一些 C++ 代码。

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;
}

请注意，您需要在 .pro 文件中添加：

QT += gui-private

并包含此标题：

#include <QtGui/qpa/qplatformwindow.h>

您需要将它放在通过 C++ 类公开给 QML 的类中。这将返回给您当前设备的“安全区域边距”。这里有关于该主题的更多信息：

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

4. 现在您必须使用该信息来调整每个屏幕的布局。

简而言之，当处于全屏状态时，您的窗口会延伸到屏幕的物理顶部和屏幕的物理底部。那是在状态栏的后面和底部的主页栏后面。例如，如果您的背景是白色的，那么当您的白色状态栏确实存在但无法区分时，它看起来就像消失了一样。

上面的getSafeAreaMargins 返回的信息会根据设备类型告诉您内容周围的安全区域边距是多少。您使用这些来确保您的背景内容在有意义的情况下运行在状态栏和主页栏后面，而您的前景内容永远不会出现。您可以根据需要将此信息添加到每个页面布局中（通过边距和填充设置或间隔对象）来实现这一点。

请注意，这些值会随着应用程序的启动和方向的变化而变化......