Usar a Galeria do Kirigami
A Galeria do Kirigami é um amigo útil quando estiver a desenvolver uma aplicação em Kirigami. É uma aplicação que usa as funcionalidades do Kirigami, oferece ligações para o código-fonte, dicas de como usar os componentes, assim como referências para as páginas do HIG correspondentes.
Sugestão
Antes de prosseguir, instale por favor a Galeria do Kirigami. Já deverá existir no repositório da sua distribuição de Linux.Procurar uma grelha de cartões
Ao navegar pela aplicação da Galeria do Kirigami, iremos encontrar o componente da galeria da "Grelha de cartões". Este é um bom candidato por exemplo para mostrar uma grelha de cartões de contactos.
Depois de seleccionar o componente da "Grelha de cartões", iremos carregar no botão "Informações" em cima e à direita, para obter algumas informações úteis sobre os tipos Card e AbstractCard.
Na secção inferior desta janela de informações, iremos também encontrar uma referência para o código-fonte da "Área da Grelha de Cartões". Vejamos essa página.
Implementar uma grelha de cartões
Iremos reutilizar a maioria do código encontrado na Galeria da Grelha de Cartões, na página de código-fonte do CardsGridViewGallery. Em particular, iremos remover as partes extra da OverlaySheet (que é a implementação da Galeria do Kirigami que nos ajudou a obter o repositório do código-fonte do 'kirigami-gallery').
Como tal, iremos substituir a componente Page do 'main.qml' da aplicação de esqueleto com a ScrollablePage abaixo:
Kirigami.ScrollablePage {
title: i18n("Address book (prototype)")
Kirigami.CardsGridView {
id: view
model: ListModel {
id: mainModel
}
delegate: card
}
}
O que fizemos até agora foi criar uma ScrollablePage e colocar uma CardsGridView nela, dado que queremos mostrar uma grelha de cartões gerada a partir de um modelo. Os dados de cada contacto são obtidos com um ListModel enquanto o delegado do cartão é responsável pela apresentação dos dados. Para mais informações sobre os modelos e vistas no Qt Quick, veja aqui.
Agora vamos preencher o modelo que irá alimentar a nossa grelha com dados. Na definição do Kirigami.ScrollablePage , logo a seguir a:
delegate: card
}
adicione o seguinte abaixo:
Component.onCompleted: {
mainModel.append({
"firstname": "Pablo",
"lastname": "Doe",
"cellphone": "6300000002",
"email" : "jane-doe@example.com",
"photo": "qrc:/konqi.jpg"
});
mainModel.append({
"firstname": "Paul",
"lastname": "Adams",
"cellphone": "6300000003",
"email" : "paul-adams@example.com",
"photo": "qrc:/katie.jpg"
});
mainModel.append({
"firstname": "John",
"lastname": "Doe",
"cellphone": "6300000001",
"email" : "john-doe@example.com",
"photo": "qrc:/konqi.jpg"
});
mainModel.append({
"firstname": "Ken",
"lastname": "Brown",
"cellphone": "6300000004",
"email" : "ken-brown@example.com",
"photo": "qrc:/konqi.jpg"
});
mainModel.append({
"firstname": "Al",
"lastname": "Anderson",
"cellphone": "6300000005",
"email" : "al-anderson@example.com",
"photo": "qrc:/katie.jpg"
});
mainModel.append({
"firstname": "Kate",
"lastname": "Adams",
"cellphone": "6300000005",
"email" : "kate-adams@example.com",
"photo": "qrc:/konqi.jpg"
});
}
Nota
Repare no{}
que indica que estamos a adicionar um objecto de JavaScript ao nosso modelo.A componente de modelo da nossa implementação está pronta. Vamos prosseguir com a definição de um delegado que será responsável por mostrar os dados. Como tal, iremos adicionar o seguinte código à nossa página no 'main.qml', logo a seguir à definição do Component.onCompleted :
Component {
id: card
Kirigami.Card {
height: view.cellHeight - Kirigami.Units.largeSpacing
banner {
title: model.firstname + " " + model.lastname
titleIcon: "im-user"
}
contentItem: Column {
id: content
spacing: Kirigami.Units.smallSpacing
Controls.Label {
wrapMode: Text.WordWrap
text: "Mobile: " + model.cellphone
}
Controls.Label {
wrapMode: Text.WordWrap
text: "Email: " + model.email
}
}
}
}
A seguir à informação relacionada na página da API do Kirigami.Card iremos preencher um " banner ", que irá actuar como cabeçalho que apresentará o nome do contacto, assim como um ícone do contacto.
O conteúdo principal do cartão foi preenchido com o número de telemóvel e o e-mail do contacto, estruturado como uma Column de Label's .
A aplicação deverá ficar semelhante ao seguinte:
Sugestão
Poderá encontrar o código-fonte do tutorial na totalidade em invent.kde.org.Como último passo, iremos adicionar alguma funcionalidade de testes a cada cartão. Em particular, será adicionada uma
Action
call
(chamar). Contudo, em vez de uma chamada a sério, será apresentada uma notificação passiva. Como tal, iremos mudar o Component do card
para o seguinte:
|
|
Assim, adicionámos uma Kirigami.Action que, assim que for desencadeada (ao carregar no botão da acção), irá apresentar uma notificação passiva .
Resultado
Finalmente, a nossa aplicação deverá ficar parecida com o seguinte:
|
|