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

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

Пункти дій на мобільному пристрої
Якщо ви раніше користувалися програмами Kirigami, ви напевне взаємодіяли із діями Kirigami. На цьому зображенні ми можемо бачити кнопки дій праворуч від заголовка сторінки із різноманітними піктограмами. Дії Kirigami може бути показано у декілька способів. Вони можуть виконувати широкий діапазон завдань.
Додавання відліків
Програма із зворотним відліком буде непотрібною без можливості додавання зворотних відліків. Давайте створимо дію, яка надасть нам змогу додавати зворотні відліки.
pageStack.initialPage: Kirigami.ScrollablePage {
...
actions.main: Kirigami.Action {
id: addAction
icon.name: "list-add"
text: i18nc("@action:button", "Add kountdown")
onTriggered: kountdownModel.append({
name: "Kirigami Action added card!",
description: "Congratulations, your Kirigami Action works!",
date: 1000
})
}
...
}
Ми розташовуємо нашу дію Kirigami у нашій головній сторінці з попередніх розділів нашого підручника. Якщо нам захочеться, ми можемо додати інші дії на нашу сторінку (і навіть вкласти дії в інші дії!). Компоненти
Kirigami.Action
використовують як контекстні дії у межах сторінок Kirigami. Ми надаємо це значення властивості
actions.main
Kirigami.Page
: об'єкт actions
має властивості, які надають нам можливість встановлювати різні дії у різних позиціях, але оскільки наша дія «Add kountdown» є центральною для нашого інтерфейсу користувача, ми робимо її основною дією нашої сторінки.
Із властивостями id
і text
ми вже познайомилися у попередніх розділах підручника. Втім, нас має зацікавити нова властивість Action.icon: це об'єкт із декількома властивостями, за допомогою якого можна показувати певні піктограми для наших дій. На щастя, щоб скористатися піктограмами KDE достатньо надати назву для властивості піктограми, icon.name
.
Нотатка
Cuttlefish — програма KDE, за допомогою якої ви можете переглянути усі піктограми, якими можна скористатися у вашій програмі. У програмі передбачено декілька корисних можливостей, зокрема попередній перегляд вигляду піктограм у різних встановлених темах, попередній перегляд із різними розмірами тощо. Можливо, програма буде корисною для вас із метою визначення, які піктограми варто використати у вашій програмі.
У багатьох піктограмах KDE використано специфікацію назв піктограм FreeDesktop. Через це, вам також буде корисним звернутися до сайта проєкту FreeDesktop, де наведено список усіх сумісних із різними стільничними середовищами назв піктограм.
Найважливішою є обробник сигналів
onTriggered
. Вона визначає те, що буде виконано, коли використовуватиметься наша дія. Ви можете зауважити, що у нашому прикладі ми використовуємо метод kountdownModel.append
kountdownModel.append, який було створено у попередньому розділі нашого підручника. За допомогою цього методу можна додати новий елемент до нашої моделі списку. Ми надаємо методу об'єкт (позначений фігурними дужками {}
), який має відповідні властивості для наших відліків (name
, description
та замінник date
).

Кожного разу, коли ми натискатимемо кнопку «Add kountdown» у верхній правій частині вікна, додаватиметься наш нетиповий відлік.

Мобільна версія
Загальна панель
Помітили три риски поряд із заголовком сторінки на попередньому знімку вікна? Це меню-гамбургер, яке відкриває Kirigami.GlobalDrawer . Загальні висувні панелі корисні для загальної навігації і дій: іншими словами, тих речей, які можуть знадобитися усюди у вашій програмі. Ми створимо просту загальну висувну панель, на якій міститиметься кнопка виходу з програми.
Kirigami.ApplicationWindow {
id: root
...
globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
actions: [
Kirigami.Action {
text: i18n("Quit")
icon.name: "gtk-quit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
...
}
Тут ми розмістили нашу загальну висувну панель у нашому вікні програми. Головною властивістю, якій ми маємо приділити увагу, є GlobalDrawer.actions . Ця властивість приймає значення масиву компонентів Kirigami.Action . Ця дія має відповідну піктограму і запускає функцію Qt.quit() , яка завершує роботу програми.
Оскільки ми поки зберігаємо простоту нашої загальної висувної панелі, ми встановлюємо для GlobalDrawer.isMenu значення true. У результаті нашу загальну висувну панель буде показано як звичайне меню програми, яке займатиме менше місця за типову загальну висувну панель.

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

Загальна панель як меню
Нотатка
Сторінка заснованих на Actions компонентів у розділі «Компоненти» цієї документації містить докладніші відомості щодо дій Kirigami та їхнього використання.Наша програма на поточний момент
|
|