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

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

في ميزة "الإنشاء"، يمكنك استخدام القوائم غير الكاملة لتحقيق النتيجة نفسها. هذه الصفحة كيفية نقل بيانات تنفيذ 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() لـ RecyclerView.Adapter سيتم استبدال الطرق onBindViewHolder() بهذه العناصر القابلة للإنشاء تذكر أنك تزودهم بها. في 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

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

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

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

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

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

مصادر إضافية

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