تعتبر خاصية Pull to Refresh أو السحب للتحديث واحدة من أكثر عناصر تجربة المستخدم انتشارًا داخل التطبيقات الحديثة.

يمكن ملاحظتها تقريبًا في كل مكان:

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

فالعملية تعتمد على مزيج من:

في هذا المقال سنتعرف على كيفية عمل Pull Refresh داخليًا داخل Kotlin Compose مع مثال عملي مبني على PullToRefreshBox.

عند تنفيذ Pull Refresh داخل التطبيق، توجد عدة مكونات تعمل معًا لتحقيق التجربة الكاملة.

عادة يتكون النظام من:

دعونا نمر على كل مرحلة بالتفصيل.

أول خطوة تبدأ بمجرد أن يقوم المستخدم بالسحب للأسفل.

داخل Kotlin Compose توجد طبقة فوق العنصر القابل للتمرير مثل:

LazyColumn

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

أثناء السحب يتم حساب:

الهدف هنا هو معرفة هل المستخدم يريد تحديث البيانات أم يقوم بعملية Scroll عادية.

ليس كل سحب يؤدي إلى تحديث.

يوجد حد معين يسمى:

Threshold

إذا تجاوز المستخدم هذه المسافة يعتبر النظام أن هناك طلب تحديث فعلي.

غالبًا تكون هذه القيمة ما بين:

80px - 120px

أثناء السحب وقبل الوصول لهذه العتبة يتم عرض مؤشرات بصرية مثل:

وذلك لإعطاء المستخدم إحساسًا بأن التفاعل بدأ بالفعل.

بعد تجاوز العتبة وإفلات السحب، ينتقل النظام إلى وضع التحديث.

هنا يتم تغيير الحالة الداخلية إلى:

isRefreshing = true

في هذه اللحظة يظهر مؤشر التحميل أعلى القائمة ويبقى ظاهرًا حتى انتهاء العملية.

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

بعد تفعيل التحديث يبدأ الجزء الحقيقي من العملية.

يتم استدعاء Callback مثل:

onRefresh()

أو:

viewModel.getPosts()

هذه الدالة قد تقوم بـ:

داخل Kotlin غالبًا يتم تنفيذ ذلك باستخدام:

Coroutines

وذلك حتى لا تتجمد واجهة المستخدم أثناء التحميل.

بعد انتهاء جلب البيانات يتم تحديث الـ State الخاصة بالقائمة.

ثم تعاد الحالة إلى:

isRefreshing = false

وبالتالي يختفي مؤشر التحميل وتظهر البيانات الجديدة.

أما في حالة الفشل فيمكن عرض:

رغم أن Pull Refresh تبدو بسيطة، إلا أن بعض التحسينات تجعل التجربة أفضل بكثير.

يساعد ذلك على منع إرسال عدة طلبات عند السحب المتكرر بسرعة.

يمكن عرض البيانات المخزنة أولًا ثم تحديثها في الخلفية.

هذا يجعل الواجهة أسرع.

يفضل استخدام Animation عند إضافة عناصر جديدة لتجنب القفزات المفاجئة داخل القائمة.

يجب عدم الاعتماد على الإيماءة فقط.

يفضل إضافة زر تحديث بديل ليدعم أدوات قراءة الشاشة.

داخل Kotlin Compose يمكن تنفيذ Pull Refresh عبر:

val pullRefreshState =
rememberPullToRefreshState()

PullToRefreshBox(

   modifier =
      Modifier.fillMaxSize(),

   state = pullRefreshState,

   onRefresh = {

      viewModel.getPosts()

   },

   isRefreshing = false

) {

   LazyColumn(

      modifier =
         Modifier.fillMaxSize(),

      verticalArrangement =
         Arrangement.spacedBy(10.dp),

      horizontalAlignment =
         Alignment.CenterHorizontally

   ) {

      items(posts) { post ->

         CardPost(

            modifier = Modifier
               .fillMaxWidth()
               .wrapContentHeight()
               .padding(
                   vertical = 12.dp
               ),

            post = post,

            navController =
               navController

         )

      }

   }

}

هنا نجد فصلًا واضحًا بين:

وهذا يعتبر أحد أهم مبادئ Kotlin Compose الحديثة.

خاصية Pull to Refresh ليست مجرد Animation أو تأثير بصري.

بل هي نظام متكامل يعتمد على:

وفي Kotlin Compose يتم تنفيذ ذلك بسهولة عبر أدوات مثل:

rememberPullToRefreshState()

PullToRefreshBox()

مع الاعتماد على ViewModel وCoroutines لإدارة المنطق والبيانات.

ومع الالتزام بمبدأ فصل المسؤوليات وإدارة الحالات بشكل صحيح ستحصل على تجربة تحديث سلسة واحترافية داخل التطبيق.