スクロール状態とプログラムスクロール
リストのスクロール位置を読み取り、制御します。
「スクロール状態とプログラムスクロール」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
スクロールを制御する
リストがどれだけスクロールされたかを読み取ったり、任意の位置へ移動させたりしたい場合があります。その役割を担うのが scroll state です。🎚️
rememberLazyListState
rememberLazyListState でリストの状態を作成して保持し、それを LazyColumn、LazyRow、またはグリッドに渡します。
val listState = rememberLazyListState()
LazyColumn(state = listState) { }グリッドにも状態がある
グリッドには rememberLazyGridState という専用の状態保持オブジェクトがあります。同じ方法で接続して、LazyVerticalGrid の状態を追跡・制御します。
val gridState = rememberLazyGridState()
LazyVerticalGrid(state = gridState, columns = GridCells.Fixed(2)) { }先頭のアイテムを読み取る
状態から firstVisibleItemIndex を取得すると、現在ビューポートの先頭にあるアイテムを確認できます。
val firstIndex = listState.firstVisibleItemIndexスクロール方向を検出する
isScrollInProgress フラグを使うと、ユーザーが現在スクロール中かどうかを確認できます。スクロール中にツールバーを隠す場合などに便利です。
if (listState.isScrollInProgress) hideToolbar()瞬時に移動する
アニメーションなしでアイテムへ直接移動するには、コルーチンスコープから scrollToItem を呼び出します。
scope.launch {
listState.scrollToItem(index = 0)
}滑らかにスクロールする
瞬時に移動する代わりに滑らかに移動したい場合は、animateScrollToItem を使います。トップへ戻るボタンに最適です。
scope.launch {
listState.animateScrollToItem(0)
}コルーチンスコープが必要な理由
スクロールはサスペンド処理なので、コルーチン内で実行する必要があります。クリックから起動するには rememberCoroutineScope を取得します。
val scope = rememberCoroutineScope()
Button(onClick = { scope.launch { listState.animateScrollToItem(0) } }) { }トップへ戻るボタンを表示する
2つの考え方を組み合わせます。firstVisibleItemIndex から表示フラグを導出し、タップ時に0までアニメーションスクロールします。
val showFab by remember {
derivedStateOf { listState.firstVisibleItemIndex > 5 }
}再コンポジション後も維持される
状態は remembered されるため、再コンポジション後もスクロール位置が維持されます。回転後も保持するには rememberSaveable 版を使います。
状態がUIを動かす
基本的なパターンは一貫しています。scroll state を保持し、位置に応じた処理のために読み取り、スクロール関数を呼び出してリストを自分で移動させます。
クイックチェック
滑らかなスクロールについての確認です。
まとめ：スクロール制御
scroll state を保持し、firstVisibleItemIndex を読み取り、コルーチンから scrollToItem と animateScrollToItem を使ってリストを制御する方法を学びました。🚀
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「スクロール状態とプログラムスクロール」レッスンは無料ですか？
はい。「スクロール状態とプログラムスクロール」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「スクロール状態とプログラムスクロール」で何を学びますか？
リストのスクロール位置を読み取り、制御します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「スクロール状態とプログラムスクロール」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- LazyVerticalGridギャラリー
- カルーセル用のLazyRow
- 適応型と固定型のグリッドセル
- スクロール状態とプログラムスクロール