كيفية ايقاف عمل CircularProgressIndicator في flutter

مرحبا،

إن طريقة إنهاء عمل ProgressIndicator (متابع التقدم) هو عبارة عن إزالته من العرض بشكل كامل.

يتم ذلك من خلال تحديث الحالة الذي يقوم بإعادة رسم عناصر الواجهة (وسيمون التحديث مع عدم تضمين هذا العنصر)

فسيتم إخفائه.

الحل:

نعرف متحول خاص بعرض ProgressIndicator (متابع التقدم) مثلا:

متحول يدل على التحميل:

bool isLoading = false;

وتابعين للتحكم به والربط مع العرض:

العرض و الإخفاء تتم بتعديل الحالة..

void show() {
    setState(() => isLoading = true);
}

تغيير الحالة


void dismiss() {
    setState(() => isLoading = false);
}

وعند رسم العناصر ضمن سياق الشيفرة البرمجية الطبيعية نفحص قيمة المتحول وعندها إما نرسم ProgressIndicator أو لا.

child: isLoading? Center(
                  child: CircularProgressIndicator(),
                  ),
                : null // عنصر فارغ

عند أي تغيير في الحالة state سيتم إعادة رسم الواجهة وفحص المتحول isLoading وعليه سيتقرر رسم متابع التقدم أو لا.

بالتوفيق

بتاريخ 21 دقائق مضت قال Wael Aljamal:

مرحبا،

إن طريقة إنهاء عمل ProgressIndicator (متابع التقدم) هو عبارة عن إزالته من العرض بشكل كامل.

يتم ذلك من خلال تحديث الحالة الذي يقوم بإعادة رسم عناصر الواجهة (وسيمون التحديث مع عدم تضمين هذا العنصر)

فسيتم إخفائه.

الحل:

نعرف متحول خاص بعرض ProgressIndicator (متابع التقدم) مثلا:

متحول يدل على التحميل:

bool isLoading = false;

وتابعين للتحكم به والربط مع العرض:

العرض و الإخفاء تتم بتعديل الحالة..

void show() {
    setState(() => isLoading = true);
}

تغيير الحالة


void dismiss() {
    setState(() => isLoading = false);
}

وعند رسم العناصر ضمن سياق الشيفرة البرمجية الطبيعية نفحص قيمة المتحول وعندها إما نرسم ProgressIndicator أو لا.

child: isLoading? Center(
                  child: CircularProgressIndicator(),
                  ),
                : null // عنصر فارغ

عند أي تغيير في الحالة state سيتم إعادة رسم الواجهة وفحص المتحول isLoading وعليه سيتقرر رسم متابع التقدم أو لا.

بالتوفيق

 مرحبا اخي 

شاكر لك الغالي ردك وتوضيحك لسبب المشكله 

فقط لدي استفسار لو تكرمت هل جميع البروسجر الذي كذا تحتاج حتى نعمل لها ايقاف مثل ما ذكرت انت؟

مثل هذا :

showAlertDialog(BuildContext context){
    AlertDialog alert=AlertDialog(
      content: new Row(
        children: [
          CircularProgressIndicator(),
          Container(margin: EdgeInsets.only(left: 5),child:Text("Loading" )),
        ],),
    );
    showDialog(barrierDismissible: false,
      context:context,
      builder:(BuildContext context){
        return alert;
      },
    );
  }

انا وجدت شرح يقول ان طريقة جعله يعمل بسطر التالي :

   showAlertDialog(context);

وايقافه بسطر التالي:

Navigator.pop(context);

بنسبة الى السطر الاول بعد التطبيق هو فعلا اصبح يعمل 

ولكن لم استطيع ايقافه من خلال السطر الثاني لا اعلم لماذا 

تبدو هذا الطريقة ابسط لو كانت تعمل بشكل مثالي

بتاريخ 4 دقائق مضت قال Marwan800:

هل جميع البروسجر الذي كذا تحتاج حتى نعمل لها ايقاف مثل ما ذكرت انت؟

يفترض وجود دالة أو قيمة توقف عملهم، لكنه غير موجود.

فالحل هو رسم أو حذف العنصر بشكل كامل (وحذف العنصر أفضل لتقليل مكونات العرض على الشاشة) (screen)

و شجرة الواجهات widget tree, flutter.

بتاريخ 6 دقائق مضت قال Marwan800:

تبدو هذا الطريقة ابسط لو كانت تعمل بشكل مثالي

الطريقة الأولى بسيطة أيضا

متحول بولياني مسؤول عن العرض و نغير قيمته بالاعتماد على تغيير الحالة state.

بشكل عام وكتفكير مبرمج، استخدم الطريقة التي تعمل طالما أنها تعمل (لا داعِ لتغييرها)

وهذا المنطق الذي قمت بشرحه بسيط وفعال ويمكنك تطبيقه لأي عنصر آخر.

أما الطريقة :

