Barres et indicateurs de progression

Fournissez à vos utilisateurs des informations sur l’état de chargement à l’aide de barres de progression.

Chaque fois que votre application effectue une action prenant un temps considérable, vous voudrez utiliser un élément visuel indiquant à l’utilisateur que quelque chose se passe en arrière-plan.

QtQuick Controls fournit deux composants utiles que vous pouvez utiliser à cette fin.

Barre de progression

Le composant « Controls.ProgressBar » vous permet d’inclure facilement des barres de progression dans votre application. Il y a quatre propriétés principales que vous devrez utiliser :

  • « from » : la valeur minimale représentée par le début de la barre de progression
  • « to » : la valeur maximale représentée par la fin de la barre de progression
  • « value » : la valeur actuelle de l’action qui est en cours (par exemple, 50% de chargement)
  • « indeterminate »: si l’action en cours ne possède pas de valeur de progression claire, vous pouvez mettre cette propriété à « True » pour indiquer à l’utilisateur que quelque chose se passe mais que sa progression n’est pas encore claire (mais le sera bientôt).
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

Kirigami.Page {

    Controls.ProgressBar {
        from: 0
        to: 100
        value: 50
        indeterminate: false
    }

}
En haut : barre de progression à 50% ; en bas : barre de progression indéterminée

En haut : barre de progression à 50% ; en bas : barre de progression indéterminée

Indicateur d’occupation

Si les temps de chargement sont plus courts ou s’il n’est pas possible de mesurer la progression, vous pouvez utiliser la propriété « Controls.BusyIndicator ». Ce composant fournit une roue tournante simple montrant aux utilisateurs que quelque chose est en cours d’exécution.

Controls.BusyIndicator {}

Si vous voulez que l’indicateur s’arrête de fonctionner, vous pouvez le faire en positionnant la propriété « running » à « False ».

Controls.BusyIndicator {
    running: false
}