Тип QML Drawer

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

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

Свойства

• dragMargin : вещественное число
• edge : перечисление
• interactive : булево
• position : вещественное число

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

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, который находится на одном из краев окна edges. По умолчанию Drawer повторно родительствует себя к окну overlay, и поэтому работает с координатами окна. Также можно вручную установить parent на что-то другое, чтобы сделать 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 немодальной и неинтерактивной. См. пример Side Panel для получения дополнительной информации.

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

См. также SwipeView, Настройка Drawer, Навигационные элементы управления и Элементы управления popup.

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

dragMargin : вещественное число

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

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

См. также interactive.

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

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

[since QtQuick.Controls 2.2 (Qt 5.9)] interactive : булево

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

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

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

См. также dragMargin.

position : вещественное число

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