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.
Like most other action-holding components, Kirigami.ActionToolBar has an actions property. We can assign an array of Kirigami.Action components to this property.
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
By default, actions in the Kirigami.ActionToolBar will be left aligned. This might not be desirable in all situations. Thankfully we can change this with the alignment property. We can set this property to a range of values, but the three most relevant ones are Qt.AlignLeft, Qt.AlignCenter, and Qt.AlignRight (which deal with horizontal alignment).
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!")
}
]
}
}
}
}