مؤشر التقدم

المكوِّن CircularProgressIndicator هو عرض دائري لطول العملية أو وقت انتظار غير محدد بطريقة أخرى.

استخدِم مؤشرات التقدم لإظهار نسبة المهمة المكتملة. لإظهار التقدم، يتم تحريك المؤشر على طول مسار دائري في اتجاه عقارب الساعة.

يمكنك تطبيق مؤشرات التقدم على مكوّنات، مثل زر التشغيل.

علم التشريح

أ. المقطع الصوتي
ب: تتبُّع مستوى التقدّم

اقتراحات التصميم

مؤشر التقدم مع وجود فجوة

أنشئ مؤشرات التقدم مع وجود فجوة لتوفير مساحة للمعلومات المهمة، مثل الوقت. لإنشاء فجوة، يمكنك تغيير startAngle وendAngle لمؤشر التقدم.

أنشئ مؤشر تقدم به فجوة، كما هو موضح في المثال التالي:

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 290f,
    endAngle = 250f,
    strokeWidth = 4.dp
)

مؤشر مستوى التقدّم صغير

يمكنك تطبيق مؤشر التقدم الصغير مباشرةً على زر عندما يرتبط التقدم المُشار إليه مباشرةً بالإجراء الذي يمثّله الزر وعندما تكون مساحة الشاشة محدودة.

يمكنك إنشاء مؤشر تقدم صغير، كما هو موضح في المثال التالي:

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

مؤشر مستوى تقدُّم غير محدّد

عند استخدام مؤشر التقدّم في الحالات التي لا يتوفّر فيها وقت محدّد، استخدِم مؤشر تقدّم يتضمّن قيمة متحركة. ويمكن أن يسمى ذلك أيضًا مؤشر دوار. استخدِم الأشرطة الدوّارة باعتدال لأنّها قد تؤدي إلى زيادة وقت الانتظار المُستغرق.

يمكنك إنشاء مؤشر تقدم غير محدد، كما هو موضح في المثال التالي:

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

الاستخدام

راجع الأمثلة التالية لمؤشرات التقدم.