Тип QML Drawer

Боковая панель, которая может открываться и закрываться с помощью жеста свайпа. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• dragMargin : real
• edge : перечисление
• interactive : bool
• position : real

Подробное описание

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

Drawer может быть расположен на любом из четырех краев элемента содержимого. Drawer выше расположен по левому краю окна. Drawer открывается путем «перетаскивания» его от левого края окна.

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height

        Label {
            text: "Content goes here!"
            anchors.centerIn: parent
        }
    }
}

Drawer — это особый тип popup, который находится на одном из краев окна краев. По умолчанию Drawer повторно назначает себе родительское окно overlay, и поэтому работает с координатами окна. Также можно вручную установить родитель на что-то другое, чтобы drawer работал в определенном пространстве координат.

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

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    visible: true

    header: ToolBar { }

    Drawer {
        y: header.height
        width: window.width * 0.6
        height: window.height - header.height
    }
}

Свойство position определяет, какая часть drawer видима, как значение между 0.0 и 1.0. Невозможно установить координату x (или горизонтальные отступы) drawer на левом или правом краю окна, или координату y (или вертикальные отступы) drawer на верхнем или нижнем краю окна.

На изображении выше содержимое приложения «перемещается» по экрану. Это достигается путем применения трансляции к содержимому:

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 200
    height: 228
    visible: true

    Drawer {
        id: drawer
        width: 0.66 * window.width
        height: window.height
    }

    Label {
        id: content

        text: "Aa"
        font.pixelSize: 96
        anchors.fill: parent
        verticalAlignment: Label.AlignVCenter
        horizontalAlignment: Label.AlignHCenter

        transform: Translate {
            x: drawer.position * content.width * 0.33
        }
    }
}

Если вы хотите, чтобы содержимое приложения оставалось на месте при открытии drawer, не применяйте трансляцию.

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

Примечание: На некоторых платформах определенные края могут быть зарезервированы для системных жестов и поэтому не могут использоваться с Drawer. Например, верхний и нижний края могут быть зарезервированы для системных уведомлений и центров управления на Android и iOS.

См. также SwipeView, Настройка Drawer, Управление навигацией и Управление всплывающими окнами.

Документация по свойствам

dragMargin : real

Это свойство хранит расстояние от края экрана, в пределах которого действия по перетаскиванию будут открывать drawer. Установка значения на 0 или меньше предотвращает открытие drawer путем перетаскивания.

Значение по умолчанию — Qt.styleHints.startDragDistance.

См. также interactive.

edge : перечисление

Это свойство хранит край окна, с которого drawer будет открываться. Допустимые значения:

[since QtQuick.Controls 2.2 (Qt 5.9)] interactive : bool

Это свойство указывает, является ли drawer интерактивным. Неинтерактивный drawer не реагирует на свайпы.

Значение по умолчанию — true.

Это свойство было введено в QtQuick.Controls 2.2 (Qt 5.9).

См. также dragMargin.

position : real

Это свойство хранит положение drawer относительно его конечного местоположения. То есть position будет 0.0 при полностью закрытом drawer и 1.0 при полностью открытом.