Вырезы и строка состояния

ОС Аврора предоставляет механизм контроля системных вырезов и строки состояния для решения проблемы коллизии элементов приложений с компонентами системы, особенностями экрана или устройства. Он заключается в адаптации контента под текущее состояние устройства в зависимости от наличия вырезов, строки состояния или скруглений экрана.

Системный вырез — это область на некоторых устройствах, которая обеспечивает место для камеры или датчиков на передней панели устройства. Наличие вырезов или скруглений экрана приводит к следующим проблемам:

• пересечение элементов управления и физически отсутствующих областей экрана;
• отсутствие универсального способа адаптации к экрану.

В ОС Аврора доступны следующие варианты взаимодействия с механизмом системных вырезов:

• Выбрать режим отображения приложения. В этом случае все страницы приложения автоматически адаптируются под состояние устройства согласно с выбранным режимом.
• Напрямую получать значения безопасной зоны и компонентов, с которыми возможна коллизия. В этом случае приложение должно самостоятельно управлять корректным размещением своих компонентов на экране.

Содержание:

• Простой выбор режима отображения
• Взаимодействие с safeZone
• Взаимодействие с вырезами
• Взаимодействие со строкой состояния
• Обратная совместимость

Простой выбор режима отображения

По умолчанию страницы приложения располагаются в safeZone, прямоугольной области экрана, не содержащей коллизий. Это обеспечивает совместимость с приложениями, которые были написаны без учёта вырезов. Но при разработке нового приложения или адаптации существующего стоит учитывать, что приложение в safeZone может выглядеть не так естественно и красиво, как полноэкранные приложения.

Настроить поведение можно с помощью свойства displayMode объекта типа ApplicationWindow. Различные режимы позволяют управлять видом отображения и размером окна приложения с учётом ориентации устройства:

ApplicationDisplayMode.FullPortrait

В портретном режиме страницы приложения занимают весь экран, в ландшафтном — с отступом на высоту выреза. Отступ закрашивается чёрным цветом.

ApplicationDisplayMode.FillScreen

Страницы приложения занимают весь экран.

ApplicationDisplayMode.SafeZone

Страницы приложения заполняют safeZone. Является режимом по умолчанию.

Пример использования свойства displayMode:

ApplicationWindow {
    id: applicationWindow

    initialPage: Component { MainPage { } }
    cover: Qt.resolvedUrl("cover/CoverPage.qml")
    allowedOrientations: defaultAllowedOrientations
    
    Component.onCompleted: {
        if (applicationWindow.hasOwnProperty("displayMode")) {
            applicationWindow.displayMode = ApplicationDisplayMode.FullPortrait
        }
    }
}

Взаимодействие с safeZone

ApplicationWindow также предоставляет свойство safeZone, содержащее обеъект типа Item, координаты и размеры которого совпадают с безопасной зоной отображения приложения. Его следует использовать для сценариев, когда необходимо работать с полным окном приложения.

Rectangle {
    anchors.fill: safeZone
    color: "red"
    opacity: 0.5
}

Взаимодействие с вырезами

При размещении элементов управления в полноэкранных приложениях требуется учитывать скругления и вырезы экрана. Для этого служит объект SafeZoneRect.insets. Он предоставляет свойства top, left, right и bottom, которые содержат отступы от границ экрана до safeZone.

Пример работы с SafeZoneRect.insets:

Page {
    id: page

    allowedOrientations: Orientation.All

    SilicaFlickable {
        anchors.fill: parent

        Rectangle {
            width: 100
            height: 100
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: SafeZoneRect.insets.top
            }
 
            color: "green"
        }

        Rectangle {
            width: 100
            height: 100
            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: SafeZoneRect.insets.left
            }
 
            color: "red"
        }
    }
}

Объект SafeZoneRect.appInsets аналогично SafeZoneRect.insets предоставляет свойства top, left, right и bottom, но их значения не зависят от ориентации устройства.

Взаимодействие со строкой состояния

Строка состояния — это визуальный элемент, предназначенный для отображения наиболее необходимой системной информации и уведомлений. Высота строки состояния настраивается с помощью Theme. Его включение или отключение происходит через свойства ApplicationWindow:

bool isLandscape =
    m_deviceOrientation == DeclarativeOrientation::Landscape ||
    m_deviceOrientation == DeclarativeOrientation::LandscapeInverted;
bool isOrientationCheck =
    (screen->sizeCategory() >= Silica::Screen::Large && isLandscape) || !isLandscape;
bool newState =
    ((isStatusbarAsInset && m_displayMode == ApplicationDisplayMode::SafeZone) ||
        (m_statusbarForceVisible && m_displayMode != ApplicationDisplayMode::SafeZone)) &&
    isOrientationCheck;

ApplicationWindow предоставляет следующие свойства для управления строкой состояния:

statusbarForceVisible

Позволяет принудительно включить или отключить отображение строки состояния, если установлен displayMode FullPortrait или FillScreen. По умолчанию имеет значение false.

statusbarOpacity

Прозрачность фона строки состояния. по умолчанию имеет значение 0.0.

statusbarBackgroundColor

Цвет фона строки состояния. По умолчанию имеет цвет Theme.overlayBackground.

statusbarScheme

Определяет, какая цветовая схема выбрана для иконок строки состояния.

Пример настройки строки состояния:

ApplicationWindow {
    displayMode: ApplicationDisplayMode.FullPortrait
    statusbarForceVisible: true
    statusbarOpacity: 1.0
    statusbarBackgroundColor: "green"
    statusbarScheme: Theme.LightOnDark
}

Обратная совместимость

Для того, чтобы приложение, использующее API системных вырезов, могло функционировать и на устройствах, которые его не предоставляют, можно добавить проверки.

Например, с помощью метода hasOwnProperty можно узнать, поддерживаются ли режимы отображения:

if (applicationWindow.hasOwnProperty("displayMode")) {
    displayMode = ApplicationDisplayMode.FullPortrait
}

Также можно проверить доступность объекта SafeZoneRect:

Item {
    anchors {
        horizontalCenter: parent.horizontalCenter
        top: parent.top
        topMargin: SafeZoneRect ? SafeZoneRect.insets.top : 0
    }
}