Open1

画面をスクロールしたい

Kotlin
Android Studio
Jetpack Compose
scroll
lazy
るるすたるるすた

Columnで項目をたくさん並べた場合

試しにHelloをたくさん縦に並べるコードを書いた。

@Composable
fun TestScreen() {
    Column(modifier = Modifier.fillMaxSize()){
        for (i in 1..10) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .size(150.dp)
                    .border(1.dp, Color.Black)
            ) {
                Text(text = "Hello $i",fontSize = 30.sp)
            }
        }
    }
}

これを実行するとこう！
Hello5までは表示されたが、これ以降表示されない。
スクロールしないからです。

画面をスクロールさせる

今回はColumnを例にしたので、縦にスクロールさせる方法です。
方法は2つあります。
どっちも一番下まですんなりスクロールします。

  • 方法① Column → LazyColumnに変更
    画面に表示される領域のみレンダリングさせる。
    軽いので、大量にある項目をスクロールするのに向いている。
    コードの変更が若干面倒。

  • 方法② Column に verticalScroll を付ける
    　画面に表示されない領域もレンダリングする。
    　今あるコードのModifierに.verticalScroll()を追加するだけ。
    　表示されない部分が小数ならこっちのが簡単。

方法① Column → LazyColumnに変更

修正部分は緑の部分。
ColumnをLazyColumnに変更し、表示させたいものをitem{}でラップ。

@Composable
fun TestScreen() {
+    LazyColumn(modifier = Modifier.fillMaxSize()){
        for (i in 1..100) {
+            item {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .size(150.dp)
                        .border(1.dp, Color.Black)
                ) {
                    Text(text = "Hello $i",fontSize = 30.sp)
                }
            }
+        }
    }
}

方法② Column に verticalScroll を付ける

修正部分は緑の部分。

@Composable
fun TestScreen() {
+    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxSize()
+            .verticalScroll(scrollState)
    ){
        for (i in 1..10) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .size(150.dp)
                    .border(1.dp, Color.Black)
            ) {
                Text(text = "Hello $i",fontSize = 30.sp)
            }
        }
    }
}