Páginas com Deslocamento e Listas

As páginas com deslocamento são úteis quando forem combinadas em conjunto com componentes verticais ou componentes dinâmicos, como as listas.

Kirigami.ScrollablePage

Uma Kirigami.ScrollablePage é uma página que mantém o deslocamento do conteúdo, como as ListViews. O deslocamento e os respectivos indicadores são geridos de forma automática.

Kirigami.ScrollablePage {
    id: root
    // O rectângulo ficará deslizante automaticamente
    Rectangle {
        width: root.width
        height: 99999
    }
}

De outra forma qualquer, uma página com deslocamento é igual a uma página normal.

Uma ListView numa ScrollablePage

Quando os elementos-filhos directos de um Kirigami.ScrollablePage se estenderem na vertical para lá do tamanho da própria página, irá aparecer uma página de deslocamento no extremo direito da página e a página continuará com as funcionalidades de deslocamento.

Imagem de Página com Deslocamento do NeoChat

Duas páginas com deslocamento, contendo ambas uma ListView com conteúdos personalizados (Imagem do NeoChat)

Muitas vezes tem mais que um elemento-filho na sua Kirigami.ScrollablePage, e o posicionamento dos itens poderá ser complicado - principalmente em conjunto com uma ListView.

  • Para os componentes não-visuais, tê-los dentro do elemento ListView não irá afectar o visual da página. Por isso, podemos movê-los para dentro da ListView. O mesmo se aplica aos elementos associados ao centro da página, como as mensagens de substituição para os ListView vazios.
  • Para os outros itens, poderá fazer algum sentido movê-las para o cabeçalho ou rodapé do Kirigami.ScrollablePage. Este é normalmente o caso das barras de pesquisa.

PlaceholderMessage

É possível adicionar uma Kirigami.PlaceholderMessage com algumas instruções, no caso de a lista estar vazia.

Kirigami.ScrollablePage {
    ListView {
        id: listView
        Kirigami.PlaceholderMessage {
            anchors.centerIn: parent
            width: parent.width - (Kirigami.Units.largeSpacing * 4)
            visible: listView.count === 0
            text: i18n("No data found")
            helpfulAction: Kirigami.Action {
	        text: i18n("Load data")
                ...
            }
        }
        model: ...
    }
}

Pesquisar numa ListView

Um campo de pesquisa normalmente é adicionado a uma Kirigami.ScrollablePage para filtrar a ListView. Isto pode ser feito se modificar o titleDelegate predefinido para usar um Kirigami.SearchField em alternativa.

Kirigami.ScrollablePage {
    titleDelegate: Kirigami.SearchField {
        Layout.topMargin: Kirigami.Units.smallSpacing
        Layout.bottomMargin: Kirigami.Units.smallSpacing
        Layout.fillHeight: true
        Layout.fillWidth: true
        onTextChanged: mySortFilterModel.filterText = text
        KeyNavigation.tab: listView
    }

    ListView {
        id: listView
        ...
    }
}

Puxar para actualizar

Outra função oferecida por este componente é uma acção de "puxar para actualizar". Para usar isto, active-a da seguinte forma:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // NOTA: o MyModel não vem dos componentes, sendo apenas um exemplo de como poderá ser usado
        // em conjunto com alguma lógica de aplicação  que possa actualizar o modelo da lista e
        // assinale quando tudo terminar.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Ao puxar para baixo, também poderá activar um modo especial com uma margem superior maior, o que torna a utilização da aplicação apenas com uma mão mais simples.