Barras de ferramentas de ação
Embora as páginas Kirigami permitam que você coloque facilmente um conjunto de ações no cabeçalho da página, há momentos em que você pode preferir algo mais flexível.
O Kirigami fornece o componente Kirigami.ActionToolBar. Ele exibe uma lista de objetos Kirigami.Action e exibirá o máximo possível deles, fornecendo um menu flutuante para aqueles que não couberem. A ActionToolBar é dinâmica e moverá as ações para dentro e para fora do menu flutuante, dependendo do tamanho disponível para ela.
Nota
Esta página pressupõe que você esteja familiarizado com os objetos Kirigami.Action. Caso contrário, você pode aprender tudo sobre eles em nosso tutorial para iniciantes ou na página de documentação dedicada a eles.Criando nossa primeira ActionToolBar
O layout e a localização da sua Kirigami.ActionToolBar são de sua escolha, embora, para facilitar o uso, geralmente seja uma boa ideia seguir as convenções da interface do usuário e colocar a barra de ferramentas próxima ao topo ou ao final da página, com a largura adequada.
Como a maioria dos outros componentes que contêm ações, Kirigami.ActionToolBar possui uma propriedade actions. Podemos atribuir um array de componentes Kirigami.Action a essa propriedade.
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 com espaço suficiente para todos os filhos
ActionToolBar com menu de estouro contendo filhos
Alinhamento
Por padrão, as ações em Kirigami.ActionToolBar serão alinhadas à esquerda. Isso pode não ser desejável em todas as situações. Felizmente, podemos alterar isso com a propriedade alignment. Podemos definir essa propriedade com uma série de valores, mas os três mais relevantes são Qt.AlignLeft, Qt.AlignCenter e Qt.AlignRight (que lidam com alinhamento horizontal).
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!")
}
]
}
}
}
}