Ukazovateľ priebehu

Kedykoľvek vaša aplikácia robí niečo, čo trvá znateľné množstvo času, budete chcieť použiť vizuálny prvok, ktorý používateľovi oznámi, že sa niečo deje na pozadí.

QtQuick Controls poskytuje dva užitočné komponenty, ktoré môžete na tento účel použiť.

Ukazovateľ priebehu

Controls.ProgressBar je komponent, ktorý vám umožňuje jednoducho zahrnúť ukazovatele priebehu do vašej aplikácie. Existujú štyri hlavné vlastnosti, ktoré budete musieť použiť:

• from: minimálna hodnota reprezentovaná začiatkom ukazovateľa priebehu
• to: maximálna hodnota reprezentovaná koncom ukazovateľa priebehu
• value: aktuálna hodnota prebiehajúcej akcie (napr. 50 % načítané)
• indeterminate: ak prebiehajúca akcia momentálne nemá jasnú hodnotu priebehu, môžete nastaviť túto vlastnosť na true, aby ste používateľovi ukázali, že sa niečo deje, ale jeho priebeh ešte nie je jasný (ale čoskoro bude).

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

Indikátor zaneprázdnenia

V prípadoch, keď sú časy načítania kratšie alebo meranie priebehu nie je uskutočniteľné, môžete namiesto toho použiť Controls.BusyIndicator. Tento komponent poskytuje jednoduché rotujúce koliesko, ktoré používateľom ukazuje, že sa niečo deje.

Ak chcete, aby sa indikátor prestal otáčať, môžete to urobiť nastavením vlastnosti running na false, v takom prípade sa .

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