使用清單和分頁功能延遲載入資料

透過延遲載入和 Paging,您可以在應用程式中支援大量項目清單 (包括無限清單),方法是逐步載入及顯示資料。這項技術可縮短初始載入時間、最佳化記憶體用量,進而提升效能。

結果

以下影片顯示使用者捲動時,大型清單擷取資料的行為。

版本相容性

這項實作要求專案 minSDK 必須設為 API 級別 21 以上。

依附元件

顯示分頁內容

有了 Paging 程式庫,您就能從本機儲存空間或網路取得大型資料集,並載入及顯示資料頁面。請使用下列程式碼顯示分頁清單,其中會顯示進度列,向使用者指出正在擷取更多資料:

@Composable
fun MessageList(
    modifier: Modifier,
    pager: Pager<Int, Message>
) {
    val lazyPagingItems = pager.flow.collectAsLazyPagingItems()

    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val message = lazyPagingItems[index]
            if (message != null) {
                MessageRow(message)
            } else {
                MessagePlaceholder()
            }
        }
    }
    @Composable
    fun MessagePlaceholder(modifier: Modifier) {
        Box(
            Modifier
                .fillMaxWidth()
                .height(48.dp)
        ) {
            CircularProgressIndicator()
        }
    }

    @Composable
    fun MessageRow(
        modifier: Modifier,
        message: Message
    ) {
        Card(modifier = Modifier.padding(8.dp)) {
            Column(
                modifier = Modifier.padding(8.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(message.sender)
                Text(message.text)
            }
        }
    }
}

程式碼重點

  • LazyColumn:這個可組合函式用於有效率地顯示大型項目清單 (訊息)。只會轉譯畫面上可見的項目,因此能節省資源和記憶體。
  • lazyPagingItems 物件可有效管理 LazyColumn 內分頁資料的載入和呈現。它會將 LazyPagingItems 傳遞至 LazyColumn 可組合函式中的 items。
  • MessageRow(message: Text) 負責轉譯個別訊息項目,可能會在資訊卡中顯示訊息的寄件者和文字。
  • MessagePlaceholder() 會在擷取實際訊息資料時,提供視覺預留位置 (載入旋轉圖示),提升使用者體驗。

包含這份指南的系列

本指南是精選快速指南系列的一部分,涵蓋更廣泛的 Android 開發目標:

清單和格線可讓應用程式以美觀的形式顯示集合,方便使用者瀏覽。
瞭解如何使用可組合函式,根據 Material Design 設計系統輕鬆建立精美的 UI 元件。
本系列影片將介紹各種 Compose API,快速說明可用的 API 及其使用方式。

如有問題或想提供意見

請前往常見問題頁面,查看快速指南或與我們聯絡,分享你的想法。