Pages et vues en listes déroulantes

Les pages avec défilement sont utiles lorsqu'elles sont combinées avec des composants verticaux ou des composants dynamiques telles que des affichages en liste.

« Kirigami.ScrollablePage »

Une page « Kirigami.ScrollablePage » est une page contenant du contenu avec un défilement, tel que des « ListView ». Le défilement et les indicateurs de défilement sont gérés automatiquement.

Kirigami.ScrollablePage {
    id: root
    // Le rectangle sera automatiquement défini avec une barre de défilement.
    Rectangle {
        width: root.width
        height: 99999
    }
}

Dans presque tous les autres cas, une page avec défilement est identique à une page normale.

ListView dans une page avec barres de défilement

Lorsque les fils directs d'une page « Kirigami.ScrollablePage » s'étendent verticalement au delà de la taille de la page elle-même, une barre de défilement apparaît sur le bord droit de la page et la page pourra se parcourir grâce à elle.

Copie d'écran d'une page avec barres de défilement de Neochat

Deux pages avec défilement, contenant toutes les deux un affichage en liste, avec un contenu personnalisé (Capture d'écran de NeoChat).

Vous avez souvent plus d'un fils dans votre « Kirigami.ScrollablePage » et le positionnement des éléments peut être délicat - surtout en combinaison avec une « ListView ».

  • Pour les composants non visuels, le fait de les avoir dans l'élément « Listview » ne changera pas le rendu visuel de la page. Ainsi, nous pouvons les déplacer dans ce dernier. Cela s'applique aussi aux éléments ancrés au centre de la page, tel que les messages de remplacement pour les objets « Listview » vides.
  • Pour d'autres éléments, il peut être judicieux de les déplacer vers l'en-tête ou le pied de page de « Kirigami.ScrollablePage ». C'est souvent le cas pour les barres de recherche.

PlaceholderMessage

Il est possible d'ajouter un message « Kirigami.PlaceholderMessage » avec quelques instructions au cas où l'affichage en liste est vide.

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

Rechercher dans ListView

Un champ de recherche est souvent ajouté à un objet « Kirigami.ScrollablePage » pour filtrer l'objet « ListView ». Ceci peut être réaliser en modifiant l'objet « titleDelegate » par défaut pour utiliser un objet « Kirigami.SearchField » à la place.

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

Tirer pour rafraîchir

Une autre fonction fournie par ce composant est une action « tirer pour rafraîchir ». Pour l'utiliser, il faut l'activer comme ceci :

Kirigami.ScrollablePage {
    id: view
    supportsRefreshing: true
    onRefreshingChanged: {
        if (refreshing) {
            myModel.refresh();
        }
    }
    ListView {
        // Remarque : « MyModel » ne provient pas des composants. C'est purement un exemple
        // concernant la façon dont il peut être utilisé avec une logique d'application pouvant
        // mettre à jour le modèle de liste et l'indique une fois réalisé.
        model: MyModel {
            onRefreshDone: view.refreshing = false;
        }
        delegate: BasicListItem {}
    }
}

En tirant vers le bas, vous pouvez également activer un mode spécial avec une marge supérieure plus grande, facilitant l'utilisation de l'application à une seule main.