Componentes baseados em acções
Acções
Uma Kirigami.Action encapsula uma acção da interface do utilizador. Podemos usá-las para oferecer às nossas aplicações acções fáceis de aceder e que são essenciais à sua funcionalidade.
Nota
As acções do Kirigami herdam do Action do QtQuick Controls e podem ter atribuídos atalhos de teclado.Como as Action's do QtQuick Controls , as mesmas poderão ser associadas não só aos itens do menu e aos botões das barras de ferramentas, mas também a vários outros componentes do Kirigami.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
id: copyAction
text: i18n("&Copy")
icon.name: "edit-copy"
shortcut: StandardKey.Copy
onTriggered: { ... }
}
Nota
A propriedade icon.name recebe os nomes dos ícones de sistema de acordo com a especificação do FreeDesktop. Estes ícones e nomes de ícones podem ser vistos com a aplicação Cuttlefish, que vem com o pacote plasma-sdk, ou indo à especificação de nomes de ícones do FreeDesktop.Uma funcionalidade oferecida pelas Acções do Kirigami sobre as Action's do QtQuick é a possibilidade de encadear acções.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
text: "View"
icon.name: "view-list-icons"
Kirigami.Action {
text: "action 1"
}
Kirigami.Action {
text: "action 2"
}
Kirigami.Action {
text: "action 3"
}
}
Outra funcionalidade das acções do Kirigami é fornecer várias dicas aos itens que usam acções, sobre a forma como devem mostra a acção. Estas são tratadas principalmente pelas propriedades displayHint and displayComponent .
Estas propriedades serão respeitadas pelo item, se possível. Por exemplo, as seguintes acções serão apresentadas como um TextField com o item a tentar o seu melhor em manter o item visível o máximo de tempo possível.
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Action {
text: "Search"
icon.name: "search"
displayComponent: TextField { }
displayHint: Kirigami.DisplayHints.KeepVisible
}
Usar as acções noutros componentes
Página
Uma das funcionalidades do Kirigami.Page é que poderá adicionar Action's a elas.
Poderá adicionar uma acção actions.main
, uma action.left
e uma action.right
e acções de contexto adicionais que aparecem na barra de ferramentas, caso exista espaço suficiente, ou num menu em hambúrguer nos ecrãs mais pequenos.
|
|

Acções da página no computador

Acções da página num dispositivo móvel
Aviso
Para fazer com que as acções do contexto funcionem em dispositivos móveis, precisa de adicionar uma ContextDrawer na sua Kirigami.ApplicationWindow .
Kirigami.ApplicationWindow {
...
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer
}
...
}
Área Global
A área global oferece uma navegação baseada em acções à sua aplicação. Este é o local em que as acções encadeadas são úteis, porque lhe permite criar uma navegação encadeada:
Kirigami.ApplicationWindow {
title: i18n("Demo")
globalDrawer: Kirigami.GlobalDrawer {
title: i18n("Demo")
titleIcon: "applications-graphics"
actions: [
Kirigami.Action {
text: i18n("View")
icon.name: "view-list-icons"
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
}
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
}
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}
...
}

Acções das Áreas Globais no computador

Acções das Áreas Globais num dispositivo móvel
Poderá ler mais sobre as Áreas Globais na página de documentação das mesmas.
ActionTextFields
Um Kirigami.ActionTextField é usado para adicionar algumas acções de contexto a um campo de texto, como por exemplo limpar o texto ou procurar pelo mesmo.
Kirigami.ActionTextField {
id: searchField
rightActions: [
Kirigami.Action {
icon.name: "edit-clear"
visible: searchField.text !== ""
onTriggered: {
searchField.text = ""
searchField.accepted()
}
}
]
}
Neste exemplo, estamos a criar um botão "limpar" para um campo de pesquisa que só aparece quando tiver introduzido algum texto.
Nota
Raramente deverá usar um ActionTextField directamente. O SearchField e o PasswordField herdam ambos deActionTextField
e provavelmente irão cobrir o seu caso de uso desejado.SwipeListItem
Um Kirigami.SwipeListItem é um objecto-delegado que pretende dar suporte a acções extras. Ao usar um rato, as mesmas irão aparecer à passagem. Num dispositivo táctil, as mesmas poderão aparecer se arrastar o item com a pega. Nas seguintes imagens, estes são os ícones à direita.
ListView {
model: myModel
delegate: SwipeListItem {
Controls.Label {
text: model.text
}
actions: [
Action {
icon.name: "document-decrypt"
onTriggered: print("Action 1 clicked")
},
Action {
icon.name: model.action2Icon
onTriggered: // fazer algo
}
]
}
}

O SwipeListItem num computador

O SwipeListItem num dispositivo móvel
ActionToolBar
Uma Kirigami.ActionToolBar é uma barra de ferramentas construída com base numa lista de acções. Por omissão, cada acção que caiba na barra de ferramentas será representada como um ToolButton , sendo que as que não caibam irão para um menu no fim da barra de ferramentas.
Como o ActionTextField , poderá não necessitar de usar o ActionToolBar directamente, dado que é usado pelos cabeçalhos das páginas e cartões para fornecer a sua apresentação das acções.
Kirigami.ActionToolBar {
actions: [
Kirigami.Action {
text: i18n("View Action 1")
onTriggered: showPassiveNotification(i18n("View Action 1 clicked"))
},
Kirigami.Action {
text: i18n("View Action 2")
onTriggered: showPassiveNotification(i18n("View Action 2 clicked"))
},
Kirigami.Action {
text: i18n("Action 1")
onTriggered: showPassiveNotification(i18n("Action 1 clicked"))
},
Kirigami.Action {
text: i18n("Action 2")
onTriggered: showPassiveNotification(i18n("Action 2 clicked"))
}
]
}

Uma barra de ferramentas horizontal a ser apresentada no topo da aplicação
Poderá ler mais sobre os componentes ActionToolBar na sua página de documentação dedicada.
Cartões
Um
Kirigami.Card
é usado para apresentar uma colecção de informações ou acções em conjunto. Estas acções poderão ser adicionadas ao grupo actions
, de forma semelhante aos componentes anteriores.
Kirigami.Card {
actions: [
Kirigami.Action {
text: qsTr("Action1")
icon.name: "add-placemark"
},
Kirigami.Action {
text: qsTr("Action2")
icon.name: "address-book-new-symbolic"
},
// ...
]
banner {
source: "../banner.jpg"
title: "Title Alignment"
titleAlignment: Qt.AlignLeft | Qt.AlignBottom
}
contentItem: Controls.Label {
wrapMode: Text.WordWrap
text: "My Text"
}
}

Para mais informações, consulte a página dos componentes Card.