Composeを使用した画面遷移でListを受け渡す方法

概要

おはこんにちは！✨
本日はComposeを使用した画面遷移でListを受け渡す方法について記事を執筆します。（具体的な使用方法については記載しないため、公式ドキュメントを参照してください）

設定

本記事では、navigation-composeのバージョンは2.4.0-beta02を対象としています。

build.gradle

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0-beta02"
}

問題点

公式ドキュメントの引数を使用して移動するに記載されているように画面遷移時に特定の値を渡す方法は記述されています。
しかし、単体での受け渡しに関してはドキュメントに定義されていますが、複数の値を画面遷移時に渡してあげる方法については明記されていません。
今回は複数の値を画面遷移時に受け渡してあげる方法について記述していきます。

実装方法

実装の完成系は下記掲載の動画になります！！

sample.kt

@Composable
fun FirstView(
    onClick: () -> Unit,
) {
    //遷移前の画面
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Text(text = "Hello Android")

        Button(onClick = onClick) {
            Text(text = "遷移用ボタン")
        }
    }
}


@Composable
fun SecondView(ids: List<String>) {
    //遷移後の画面
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        ids.map {
            Text(text = it)
        }
    }
}

sample.kt

@Composable
fun NavigationHost() {
    //NavigationHostの実装定義
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "first") {

        //対象のアイテム
        val ids: List<Int> = listOf(1, 2, 3)
        
        //separatorの定義
        val argumentSeparator = ","

        composable("first") {
            FirstView {
                navController.navigate(
                    //joinToStringを使用し、対象をargumentSeparatorで定義した対象で区切り変換する。
                    "second/${ids.joinToString(separator = argumentSeparator) { it.toString() }}"
                )
            }
        }
        composable("second/{sampleIds}") { backStackEntry ->
            SecondView(
                
                ids = backStackEntry.arguments?.getString("sampleIds")
                    .let(::requireNotNull)
                    //splitを使用し、argumentSeparatorで定義した対象でListに変換する。
                    .split(argumentSeparator)
            )
        }
    }
}

まとめ

今回はListを画面遷移時に受け渡す場合の実装について記述しました。
複数選択した要素を画面遷移時に使用したい時などに役立つと思います！
別途方法がある人がいましたらコメントにて指摘等お願いいたします🙇‍♂️
それでは素敵なJetpackComposeLifeを✨🎉✨🎉✨