Индикаторы выполнения и занятости

Когда приложение выполняет действие, занимающее заметное время, следует использовать визуальный элемент, сообщающий пользователю о том, что в фоне что-то происходит.

QtQuick Controls предоставляет два полезных компонента, которые можно использовать для этого.

Индикатор выполнения

Controls.ProgressBar — компонент, позволяющий легко включить в приложение индикаторы выполнения. Потребуется использовать четыре основных свойства:

• from: минимальное значение, соответствующее началу индикатора выполнения
• to: максимальное значение, соответствующее концу индикатора выполнения
• value: текущее значение выполняемого действия (например, загружено 50%)
• indeterminate: если у выполняющегося в данный момент действия нет чёткого значения хода выполнения, этому свойству можно присвоить значение true, чтобы показать пользователю, что что-то происходит, но ход выполнения пока неясен (впрочем, скоро прояснится).

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

Индикатор занятости

Если время загрузки невелико или измерить прогресс невозможно, можно вместо этого использовать Controls.BusyIndicator. Этот компонент предоставляет простой вращающийся индикатор, показывающий пользователю, что что-то происходит.

Чтобы остановить индикатор, задайте свойству running значение false, в этом случае .

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