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.

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 na acção do fundo e iremos obter algumas informações úteis sobre os tipos Card e AbstractCard.

Nesta 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 a grelha de cartões

Iremos reutilizar a maioria do código encontrado na Galeria da Grelha de Cartões, na sua página de código-fonte. 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 Página Deslizante 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"});
}

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 iremos preencher um "separador" (ainda que sem uma imagem para já), 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 coluna de legendas.

A aplicação deverá ficar semelhante ao seguinte:

Como último passo, iremos adicionar alguma funcionalidade de testes a cada cartão. Em particular, será adicionada uma acção "call" (chamar). Contudo, em vez de uma chamada a sério, será apresentada uma notificação passiva. Como tal, iremos mudar o Component do cartão para o seguinte:

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
            }
        }

        actions: [
            Kirigami.Action {
                text: "Call"
                icon.name: "call-start"

                onTriggered: { showPassiveNotification("Calling " + model.firstname + " " + model.lastname + " ...") }
            }
        ]
    }
}

Assim, adicionámos uma acção que, assim que for desencadeada (ao carregar no botão da acção), irá apresentar uma notificação passiva .

Finalmente, a nossa aplicação deverá ficar parecida com o seguinte: