Дії з додавання

Ширші знання щодо дій Kirigami допоможуть нам зробити нашу програму кориснішою.

Коротке повторення

Поки що нам вдалося побудувати просту програму, яка може показувати картки. Втім, у нас ще немає способу додавання нових карток до нашої панелі карток.

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

Дії

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

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

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

Якщо ви раніше користувалися програмами 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 сторінки: об'єкт actions має властивості, які надають нам можливість встановлювати різні дії у різних позиціях, але оскільки наша дія «Add kountdown» є центральною для нашого інтерфейсу користувача, ми робимо її основною дією нашої сторінки.

Із властивостями id і text ми вже познайомилися у попередніх розділах підручника. Втім, нас має зацікавити нова властивість icon: це об'єкт із декількома властивостями, за допомогою якого можна показувати певні піктограми для наших дій. На щастя, щоб скористатися піктограмами KDE достатньо надати назву для властивості піктограми, icon.name.

Найважливішою є властивість onTriggered. Вона визначає те, що буде виконано, коли використовуватиметься наша дія. Ви можете зауважити, що у нашому прикладі ми використовуємо метод kountdownModel.append kountdownModel, який було створено у попередньому розділі нашого підручника. За допомогою цього методу можна додати новий елемент до нашої моделі списку. Ми надаємо методу об'єкт, який має відповідні властивості для наших відліків (назву, опис та дату-замінник).

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

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

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

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

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

	...
	
}

Тут ми розмістили нашу загальну висувну панель у нашому вікні програми. Головною властивістю, якій ми маємо приділити увагу, є actions. Ця властивість приймає значення масиву компонентів Kirigami.Action. Ця дія має відповідну піктограму і запускає функцію Qt.quit(), яка завершує роботу програми.

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