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

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

Дії

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

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

import org.kde.kirigami 2.13 as Kirigami

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

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

import org.kde.kirigami 2.13 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.13 as Kirigami

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

    displayComponent: TextField { }

    displayHint: Kirigami.DisplayHints.KeepVisible
}

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

Сторінка

Однією із можливостей сторінок є можливість додавання до них дій.

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

import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {
    title: i18n("Demo")

    actions {
        main: Kirigami.Action {
            icon.name: "go-home"
            onTriggered: showPassiveNotification(i18n("Main action triggered"))
        }
        left: Kirigami.Action {
            icon.name: "go-previous"
            onTriggered: showPassiveNotification(i18n("Left action triggered"))
        }
        right: Kirigami.Action {
            icon.name: "go-next"
            onTriggered: showPassiveNotification(i18n("Right action triggered"))
        }
        contextualActions: [
            Kirigami.Action {
                text: i18n("Contextual Action 1")
                icon.name: "bookmarks"
                onTriggered: showPassiveNotification(i18n("Contextual action 1 clicked"))
            },
            Kirigami.Action {
                text: i18n("Contextual Action 2")
                icon.name: "folder"
                enabled: false
            }
        ]
    }
}
Пункти дій сторінки на робочій станції

Пункти дій сторінки на робочій станції

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

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

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

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

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()
            }
        }
    ]
}

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

Поле пошуку із текстом: "I want

SwipeListItem

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

ListView {
    model: myModel
    delegate: SwipeListItem {
        QQC2.Label {
            text: model.text
        }
        actions: [
             Action {
                 icon.name: "document-decrypt"
                 onTriggered: print("Action 1 clicked")
             },
             Action {
                 icon.name: model.action2Icon
                 onTriggered: // якісь дії
             }
        ]
    }
}
SwipeListItem на комп'ютері

SwipeListItem на комп'ютері

SwipeListItem на мобільному пристрої

SwipeListItem на мобільному пристрої

ActionToolBar

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

Подібно до 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 можна ознайомитися за допомогою спеціалізованої сторінки документації.

Карти

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