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.
|
|
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"))
}
]
}
...
}
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
}
]
}
}
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"))
}
]
}
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.