Navigation3で値付き遷移実装

はじめに

今回は前回に引き続きNavigation3の実装をしていきます
前回はシンプルな実装だったので、今回は値付きで実装していきます

コード

// Navigation3のキーを定義
@Serializable
object Home : NavKey

@Serializable
data class Detail(
    val id: Int,
    val displayName: String
) : NavKey

class MainActivity : ComponentActivity() {
    @RequiresApi(Build.VERSION_CODES.VANILLA_ICE_CREAM)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose3SampleTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    AppNavigation3(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@RequiresApi(Build.VERSION_CODES.VANILLA_ICE_CREAM)
@Composable
fun AppNavigation3(modifier: Modifier = Modifier) {
    // Navigation3のバックスタックを作成
    val backStack = rememberNavBackStack(Home)

    // NavDisplayを使用してナビゲーションを実装
    NavDisplay(
        backStack = backStack,
        entryProvider = entryProvider {
            entry<Home> {
                HomeScreen(
                    onNavigateToDetail = { id, displayName ->
                        backStack.add(Detail(id = id, displayName = displayName))
                    }
                )
            }
            entry<Detail> { detail ->
                DetailScreen(
                    id = detail.id,
                    displayName = detail.displayName,
                    onNavigateBack = { backStack.removeLast() }
                )
            }
        },
        modifier = modifier
    )
}

@Composable
fun HomeScreen(
    onNavigateToDetail: (Int, String) -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Hello Android! (Navigation3)",
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Button(
            onClick = { onNavigateToDetail(123, "サンプルアイテム") }
        ) {
            Text("詳細画面へ")
        }
    }
}

@Composable
fun DetailScreen(
    id: Int,
    displayName: String,
    onNavigateBack: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "詳細画面です (Navigation3)",
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Text(
            text = "ID: $id",
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            text = "表示名: $displayName",
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Button(
            onClick = onNavigateBack
        ) {
            Text("戻る")
        }
    }
}

最後に

今回はプリミティブ型のみにしたので次はかすたむのDataClassを実装していきます