Scrollable pages and list views

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 ListView. . 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.

Aviso

Não coloque uma ScrollView dentro de uma Kirigami.ScrollablePage; os filhos de uma Kirigami.ScrollablePage já estão dentro de uma ScrollView.

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.

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 as listas vazias.
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")
                // More code...
            }
        }
        model: // Model code...
    }
}

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
        // Rest of listview code...
    }
}

Sugestão

Poderá usar o KSortFilterProxyModel do KItemModel para adicionar facilmente a capacidade de filtragem directamente no QML, sem ser necessário qualquer código em C++.

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.

Linhas da página e pilhas de páginas

Cartões