RecyclerView یک مؤلفه View است که نمایش کارآمد مجموعههای بزرگ داده را آسان میکند. بهجای ایجاد نما برای هر مورد در مجموعه داده،
RecyclerView عملکرد برنامهتان را با نگه داشتن مجموعه کوچکی از
نماها و بازیافت آنها هنگام پیمایش در آن موارد بهبود میبخشد.
در Compose، میتوانید از فهرستهای Lazy برای انجام همین کار استفاده کنید. این صفحه
شرح میدهد که چگونه میتوانید پیادهسازی RecyclerView خود را برای استفاده از فهرستهای Lazy
در Compose انتقال دهید.
مراحل انتقال
برای انتقال پیادهسازی RecyclerView به Compose، این مراحل را دنبال کنید:
RecyclerViewرا از سلسلهمراتب میانای کاربریتان حذف کنید یا آن را بهصورت نظر درآورید وComposeViewرا برای جایگزینی آن اضافه کنید، اگر هنوز هیچکدام در سلسلهمراتب وجود ندارد. این محفظه Lazy list است که اضافه خواهید کرد:<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، تعیین کنید به چه نوع Lazy list composable نیاز دارید (جدول زیر را ببینید). ترکیبپذیری که انتخاب میکنید ترکیبپذیر سطح بالایComposeViewخواهد بود که در مرحله قبلی اضافه کردید.LayoutManagerتابع ترکیبپذیر
LinearLayoutManagerLazyColumnیاLazyRowGridLayoutManagerLazyVerticalGridیاLazyHorizontalGridStaggeredGridLayoutManagerLazyVerticalStaggeredGridیا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، هیچ جدایی بین ایجاد یک composable برای یک مورد و اتصال داده به آن وجود ندارد—این مفاهیم با هم ادغام شدهاند.در جایگاه
contentاز فهرست Lazy (پارامتر لامبدا انتهایی)، از تابعitems()(یا یک سربارگذاری معادل) برای تکرار در دادههای فهرست خود استفاده کنید. در لامبداitemContent، مورد ترکیبپذیر مناسب را برای دادههایتان فراخوانی کنید: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)
Compose مفهوم معادلی برای تزئینات مورد ندارد. درعوض، میتوانید هرگونه تزئینات میانای کاربری را در فهرست مستقیماً در ترکیببندی اضافه کنید. برای مثال،
برای افزودن تقسیمکننده به فهرست، میتوانید از Divider ترکیبپذیر بعداز هر
مورد استفاده کنید:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { HorizontalDivider() } } }
پویانماییهای مورد
میتوان ItemAnimator را روی RecyclerView تنظیم کرد تا ظاهر موارد را هنگام اعمال تغییرات در آداپتور پویانمایی کند. بهطور پیشفرض، RecyclerView از
DefaultItemAnimator استفاده میکند که پویانماییهای پایه را در رویدادهای برداشتن، افزودن، و
انتقال ارائه میدهد.
فهرستهای تنبل ازطریق اصلاحگر animateItemPlacement مفهوم مشابهی دارند.
برای کسب اطلاعات بیشتر، به پویانماییهای مورد مراجعه کنید.
منابع بیشتر
برای اطلاعات بیشتر درباره انتقال RecyclerView به Compose، منابع زیر را ببینید:
- فهرستها و شبکهها: اسناد مربوط به نحوه پیادهسازی فهرستها و شبکهها در Compose.
- Jetpack Compose Interop: Using Compose in a RecyclerView:
پست وبلاگ برای استفاده کارآمد از Compose در
RecyclerView.
توصیهشده برای شما
- توجه: وقتی جاوا اسکریپت خاموش باشد، نوشتار پیوند نمایش داده میشود
- فهرستها و شبکهها
- انتقال
CoordinatorLayoutبه Compose - ملاحظات دیگر