Панели действий
Хотя страницы Kirigami позволяют легко разместить набор действий в заголовке страницы, иногда требуется более гибкое решение.
Kirigami предоставляет компонент Kirigami.ActionToolBar. Он принимает список объектов Kirigami.Action и показывает столько из них, сколько возможно, а для не помещающихся предоставляет меню переполнения. ActionToolBar динамичен и перемещает действия в меню переполнения и обратно в зависимости от доступного размера.
Примечание
На этой странице предполагается знакомство с объектами Kirigami.Action. Если нет, узнать о них всё можно в нашем руководстве для начинающих или на странице документации, посвящённой им.Создание первой панели действий
Компоновка и расположение вашей 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 { }
}
]
}
}
}
Панель действий с достаточным местом для всех дочерних элементов
Панель действий с меню переполнения, содержащим дочерние элементы
Выравнивание
По умолчанию действия в Kirigami.ActionToolBar выравниваются по левому краю. Это подходит не во всех случаях. К счастью, это можно изменить с помощью свойства alignment. Этому свойству можно задать ряд значений, но наиболее важны три: 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!")
}
]
}
}
}
}