RecyclerView
هو أحد مكونات العرض التي تسهِّل عرض مجموعات كبيرة من البيانات بكفاءة. بدلاً من إنشاء طرق عرض لكل عنصر في مجموعة البيانات،
يحسّن RecyclerView
أداء تطبيقك من خلال الاحتفاظ بمجموعة صغيرة من
مرات المشاهدة وإعادة التدوير أثناء التنقّل بين تلك العناصر.
وفي Compose، يمكنك استخدام القوائم البطيئة لتنفيذ الإجراء نفسه. توضّح هذه الصفحة كيف يمكنك نقل بيانات تنفيذ RecyclerView
لاستخدام القوائم الكسولة في Compose.
خطوات نقل البيانات
لنقل بيانات تنفيذ RecyclerView
إلى Compose، اتّبِع الخطوات التالية:
أزِل السمة
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>
حدِّد نوع القائمة الكسولة القابلة للإنشاء التي تحتاج إليها استنادًا إلى مدير تنسيق
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 } }
يمكنك إنشاء عنصر قابل للإنشاء مطابق لكل نوع عرض في تنفيذ
RecyclerView.Adapter
. يرتبط كل نوع طريقة عرض عادةً بالفئة الفرعيةViewHolder
، ولكن قد لا يكون هذا هو الحال دائمًا. سيتم استخدام هذه العناصر القابلة للإنشاء كتمثيل لواجهة المستخدم لأنواع مختلفة من العناصر في قائمتك:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
سيتم استبدال المنطق في طريقتَي
onCreateViewHolder()
وonBindViewHolder()
لـRecyclerView.Adapter
بهذه العناصر القابلة للإنشاء والحالة التي توفِّرها. في Compose، لا يوجد فصل بين إنشاء عنصر قابل للإنشاء لعنصر وربط البيانات فيه - هذه المفاهيم يتم دمجها.ضمن خانة
content
في القائمة الكسولة (مَعلمة lambda اللاحقة)، استخدِم الدالةitems()
(أو حملاً زائدًا مكافئًا) لتكرار البيانات الخاصة بقائمتك. في دالةitemContent
lambda، يمكنك استدعاء العنصر القابل للإنشاء المناسب لبياناتك:val data = listOf<MyData>(/* ... */) composeView.setContent { LazyColumn(Modifier.fillMaxSize()) { items(data) { ListItem(it) } } }
حالات الاستخدام الشائعة
زينة العناصر
RecyclerView
لديه مفهوم ItemDecoration
، والذي يمكنك استخدامه لإضافة رسم خاص للعناصر في القائمة. على سبيل المثال، يمكنك إضافة ItemDecoration
لإضافة فواصل بين العناصر:
val itemDecoration = DividerItemDecoration(recyclerView.context, LinearLayoutManager.VERTICAL) recyclerView.addItemDecoration(itemDecoration)
لم يتم توفير مفهوم مماثل في ComposeAllowed لتزيين العناصر. بدلاً من ذلك، يمكنك إضافة أي زخارف لواجهة
المستخدم في القائمة مباشرةً في التركيبة. على سبيل المثال، لإضافة مُقسّمات إلى القائمة، يمكنك استخدام Divider
القابل للإنشاء بعد كل عنصر:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
الصور المتحركة للعناصر
يمكن ضبط ItemAnimator
على RecyclerView
لتحريك مظهر العناصر عند إجراء تغييرات على المحوّل. يستخدم RecyclerView
تلقائيًا DefaultItemAnimator
الذي يوفّر صورًا متحركة أساسية عند إزالة الأحداث وإضافتها
ونقلها.
تعتمد القوائم البطيئة على مفهوم مشابه من خلال مفتاح التعديل animateItemPlacement
.
راجِع الصور المتحركة للسلع لمعرفة المزيد.
مراجع إضافية
لمزيد من المعلومات عن نقل بيانات "RecyclerView
" إلى Compose، يُرجى الاطّلاع على المراجع التالية:
- القوائم والشبكات: مستندات حول كيفية تنفيذ القوائم والشبكات في ميزة Compose
- Jetpack Compose Interop: استخدام Compose في RecyclerView:
مشاركة مدونة لاستخدام ميزة ComposeAllowed بفعالية داخل
RecyclerView
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عند إيقاف JavaScript.
- القوائم والشبكات
- نقل بيانات
CoordinatorLayout
إلى Compose - اعتبارات أخرى