Компоненти на основі дій

Дії (Actions) у Kirigami використовують для додавання функціональних можливостей до компонентів.

Дії

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

Нотатка

Дії Kirigami успадковують від QtQuick Controls Action , і з ними можна пов'язувати клавіатурні скорочення.

Подібно до дій Control QtQuick , їх можна пов'язати із пунктами меню і кнопками панелі інструментів, а також декількома іншими компонентами Kirigami.

import org.kde.kirigami 2.20 as Kirigami

Kirigami.Action {
    id: copyAction
    text: i18n("&Copy")
    icon.name: "edit-copy"
    shortcut: StandardKey.Copy
    onTriggered: { ... }
}

Нотатка

Властивість icon.name визначає назву загальносистемної піктограми за специфікацією FreeDesktop. Піктограми і назви піктограм можна переглянути за допомогою програми CuttleFish KDE, яка є частиною plasma-sdk, або відвідавши сторінку специфікації назв піктограм FreeDesktop.

Однією з можливостей, які пропонуються діями Kirigami, окрім дій QtQuick , є можливість вкладення дій одна в одну.

import org.kde.kirigami 2.20 as Kirigami

Kirigami.Action {
    text: "View"
    icon.name: "view-list-icons"
    Kirigami.Action {
        text: "action 1"
    }
    Kirigami.Action {
        text: "action 2"
    }
    Kirigami.Action {
        text: "action 3"
    }
}

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

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

import org.kde.kirigami 2.20 as Kirigami

Kirigami.Action {
    text: "Search"
    icon.name: "search"

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

Використання дій у інших компонентах

Сторінка

Однією із можливостей Kirigami.Page є можливість додавання до неї дій.

Ви можете додати кнопки 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
import org.kde.kirigami 2.20 as Kirigami

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

    pageStack.initialPage: Kirigami.Page {
        title: "Demo"

        actions {
            main: Kirigami.Action {
                icon.name: "go-home"
                onTriggered: showPassiveNotification("Main action triggered")
            }
            left: Kirigami.Action {
                icon.name: "go-previous"
                onTriggered: showPassiveNotification("Left action triggered")
            }
            right: Kirigami.Action {
                icon.name: "go-next"
                onTriggered: showPassiveNotification("Right action triggered")
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "bookmarks"
                    onTriggered: showPassiveNotification("Contextual action 1 clicked")
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "folder"
                    enabled: false
                }
            ]
        }
    }
}

Попередження

Щоб контекстні дії працювали на мобільних пристроях, вам слід додати ContextDrawer до вашого Kirigami.ApplicationWindow .

Kirigami.ApplicationWindow {
    ...
    contextDrawer: Kirigami.ContextDrawer {
        id: contextDrawer
    }
    ...
}

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

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

Kirigami.ApplicationWindow {
    title: i18n("Demo")
    globalDrawer: Kirigami.GlobalDrawer {
        title: i18n("Demo")
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: i18n("View")
                icon.name: "view-list-icons"
                Kirigami.Action {
                    text: i18n("View Action 1")
                    onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
                }
                Kirigami.Action {
                    text: i18n("View Action 2")
                    onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
                }
            },
            Kirigami.Action {
                text: i18n("Action 1")
                onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("Action 2")
                onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
            }
        ]
    }
    ...
}

Пункти дій загальних панелей на робочій станції

Пункти дій загальних панелей на мобільному комп'ютері

Почитати більше про загальних панелей можна на сторінці документації до панелей.

ActionTextFields

Kirigami.ActionTextField використовується для додавання контекстних дій до поля для введення тексту, наприклад, для вилучення тексту або пошуку за введеним текстовим критерієм.

Kirigami.ActionTextField {
    id: searchField
    rightActions: [
        Kirigami.Action {
            icon.name: "edit-clear"
            visible: searchField.text !== ""
            onTriggered: {
                searchField.text = ""
                searchField.accepted()
            }
        }
    ]
}

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

Нотатка

Потреба у безпосередньому використанні ActionTextField виникає дуже нечасто. І SearchField , і PasswordField успадковують від ActionTextField і, ймовірно, пасують до усіх випадків використання.

SwipeListItem

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

ListView {
    model: myModel
    delegate: SwipeListItem {
        Controls.Label {
            text: model.text
        }
        actions: [
             Action {
                 icon.name: "document-decrypt"
                 onTriggered: print("Action 1 clicked")
             },
             Action {
                 icon.name: model.action2Icon
                 onTriggered: //якісь дії
             }
        ]
    }
}

ActionToolBar

Kirigami.ActionToolBar — панель інструментів, яку побудовано на основі списку дій. Типово, кожен пункт дії, який вміщується на панель інструментів, буде представлено ToolButton , а ті, які не вмістилися, буде пересунуто до меню у кінцевій частині панелі інструментів.

Подібно до ActionTextField , ActionToolBar не варто використовувати безпосередньо, оскільки він використовується заголовками сторінок і картками для забезпечення показу їхніх пунктів дій.

Kirigami.ActionToolBar {
    actions: [
        Kirigami.Action {
            text: i18n("View Action 1")
            onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
        },
        Kirigami.Action {
            text: i18n("View Action 2")
            onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
        },
        Kirigami.Action {
            text: i18n("Action 1")
            onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
        },
        Kirigami.Action {
            text: i18n("Action 2")
            onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
        }
    ]
}

Горизонтальна панель інструментів, яку показано у верхній частині вікна програми

Із докладнішим описом компонентів ActionToolBar можна ознайомитися за допомогою спеціалізованої сторінки документації.

Карти

Kirigami.Card використовують для показу збірки відомостей або набору кнопок. Ці кнопки можна додати до групи actions, подібно до попередніх компонентів.

Kirigami.Card {
    actions: [
        Kirigami.Action {
            text: qsTr("Action1")
            icon.name: "add-placemark"
        },
        Kirigami.Action {
            text: qsTr("Action2")
            icon.name: "address-book-new-symbolic"
        },
        // ...
    ]
    banner {
        source: "../banner.jpg"
        title: "Title Alignment"
        titleAlignment: Qt.AlignLeft | Qt.AlignBottom
    }
    contentItem: Controls.Label {
        wrapMode: Text.WordWrap
        text: "My Text"
    }
}

Знімок повноцінної Card із банером-тлом під її заголовком, білим тлом під її текстом та двома кнопками дій із піктограмами та меню-гамбургером внизу

Докладніший опис можна знайти на сторінці компонентів для карток.

Типографія

Ряди сторінок і стоси сторінок