Расширенные клиентские области и безопасные зоны

Классикой современного дизайна приложений на настольных и мобильных платформах является то, что содержимое находится в центре внимания — элементы интерфейса приложения и системы органично вписываются в контент, не отвлекая пользователя. В Qt 6.9 появились две новые возможности, которые помогают достичь этого: расширенные клиентские области и безопасные зоны.

Расширенные клиентские области

Предположим, мы создаём приложение для любителей собак, в котором показываем наши любимые фотографии. Минимальный пример приложения может выглядеть так:

import QtQuick

Window {
    visible: true
    width: 800; height: 600
    Image {
        anchors.fill: parent
        source: "https://placedog.net/800/600?r"
        fillMode: Image.PreserveAspectCrop
    }
}

Это даёт нам следующее на macOS и iOS: наша собака в центре внимания. Но есть несколько элементов интерфейса, которые конкурируют за наше внимание — заголовок окна и элементы управления на macOS; а также часы, Wi-Fi и индикатор батареи на iOS. Мы можем сделать лучше!

Добавив флаг окна Qt.ExpandedClientAreaHint, мы просим расширить клиентскую область окна в те зоны, которые обычно зарезервированы для системного интерфейса:

Window {
    flags: Qt.ExpandedClientAreaHint | Qt.NoTitleBarBackgroundHint
    // ...
}

Чтобы скрыть заголовок окна на macOS, мы также используем Qt.NoTitleBarBackgroundHint. В результате содержимое растягивается по всему экрану, полностью фокусируя внимание на нашей собаке.

Безопасные зоны

Однако с расширением клиентской области возникают и новые обязанности. Теперь наше приложение борется за тот же экранный простор, что и системный интерфейс, и система обычно побеждает. Это значит, что важно не размещать важный контент в областях, где он может быть перекрыт элементами системы.

Например, мы можем захотеть добавить кнопки для взаимодействия с собакой, пока нас нет:

Window {
    // ...
    Item {
        anchors {
            left: parent.left; right: parent.right; top: parent.top
            margins: 10
        }
        Text {
            text: "Throw Ball"; color: "white"; font.pointSize: 18
            anchors.left: parent.left
        }
        Text {
            text: "Give Bone"; color: "white"; font.pointSize: 18
            anchors.right: parent.right
        }
    }
}

Но это будет конфликтовать с системным интерфейсом на macOS и iOS. Чтобы избежать этого, мы используем новое присоединённое свойство SafeArea, которое сообщает, насколько нужно отступить содержимое от «небезопасных» зон окна:

anchors {
    left: parent.left; right: parent.right; top: parent.top
    topMargin: 10 + parent.SafeArea.margins.top
    leftMargin: 10 + parent.SafeArea.margins.left
    rightMargin: 10 + parent.SafeArea.margins.right
}

Это надёжно размещает кнопки ниже заголовка окна на macOS и внизу экрана на iOS, учитывая все ориентации экрана.

Qt Quick Controls

До сих пор мы использовали обычное окно Window, но в реальности вы, скорее всего, будете применять ApplicationWindow из Qt Quick Controls, который уже включает поддержку безопасных зон. При установке флага Qt.ExpandedClientAreaHint фон окна автоматически растягивается на всю область, а содержимое остаётся внутри безопасных зон. Для таких элементов, как ToolBar и MenuBar, предусмотрена автоматическая подстройка фона и содержимого под безопасные зоны.

Взгляд в будущее

Мы надеемся, что эти изменения в Qt 6.9 помогут внедрять современные UI-подходы в ваших приложениях. Функции уже доступны и поддерживаются на macOS, Windows, iOS, visionOS и Android, а в будущем мы планируем расширить поддержку на другие платформы. По умолчанию на некоторых платформах, таких как Android и iOS, флаг Qt.ExpandedClientAreaHint может быть включён автоматически. Пожалуйста, протестируйте новые возможности и сообщите нам о любых проблемах или неудовлетворённых сценариях использования.

https://www.qt.io/blog/expanded-client-areas-and-safe-areas-in-qt-6.9

#cpp #programming

👉 @cpp_lib