Тип 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 — это специальный тип всплывающего окна, который находится на одном из краёв окна краев. По умолчанию 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 немодальным и неинтерактивным. Подробности см. в примере Боковая панель.

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

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

dragMargin : real

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

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

См. также interactive.

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

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

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

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

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

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

См. также dragMargin.

position : real

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