RecyclerView
是 View 元件,可讓您輕鬆有效率地顯示大量資料。RecyclerView
不會為資料集中的每個項目建立檢視畫面,而是保留少量的檢視畫面,並在您捲動瀏覽這些項目時回收這些檢視畫面,藉此改善應用程式效能。
在 Compose 中,您可以使用 Lazy 清單完成相同動作。本頁說明如何遷移 RecyclerView
實作,以便在 Compose 中使用 Lazy 清單。
遷移步驟
如要將 RecyclerView
實作遷移至 Compose,請按照下列步驟操作:
如果階層中沒有
RecyclerView
,請將RecyclerView
從 UI 階層中移除或移除,並加入ComposeView
來取代。此為您要新增的 Lazy 清單容器:<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 清單可組合項 (請參閱下表)。您選取的可組合項將是您在上一個步驟中新增的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
子類別,但並非一律如此。這些可組合項將用來做為清單中不同元素類型的 UI 表示法:@Composable fun ListItem(data: MyData, modifier: Modifier = Modifier) { Row(modifier.fillMaxWidth()) { Text(text = data.name) // … other composables required for displaying `data` } }
RecyclerView.Adapter
的onCreateViewHolder()
和onBindViewHolder()
方法中的邏輯,會由這些可組合項和提供的狀態取代。在 Compose 中,為項目建立可組合項並將資料繫結至它之間並沒有分離的差別,這些概念會相互累計。在 Lazy 清單的
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)
Compose 沒有關於項目裝飾的對等概念。您可以改為直接在組合中將任何 UI 裝飾加入清單中。舉例來說,如要在清單中加入分隔線,您可以在每個項目後方使用 Divider
可組合項:
LazyColumn(Modifier.fillMaxSize()) { itemsIndexed(data) { index, d -> ListItem(d) if (index != data.size - 1) { Divider() } } }
項目動畫
您可以在 RecyclerView
上設定 ItemAnimator
,以便在變更轉接程式時,為項目外觀建立動畫效果。根據預設,RecyclerView
會使用 DefaultItemAnimator
,針對移除、新增及移動事件提供基本動畫。
Lazy 清單透過 animateItemPlacement
修飾符具有相同的概念。詳情請參閱「項目動畫」。
其他資源
如要進一步瞭解如何將 RecyclerView
遷移至 Compose,請參閱下列資源:
- 清單和格線:說明如何在 Compose 中實作清單和格線的說明文件。
- Jetpack Compose 互通性:在 RecyclerView 中使用 Compose:在
RecyclerView
中有效率地使用 Compose 的網誌文章。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 清單和格線
- 將
CoordinatorLayout
遷移至 Compose - 其他考量