Páginas roláveis ​​e visualizações de lista

Kirigami.ScrollablePage

Uma Kirigami.ScrollablePage é uma página que contém conteúdo rolável, como uma ListView. A rolagem, assim como os indicadores de rolagem, são gerenciados automaticamente.

Kirigami.ScrollablePage {
    id: root
    //O retângulo será automaticamente rolável
    Rectangle {
        width: root.width
        height: 99999
    }
}

Em quase todos os outros aspectos, uma página rolável é igual a uma página normal.

ListView em uma ScrollablePage

Quando os filhos diretos de uma Kirigami.ScrollablePage se estendem verticalmente além do tamanho da própria página, uma barra de rolagem aparece na borda direita da página e ela se torna rolável.

Frequentemente, você tem mais de um filho em sua Kirigami.ScrollablePage, e posicionar itens pode ser complicado — especialmente em combinação com uma ListView.

• Para componentes não visuais, tê-los dentro do componente ListView não alterará os visuais da página, portanto, podemos movê-los para dentro do escopo da visualização de lista. O mesmo vale para elementos ancorados no centro da página, como mensagens de espaço reservado para visualizações de lista vazias.
• Para outros itens, pode fazer sentido movê-los para o cabeçalho ou rodapé da [Kirigami.Scrollable Page](docs:kirigami;org.kde.kirigami.Scrollable Page). Este é frequentemente o caso das barras de pesquisa.

PlaceholderMessage

É possível adicionar uma Kirigami.PlaceholderMessage com algumas instruções caso a visualização da lista esteja 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")
                // Mais código...
            }
        }
        model: // Código modelo...
    }
}

Pesquisar em uma ListView

Um campo de busca é frequentemente adicionado a uma Kirigami.ScrollablePage para filtrar a ListView. Isso pode ser feito alterando o titleDelegate padrão para usar um Kirigami.SearchField.

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
        // Resto do código da listview...
    }
}

Puxe para atualizar

Outra função oferecida por este componente é a ação "puxar para atualizar". Para usá-la, ative-a da seguinte forma:

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // OBSERVAÇÃO: MyModel não vem dos componentes, é apenas um exemplo de como ele pode ser
        // usado em conjunto com alguma lógica de aplicativo que pode atualizar o modelo de lista e
        // sinalizar quando estiver pronto.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

Ao puxar para baixo, você também pode ativar um modo especial com uma margem superior maior, o que facilita o uso do aplicativo com uma só mão.