نقل RecyclerView إلى القائمة الكسولة

RecyclerView هو أحد مكونات العرض التي تسهِّل عرض مجموعات كبيرة من البيانات بكفاءة. بدلاً من إنشاء طرق عرض لكل عنصر في مجموعة البيانات، يحسّن RecyclerView أداء تطبيقك من خلال الاحتفاظ بمجموعة صغيرة من مرات المشاهدة وإعادة التدوير أثناء التنقّل بين تلك العناصر.

وفي Compose، يمكنك استخدام القوائم البطيئة لتنفيذ الإجراء نفسه. توضّح هذه الصفحة كيف يمكنك نقل بيانات تنفيذ RecyclerView لاستخدام القوائم الكسولة في Compose.

خطوات نقل البيانات

لنقل بيانات تنفيذ RecyclerView إلى Compose، اتّبِع الخطوات التالية:

  1. أزِل السمة RecyclerView أو أزِلها من التسلسل الهرمي لواجهة المستخدم وأضِف العنصر ComposeView لاستبدالها في حال عدم توفّرها بعد في التسلسل الهرمي. هذه هي حاوية القائمة الكسولة التي ستضيفها:

          <FrameLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

  <!--    <androidx.recyclerview.widget.RecyclerView-->
  <!--            android:id="@+id/recycler_view"-->
  <!--            android:layout_width="match_parent"-->
  <!--            android:layout_height="match_parent />"-->

          <androidx.compose.ui.platform.ComposeView
              android:id="@+id/compose_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />

      </FrameLayout>

  2. حدِّد نوع القائمة الكسولة القابلة للإنشاء التي تحتاج إليها استنادًا إلى مدير تنسيق RecyclerView (اطّلِع على الجدول أدناه). سيكون العنصر القابل للإنشاء الذي تختاره هو العنصر القابل للإنشاء ذو المستوى الأعلى من ComposeView الذي أضفته في الخطوة السابقة.

    LayoutManager

    قابلة للإنشاء

    LinearLayoutManager

    ‫LazyColumn أو LazyRow

    GridLayoutManager

    ‫LazyVerticalGrid أو LazyHorizontalGrid

    StaggeredGridLayoutManager

    ‫LazyVerticalStaggeredGrid أو LazyHorizontalStaggeredGrid

    		 

    // recyclerView.layoutManager = LinearLayoutManager(context)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        // We use a LazyColumn since the layout manager of the RecyclerView is a vertical LinearLayoutManager
    }
}
    MigrationCommonScenariosSnippets.kt

  3. يمكنك إنشاء عنصر قابل للإنشاء مطابق لكل نوع عرض في تنفيذ RecyclerView.Adapter. يرتبط كل نوع طريقة عرض عادةً بالفئة الفرعية ViewHolder، ولكن قد لا يكون هذا هو الحال دائمًا. سيتم استخدام هذه العناصر القابلة للإنشاء كتمثيل لواجهة المستخدم لأنواع مختلفة من العناصر في قائمتك:

    @Composable
fun ListItem(data: MyData, modifier: Modifier = Modifier) {
    Row(modifier.fillMaxWidth()) {
        Text(text = data.name)
        // … other composables required for displaying `data`
    }
}
    MigrationCommonScenariosSnippets.kt

    سيتم استبدال المنطق في طريقتَي onCreateViewHolder() وonBindViewHolder() لـ RecyclerView.Adapter بهذه العناصر القابلة للإنشاء والحالة التي توفِّرها. في Compose، لا يوجد فصل بين إنشاء عنصر قابل للإنشاء لعنصر وربط البيانات فيه - هذه المفاهيم يتم دمجها.

  4. ضمن خانة content في القائمة الكسولة (مَعلمة lambda اللاحقة)، استخدِم الدالة items() (أو حملاً زائدًا مكافئًا) لتكرار البيانات الخاصة بقائمتك. في دالة itemContent lambda، يمكنك استدعاء العنصر القابل للإنشاء المناسب لبياناتك:

    val data = listOf<MyData>(/* ... */)
composeView.setContent {
    LazyColumn(Modifier.fillMaxSize()) {
        items(data) {
            ListItem(it)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

حالات الاستخدام الشائعة

زينة العناصر

RecyclerView لديه مفهوم ItemDecoration، والذي يمكنك استخدامه لإضافة رسم خاص للعناصر في القائمة. على سبيل المثال، يمكنك إضافة ItemDecoration لإضافة فواصل بين العناصر:

val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL)
recyclerView.addItemDecoration(itemDecoration)
MigrationCommonScenariosSnippets.kt

لم يتم توفير مفهوم مماثل في ComposeAllowed لتزيين العناصر. بدلاً من ذلك، يمكنك إضافة أي زخارف لواجهة المستخدم في القائمة مباشرةً في التركيبة. على سبيل المثال، لإضافة مُقسّمات إلى القائمة، يمكنك استخدام Divider القابل للإنشاء بعد كل عنصر:

LazyColumn(Modifier.fillMaxSize()) {
    itemsIndexed(data) { index, d ->
        ListItem(d)
        if (index != data.size - 1) {
            Divider()
        }
    }
}
MigrationCommonScenariosSnippets.kt

الصور المتحركة للعناصر

يمكن ضبط ItemAnimator على RecyclerView لتحريك مظهر العناصر عند إجراء تغييرات على المحوّل. يستخدم RecyclerView تلقائيًا DefaultItemAnimator الذي يوفّر صورًا متحركة أساسية عند إزالة الأحداث وإضافتها ونقلها.

تعتمد القوائم البطيئة على مفهوم مشابه من خلال مفتاح التعديل animateItemPlacement. راجِع الصور المتحركة للسلع لمعرفة المزيد.

مراجع إضافية

لمزيد من المعلومات عن نقل بيانات "RecyclerView" إلى Compose، يُرجى الاطّلاع على المراجع التالية: