Висувні панелі

Висувні панелі надають змогу створювати програми із панелями швидкого доступу до елементів керування та сторінок програми.

Висувні панелі є панелями, які висуваються з боків вікна програми. На ці панелі можна додати інтерактивні елементи, подібні до кнопок дій Kirigami, простих кнопок дій, текстових міток тощо.

Висувні панелі можуть належати до різних типів, можуть мати різні форми. На цій сторінці ми опишемо усі типи і оглянемо їхні характеристики.

Загальна панель

Загальна панель є стандартною можливістю у мобільних програмах KDE, яку іноді можна знайти і у їхніх варіантах для звичайних комп'ютерів. На ній міститься головне меню програми: до нього включено усі функції, які не є специфічними для поточної сторінки, але є важливими для загальної навігації або взаємодії у програмі.

Її можна активувати натисканням кнопки меню-гамбургера або рухом пальця від лівого краю до середини екрана у режимі зліва праворуч або від правого краю у режимі справа ліворуч.

Компоненти Kirigami.GlobalDrawer є тим, чим ми користуємося для створення таких висувних панелей. Назви цих панелей записують до властивості globalDrawer Kirigami.ApplicationWindow , яка складає основу нашої програми Kirigami.

Kirigami.ApplicationWindow {

    globalDrawer: Kirigami.GlobalDrawer {
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}
Знімок загальної висувної панелі у режимі робочої станції, коли вона виглядає як бічна панель

Шапка

Шапками можна скористатися для розташування липких компонентів поверх вашої загальної панелі. Компоненти шапки лишаються на місці, навіть якщо загальна панель містить вкладені дії Kirigami, які замінюють поточний шар на загальній панелі.

Вибраний вами компонент шапки можна встановити за допомогою властивості header загальної панелі.

globalDrawer: Kirigami.GlobalDrawer {

    header: Kirigami.AbstractApplicationHeader {

        contentItem: Kirigami.SearchField {
            id: searchField
            Layout.fillWidth: true
        }
    }

    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}
Тепер на нашій загальній панелі буде показано компонент панелі пошуку, який ми визначили як шапку

Тепер на нашій загальній панелі буде показано компонент панелі пошуку, який ми визначили як шапку

Адаптування для робочої станції

Хоча загальні панелі у стилі звичайних панелей можуть бути корисними у середовищах мобільних пристроїв, вони можуть бути надто великими на звичайних комп'ютерах.

На щастя, у загальних панелей Kirigami є властивість isMenu . Якщо для неї встановлено значення true, наші загальні панелі перетворюються у традиційніші меню лише на робочих станціях.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}
Загальна висувна панель у режимі меню, без шапки або банера

Загальна висувна панель у режимі меню, без шапки або банера

Банери

За допомогою банерів ви можете наказати програмі показувати заголовок і піктограму у верхній частині вашої загальної панелі (навіть над шапкою).

Типово, банери буде показано лише у середовищах мобільних пристроїв. Змінити це можна встановленням для властивості bannerVisible компонента загальної панелі значення true.

Заголовками, встановленими за допомогою властивості title , можна скористатися для удосконалення вигляду вашої загальної панелі і ущільнення компонування панелі. Важливіше, вони можуть нагадати вашим користувачам, що це загальна або загальнопрограмна висувна панель, а не локальна висувна панель.

Крім того, передбачено властивість titleIcon , яку можна поєднати із заголовком з метою надання загальній панелі ще більш естетично привабливого вигляду. Піктограму буде розташовано ліворуч від заголовка.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: true
    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}
Загальна висувна панель із заголовком та піктограмою у банері

Загальна висувна панель із заголовком та піктограмою у банері

Контекстні висувні панелі

Kirigami.GlobalDrawer показує загальні кнопки дій, які доступні у вашій програмі, а Kirigami.ContextDrawer слід користуватися для показу дій, які стосуються лише певних контекстів. Ним, зазвичай, користуються на окремих сторінках.

Контекстну висувну панель буде показано, якщо було створено якусь contextualActions , як частину групи Page.actions . Вона також поводиться по-різному, залежно від того, є платформа мобільною чи стільничною.

На робочій станції, якщо у вікна достатньо місця, пункти контекстних дій буде показано як частину групи 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
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}
Контекстна висувна панель із прихованими контекстними пунктами дій

Контекстна висувна панель із прихованими контекстними пунктами дій

Контекстна висувна панель із показаними усіма контекстними пунктами дій

Контекстна висувна панель із показаними усіма контекстними пунктами дій

На мобільних пристроях висувна панель завжди складається з пунктів дій, які сховано під меню-гамбургером. Її можна активувати натисканням кнопки меню-гамбургера або проведенням пальцем від правого краю до середини екрана у режимі зліва праворуч або від лівого краю у режимі справа ліворуч. Якщо ви працюєте за робочою станцією і хочете тестувати мобільний інтерфейс, ви можете запустити вашу програму із встановленим значенням змінної середовища QT_QUICK_CONTROLS_MOBILE=1.

Той самий приклад, що і вище, але у режимі мобільного пристрою

Той самий приклад, що і вище, але у режимі мобільного пристрою

Відкрита контекстна висувна панель у режимі мобільного пристрою

Відкрита контекстна висувна панель у режимі мобільного пристрою

Модальні і вбудовані панелі

У Kirigami передбачено два додаткових типи висувних панелей, модальні висувні панелі і вбудовані висувні панелі. Вони доволі подібні між собою: обидві займають усю ширину і висоту вікна програми і можуть бути розташовані на краях вікна програми. Втім, вони по-різному взаємодіють із користувачем.

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

Ці дві висувні панелі є подібними, оскільки вони, фактично, можуть бути реалізовані за допомогою одного компонента — Kirigami.OverlayDrawer . Ось декілька важливих успадкованих властивостей цього компонента, про які слід пам'ятати:

  • Popup.modal керує тим, буде висувна панель модальною чи вбудованою, залежно від цього булевого значення.
  • Drawer.edge керує тим, з якого з країв вікна програми з'являтиметься панель; варіантами значення цієї властивості є частиною переліку Edge , а саме, Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge і Qt.LeftEdge
  • Popup.contentItem містить компонент, який формуватиме вміст вашої висувної панелі
import QtQuick.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Встановіть для `modal` значення `false`, щоб зробити цю висувну панель вбудованою!
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

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

    Controls.Button {
        text: "Open bottomDrawer"
        onClicked: bottomDrawer.open()
    }
}
Модальна висувна панель з нижнього краю екрана

Модальна висувна панель з нижнього краю екрана

Вбудована висувна панель з нижнього краю екрана

Вбудована висувна панель з нижнього краю екрана

Використання накладних нижніх висувних панелей — NeoChat

NeoChat використовує нижні накладні висувні панелі для надання у відповідь на довге натискання на пункті повідомлення у розпорядження користувача декількох пунктів дій, які користувач може виконати із повідомленням. Ось спрощений приклад того, як це виглядає:

Kirigami.Page {

    ListView {
        model: App.MessageModel
        delegate: MessageDelegate {
            onPressAndHold: bottomDrawer.open()
        }
    }

   Kirigami.OverlayDrawer {
       id: bottomDrawer
       height: popupContent.implicitHeight
       edge: Qt.BottomEdge
       padding: 0
       leftPadding: 0
       rightPadding: 0
       bottomPadding: 0
       topPadding: 0

       parent: applicationWindow().overlay

       ColumnLayout {
           id: popupContent
           width: parent.width
           spacing: 0
           
           // Відомості щодо повідомлення
           ...
           
           // Дії з повідомленням
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}