Выдвижные панели

Выдвижные панели (drawers) — это панели, выдвигающиеся из боковых сторон окна приложения. Их можно наполнить интерактивными элементами, такими как действия Kirigami, кнопки, текст и многое другое.

Выдвижные панели бывают разных типов, форм и видов. На этой странице рассматривается каждый тип и даётся обзор их характеристик.

Глобальная выдвижная панель

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

Активируется нажатием меню-гамбургера или проведением пальца от левого края до середины экрана в режиме «Слева направо» либо от правого края в режиме «Справа налево».

Компоненты Kirigami.GlobalDrawer используются для создания таких панелей. Они задаются в свойстве globalDrawer окна Kirigami.ApplicationWindow, которое служит основой приложения Kirigami.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Заголовок

Заголовки позволяют разместить закреплённые компоненты в верхней части глобальной выдвижной панели. Компоненты заголовка остаются на месте, даже если глобальная выдвижная панель содержит вложенные действия Kirigami, заменяющие текущий слой на глобальной выдвижной панели.

Выбранный компонент заголовка задаётся свойством header глобальной выдвижной панели, и он заменяет заголовок глобальной выдвижной панели. Это удобно, например, для добавления Kirigami.SearchField:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Адаптация для рабочего стола

Хотя глобальные выдвижные панели в стиле панели могут быть полезны в мобильной среде, на рабочем столе они могут оказаться слишком большими, особенно если в приложении мало действий.

К счастью, глобальные выдвижные панели Kirigami имеют свойство isMenu. Если задать ему значение true, они превращаются в более традиционные меню, но только в настольном режиме.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Здесь действия Kirigami…
    ]
}

Контекстные выдвижные панели

В то время как Kirigami.GlobalDrawer показывает глобальные действия, доступные во всём приложении, Kirigami.ContextDrawer следует использовать для показа действий, относящихся только к определённым контекстам. Обычно он используется на отдельных страницах.

Контекстная выдвижная панель ведёт себя по-разному в зависимости от того, используется ли она на мобильной платформе или на рабочем столе.

На рабочем столе, когда в окне достаточно места, контекстные действия показываются как часть группы actions на верхней панели инструментов. Если места мало, например на мобильном устройстве или в узком окне, контекстные действия скрываются за меню-гамбургером справа. Это отличается от других действий в группе actions, а именно actions.main, actions.left и actions.right: они не скрываются в окнах с ограниченным пространством, а сворачиваются в свои значки.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

В мобильном режиме выдвижная панель всегда состоит из действий, скрытых за меню-гамбургером. Активируется нажатием меню-гамбургера или проведением пальца от правого края до середины экрана в режиме «Слева направо» либо от левого края в режиме «Справа налево».

Модальные и встроенные выдвижные панели

Kirigami предлагает два дополнительных типа панелей: модальные и встроенные. Они довольно похожи друг на друга: обе занимают всю ширину или высоту приложения и могут размещаться по краям окна приложения. Однако на действия пользователя они реагируют по-разному.

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

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

Эти две выдвижные панели так похожи потому, что на деле реализуются с помощью одного и того же компонента Kirigami: Kirigami.OverlayDrawer. Вот несколько важных унаследованных свойств этого компонента, которые следует учитывать:

• Popup.modal определяет, будет ли выдвижная панель модальной или встроенной, в зависимости от логического значения.
• Drawer.edge определяет, с какого края окна приложения появится выдвижная панель; варианты этого свойства входят в перечисление Edge, а именно Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge и Qt.LeftEdge.
• Popup.contentItem содержит компонент, который образует содержимое выдвижной панели.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Установите для свойства modal значение false, чтобы эта выдвижная панель стала
            // встроенной!
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}