RecyclerView
是 View 元件,可讓您輕鬆顯示大型資料集。RecyclerView
不會為資料集中的每個項目建立檢視畫面,而是保留少量的檢視畫面,並在您捲動瀏覽這些項目時回收利用,藉此改善應用程式的效能。
在 Compose 中,您可以使用 Lazy 清單來完成相同操作。本頁面說明如何遷移 RecyclerView
實作,以在 Compose 中使用 Lazy 清單。
遷移步驟
如要將 RecyclerView
實作遷移至 Compose,請按照下列步驟操作:
將
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 清單 (結尾的 lambda 參數) 的
content
版位中,使用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 - 其他考量