RecyclerView را به لیست Lazy منتقل کنید

RecyclerView یک کامپوننت View است که نمایش کارآمد مجموعه های بزرگ داده را آسان می کند. 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 خود، نوع فهرست Lazy قابل تنظیم را تعیین کنید (جدول زیر را ببینید). Composable که انتخاب می‌کنید، 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 خود، یک composable مربوطه برای هر نوع نمای ایجاد کنید. هر نوع نمای معمولاً به یک زیر کلاس 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 شما با این composable ها و حالتی که برای آنها ارائه می کنید جایگزین می شود. در Compose، هیچ جدایی بین ایجاد یک composable برای یک آیتم و اتصال داده به آن وجود ندارد - این مفاهیم با هم ترکیب می شوند.

  4. در شکاف content لیست تنبل (پارامتر لامبدا انتهایی)، از تابع 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

Compose مفهومی معادل از تزئینات آیتم ندارد. درعوض، می‌توانید هر گونه تزئینات رابط کاربری را در لیست مستقیماً در ترکیب اضافه کنید. به عنوان مثال، برای افزودن تقسیم کننده ها به لیست، می توانید بعد از هر آیتم از Divider composable استفاده کنید: 

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

انیمیشن های آیتم ها

یک ItemAnimator می توان روی RecyclerView تنظیم کرد تا ظاهر آیتم ها را با ایجاد تغییرات در آداپتور متحرک کند. به‌طور پیش‌فرض، RecyclerView از DefaultItemAnimator استفاده می‌کند که انیمیشن‌های اولیه را برای حذف، افزودن و جابجایی رویدادها ارائه می‌کند.

لیست های تنبل از طریق اصلاح کننده animateItemPlacement مفهوم مشابهی دارند. برای کسب اطلاعات بیشتر به انیمیشن های آیتم ها مراجعه کنید.

منابع اضافی

برای اطلاعات بیشتر در مورد انتقال RecyclerView به Compose، به منابع زیر مراجعه کنید:

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}