Navigator.pop(context);

فأظن أنها تقوم بإضافة طبقة أعلى الشاشة (نظام المكدس) ثم يتم التخلص منها.

الطريقة الأولى تعطي تحكم أفضل.

اختر ما يناسبك

بالتوفيق

بتاريخ 1 دقيقة مضت قال Wael Aljamal:

يفترض وجود دالة أو قيمة توقف عملهم، لكنه غير موجود.

فالحل هو رسم أو حذف العنصر بشكل كامل (وحذف العنصر أفضل لتقليل مكونات العرض على الشاشة) (screen)

و شجرة الواجهات widget tree, flutter.

الطريقة الأولى بسيطة أيضا

متحول بولياني مسؤول عن العرض و نغير قيمته بالاعتماد على تغيير الحالة state.

بشكل عام وكتفكير مبرمج، استخدم الطريقة التي تعمل طالما أنها تعمل (لا داعِ لتغييرها)

وهذا المنطق الذي قمت بشرحه بسيط وفعال ويمكنك تطبيقه لأي عنصر آخر.

أما الطريقة :

Navigator.pop(context);

فأظن أنها تقوم بإضافة طبقة أعلى الشاشة (نظام المكدس) ثم يتم التخلص منها.

الطريقة الأولى تعطي تحكم أفضل.

اختر ما يناسبك

بالتوفيق

كل الشكر لك عزيزي

بتاريخ 37 دقائق مضت قال Wael Aljamal:

يفترض وجود دالة أو قيمة توقف عملهم، لكنه غير موجود.

فالحل هو رسم أو حذف العنصر بشكل كامل (وحذف العنصر أفضل لتقليل مكونات العرض على الشاشة) (screen)

و شجرة الواجهات widget tree, flutter.

الطريقة الأولى بسيطة أيضا

متحول بولياني مسؤول عن العرض و نغير قيمته بالاعتماد على تغيير الحالة state.

بشكل عام وكتفكير مبرمج، استخدم الطريقة التي تعمل طالما أنها تعمل (لا داعِ لتغييرها)

وهذا المنطق الذي قمت بشرحه بسيط وفعال ويمكنك تطبيقه لأي عنصر آخر.

أما الطريقة :

Navigator.pop(context);

فأظن أنها تقوم بإضافة طبقة أعلى الشاشة (نظام المكدس) ثم يتم التخلص منها.

الطريقة الأولى تعطي تحكم أفضل.

اختر ما يناسبك

بالتوفيق

اعذرني على الاطاله اخي ولكن الطريقة الذي شرحتها لي تعمل قمت بتطبيقها ولكن توجد مشكله بسيطه في اول مره افتح التطبيق يحدث الاخفتاء ببعد الانتقال من صفحة الى الصفحة التالية ولكن في المره الثانية لو قمتب تسجيل الخروج ودخول لا يحدث الاختفاء الا في حالة اغلاق التطبيق كامل ودخول من جديد وسيعمل ايضا اول مره وبعدها تحدث المشكله من جديد هل يوجد حل لذلك؟

بتاريخ 1 دقيقة مضت قال Marwan800:

اعذرني على الاطاله اخي ولكن الطريقة الذي شرحتها لي تعمل قمت بتطبيقها ولكن توجد مشكله بسيطه في اول مره افتح التطبيق يحدث الاخفتاء ببعد الانتقال من صفحة الى الصفحة التالية ولكن في المره الثانية لو قمتب تسجيل الخروج ودخول لا يحدث الاختفاء الا في حالة اغلاق التطبيق كامل ودخول من جديد وسيعمل ايضا اول مره وبعدها تحدث المشكله من جديد هل يوجد حل لذلك؟

حسنا،

الحل هو بتعديل قيمة المتحول isLoading في الأماكن المناسبة من البرنامج لديك.

أي استدعاء الدوال التالية:

void show() {
    setState(() => isLoading = true);
}

تغيير الحالة


void dismiss() {
    setState(() => isLoading = false);
}

لضمان تثبيت القيمة الصحيحة للمتحول isLoading.

استدعاء show في جميع الأماكن التي نريد إظهار ProgressIndicator 

و استدعاء dismiss للإخفاء.

كما نقوم بربط الاستدعاء مع التنقل بين الواجهات (الشاشات screen)

أحيان لا يقوم التطبيق بإعادة رسم الواجهة عند العودة لها وهكذا.

بتاريخ 13 دقائق مضت قال Marwan800:

هل يوجد حل لذلك؟

مثال بسيط:

نقوم باستدعاء الدوال في بدابة و نهاية كل دالة تقوم بالاتصال بالشبكة أو القيام بمهمة تأخذ بضع ثواني أو أكثر

بهذا الشكل:

function AnyFunction () {

	shwow()

	// Do your work

	dismiss()
}

هكذا نضمن ظهور / إخفاء العنصر حسب الطلب.