Barras de avance e indicadores
Siempre que su aplicación haga algo que requiera una cantidad considerable de tiempo, querrá usar un elemento visual que le diga al usuario que algo está sucediendo en segundo plano.
Los controles de QtQuick proporcionan dos componentes útiles que puede usar para este fin.
Barra de avance
Controls.ProgressBar es un componente que le permite incluir barras de avance con facilidad en una aplicación. Existen cuatro propiedades principales que tendrá que usar:
- from: el valor mínimo representado por el inicio de la barra de avance
- to: el valor máximo representado por el final de la barra de avance
- value: el valor actual de la acción que está en proceso (por ejemplo, 50% cargado)
- indeterminate: si la acción que está en proceso en la actualidad no tiene un valor de avance claro, puede definir esta propiedad a
true
para indicar al usuario que está ocurriendo algo, pero que su avance todavía no está claro (aunque lo estará en breve).
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "Progressbar App"
width: 400
height: 400
pageStack.initialPage: Kirigami.Page {
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
Controls.ProgressBar {
Layout.fillWidth: true
from: 0
to: 100
value: 50
indeterminate: false
}
Controls.ProgressBar {
Layout.fillWidth: true
from: 0
to: 100
// value: 50
indeterminate: true
}
}
}
}
Indicador de ocupado
In cases where loading times are shorter or measuring progress is not feasible, you can instead use Controls.BusyIndicator. This component provides a simple spinning wheel that shows users that something is happening.
If you want the indicator to stop running, you can do so by setting the running property to false, in which case the .
import QtQuick
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
title: "Progressbar App"
width: 400
height: 400
pageStack.initialPage: Kirigami.Page {
actions: [
Kirigami.Action {
text: "Toggle busy indicator"
onTriggered: indicator.running ? indicator.running = false : indicator.running = true
}
]
Controls.BusyIndicator {
id: indicator
anchors.centerIn: parent
}
}
}