在清單中顯示巢狀捲動項目

您可以在清單中顯示巢狀捲動項目,以呈現複雜的版面配置,例如產品目錄、媒體庫、新聞動態等。

版本相容性

這個實作方式需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

在垂直清單中實作巢狀水平捲動

以下程式碼會產生可雙向捲動的清單。清單的列會水平捲動;清單整體 (單一欄) 則會垂直捲動。

@Composable
fun NestedScrollingRowsList(urls: List<String>) {
    LazyColumn {
        items(10) {
            LazyRow {
                item { Text("Row: $it") }
                items(urls.size) { index ->
                    // AsyncImage provided by Coil.
                    AsyncImage(
                        model = urls[index],
                        modifier = Modifier.size(150.dp),
                        contentDescription = null
                    )
                }
            }
        }
    }
}

結果

以下影片顯示在垂直捲動清單中,巢狀水平清單的結果行為。

包含此指南的集合

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

清單和格線可讓應用程式以視覺上賞心悅目且使用者易於取用的形式顯示集合。
瞭解可組合函式如何讓您輕鬆根據 Material Design 設計系統,建立美觀的 UI 元件。
本系列影片將介紹各種 Compose API,快速向您展示可用的 API 和使用方式。

有問題或意見回饋嗎?

歡迎前往常見問題頁面,瞭解快速指南或與我們聯絡,分享您的想法。