このページは Cloud Translation API によって翻訳されました。

スナップスクロールを有効にするボタンを作成する

ボタンを表示して、ユーザーがリスト内の特定の位置にスクロールをスナップできるようにすると、時間を節約し、ユーザーエンゲージメントを高めることができます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

スナップスクロールを有効にするボタンを作成する

次のコードを使用して、10 個のアイテムを含む垂直な遅延リストでスムーズなスナップスクロールを行うボタンを作成します。

@Composable
fun MessageList(modifier: Modifier = Modifier) {
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState, modifier = Modifier.height(120.dp)) {
        items(10) { index ->
            Text(
                modifier = Modifier.height(40.dp),
                text = "Item $index"
            )
        }
    }

    Button(onClick = {
        coroutineScope.launch {
            listState.animateScrollToItem(index = 0)
        }
    }) {
        Text(text = "Go top")
    }
}LazyListSnippets.kt

コードに関する主なポイント

listState オブジェクトを使用して、選択した位置に LazyColumn のスクロール状態を記憶します。
コルーチンを起動して listState.animateScrollToItem を呼び出します。これにより、スクロールアクションをアニメーション化しながら、インデックスに登録されたアイテムまでスクロールします。