Barras de progresso e indicadores
Sempre que seu aplicativo fizer algo que leve uma quantidade considerável de tempo, você vai querer usar um elemento visual que informe ao usuário que algo está acontecendo em segundo plano.
O QtQuick Controls fornece dois componentes úteis que você pode usar para essa finalidade.
Barra de progresso
Controls.ProgressBar é um componente que permite incluir facilmente barras de progresso em seu aplicativo. Há quatro propriedades principais que você precisará usar:
- from: o valor mínimo representado pelo início da barra de progresso
- to: o valor máximo representado pelo final da barra de progresso
- value: o valor atual da ação em andamento (por exemplo, 50% carregado)
- indeterminate: se a ação em andamento não tiver um valor de progresso claro, você pode definir esta propriedade como
truepara mostrar ao usuário que algo está acontecendo, mas seu progresso ainda não está claro (mas estará em 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
}
}
}
}
Acima: barra de progresso em 50%; abaixo: barra de progresso indeterminada
Indicador de ocupado
Nos casos em que os tempos de carregamento são mais curtos ou a medição do progresso não é viável, você pode usar Controls.BusyIndicator. Este componente fornece uma roda giratória simples que mostra aos usuários que algo está acontecendo.
Se quiser que o indicador pare de funcionar, você pode fazer isso definindo a propriedade running como falsa.
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
}
}
}