[Kotlin]JetpackComposeでスクロール表示のリストを作る

概要

Kotlinでは従来、XML形式でUIを作成していましたが、JetpackComposeを使えばコード上でUIを表記する事ができます。
今回はそのJetpackComposeでスクロールさせることの出来るリストを作ってみました。

JetpackComposeに慣れている方は＠Composable以降を既存コードへコピペして確認してみてください。

本文

新規のKotlinファイルを作ります。テンプレートはEmptyComposeActivityを選んでください。

最初に表示されるMainActivity.ktを書き換えます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScrollBoxes()
        }
    }
}

@Composable
fun ScrollBoxes() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(0.3f)
            .verticalScroll(rememberScrollState())
            .background(Color.Blue)
            .padding(15.dp,0.dp),

    ) {
        repeat(30) {
            Text(
                text = "リスト項目: $it",
                fontSize = 22.sp,
                color = Color.White,
                modifier = Modifier.clickable {
                    // 項目が押された時の処理
                }
            )
        }
    }
}

実行するとリストが表示されます。

補足

デザイン用に余分な項目も加えていますが、ポイントは

modifier = Modifier.verticalScroll(rememberScrollState())

の部分だけです。