Skip to main content
Ir para o conteúdo

Barras de progresso e indicadores

Forneça aos seus usuários informações sobre o estado de carregamento usando barras de progresso.

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 true para 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

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