أشرطة التقدم والمؤشرات

كلما فعل تطبيقك شيئًا يستغرق وقتًا ملحوظًا، سترغب في استخدام عنصر مرئي يخبر المستخدم أن شيئًا ما يحدث في الخلفية.

توفر عناصر تحكم QtQuick مكونين مفيدين يمكنك استخدامهما لهذه الغاية.

شريط التقدم

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
                // القيمة: 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
        }
    }
}