Action toolbars
Embora as páginas do Kirigami lhe permitam facilmente colocar um conjunto de acções no cabeçalho da página, existem ocasiões em que poderá preferir ter algo mais flexível.
O Kirigami oferece o componente Kirigami.ActionToolBar . O mesmo irá mostrar uma lista de objectos Kirigami.Action e irá mostrar o máximo possível, oferecendo um menu com o excedente para os que não couberem. O ActionToolBar é dinâmico e irá mover as acções para dentro e para fora do menu excedentário, dependendo do tamanho disponível para ele.
Nota
Esta página assume que está familiarizado com os objectos Kirigami.Action . Se não estiver, poderá aprender tudo sobre eles no nosso tutorial para principiantes ou na página dedicada da documentação sobre eles.Criar a nossa primeira ActionToolBar
A disposição e localização do seu Kirigami.ActionToolBar são realmente à sua escolha se bem que, por questões de usabilidade, é normalmente uma boa ideia seguir as convenções de interfaces e colocar a sua barra de ferramentas perto do topo ou do fundo da sua página, tendo-a disposta em toda a largura do ecrã.
Como na maioria dos componentes que contêm acções, o Kirigami.ActionToolBar tem uma propriedade actions . Podemos atribuir uma lista de componentes Kirigami.Action a esta 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 { }
}
]
}
}
}
O ActionToolBar com espaço suficiente para todos os seus filhos
O ActionToolBar com um menu excedentário que contém filhos
Alinhamento
Por omissão, as acções na ActionToolBar estarão alinhadas à esquerda. Isto poderá não ser o desejável em todas as situações. Felizmente, podemos alterar isto com a propriedade
alignment
. Podemos configurar esta propriedade com um conjunto de valores, mas os três mais relevantes para uma ActionToolBar são o Qt.AlignLeft, Qt.AlignCenter e Qt.AlignRight (que lidam com o
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!")
}
]
}
}
}
}