Панелі інструментів дій
Хоча сторінки Kirigami надають вам змогу без проблем розташовувати набір кнопок дій у шапці сторінки, іноді варто скористатися гнучкішим інструментом.
До складу Kirigami включено компонент Kirigami.ActionToolBar . Він показує список об'єктів Kirigami.Action так, щоб область перегляду вмістила якомога більше об'єктів, надаючи меню переповнення із тими об'єктами, які не вмістилися до області перегляду. ActionToolBar є динамічним об'єктом — пересуває пункти до меню переповнення і з меню переповнення, залежно від доступного розміру.
Нотатка
На цій сторінці ми припускаємо, що ви вже познайомилися із об'єктами Kirigami.Action . Якщо це не так, ви можете дізнатися про них усе у нашому початковому підручнику або на спеціальній сторінці документації щодо них.Створюємо нашу першу ActionToolBar
Компонування і розташування вашого Kirigami.ActionToolBar визначається лише вами, хоча з міркувань зручності у користуванні, зазвичай, варто користуватися традиційними принципами і розташовувати панель інструментів у верхній або нижній частині сторінки, розтягнувши її на усю ширину області перегляду.
Подібно до більшості компонентів, які містять пункти дій, Kirigami.ActionToolBar має властивість actions . Пов'язати із цією властивістю можна масив компонентів Kirigami.Action .
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
id: root
title: "ActionToolBar App"
width: 600
height: 400
pageStack.initialPage: Kirigami.Page {
Kirigami.ActionToolBar {
anchors.left: parent.left
anchors.right: parent.right
actions: [
Kirigami.Action {
text: "Beep"
icon.name: "notifications"
onTriggered: showPassiveNotification("BEEP!")
},
Kirigami.Action {
text: "Action Menu"
icon.name: "overflow-menu"
Kirigami.Action {
text: "Deet";
icon.name: "notifications"
onTriggered: showPassiveNotification("DEET!")
}
Kirigami.Action {
text: "Doot";
icon.name: "notifications"
onTriggered: showPassiveNotification("DOOT!")
}
},
Kirigami.Action {
icon.name: "search"
displayComponent: Kirigami.SearchField { }
}
]
}
}
}
ActionToolBar із достатнім простором для усіх дочірніх елементів
ActionToolBar із переповненим меню, що містить дочірні пункти
Вирівнювання
Типово, пункти дій на ActionToolBar буде вирівняно ліворуч. Таке вирівнювання є не завжди бажаним. На щастя, ми можемо змінити це за допомогою властивості
alignment
. Для цієї властивості ви можете встановити діапазон значень, але трьома найпоширенішими для ActionToolBar є Qt.AlignLeft, Qt.AlignCenter і Qt.AlignRight (які стосуються
горизонтального вирівнювання
).
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
id: root
title: "ActionToolBar App"
width: 600
height: 400
pageStack.initialPage: Kirigami.Page {
Controls.GroupBox {
anchors.left: parent.left
anchors.right: parent.right
Kirigami.ActionToolBar {
anchors.fill: parent
alignment: Qt.AlignCenter
actions: [
Kirigami.Action {
text: "Beep"
icon.name: "notifications"
onTriggered: showPassiveNotification("BEEP!")
}
]
}
}
}
}