Navigation3でDataClass引数の遷移をする

はじめに

前回に引き続きNavigation3での遷移実装をしていきます。
今回はプロジェクト独自のDataClassを引数にとった遷移です

コード

DataClass

/**
 * ユーザー情報を表すデータクラス
 */
 // 従来同様Serializableで変換可能にしておく
@Serializable
data class UserInfo(
    val id: Int,
    val name: String,
    val email: String,
    val age: Int
)

Compose

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

@Serializable
data class Detail(
    val userInfo: UserInfo
) : 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 = { userInfo ->
                        backStack.add(Detail(userInfo = userInfo))
                    }
                )
            }
            entry<Detail> { detail ->
                DetailScreen(
                    userInfo = detail.userInfo,
                    onNavigateBack = { backStack.removeLast() }
                )
            }
        },
        modifier = modifier
    )
}

@Composable
fun HomeScreen(
    onNavigateToDetail: (UserInfo) -> 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 = {
                val userInfo = UserInfo(
                    id = 123,
                    name = "山田太郎",
                    email = "[e-mail]",
                    age = 25
                )
                onNavigateToDetail(userInfo)
            }
        ) {
            Text("詳細画面へ")
        }
    }
}

@Composable
// あとはもう通常の引数と同じ動き
fun DetailScreen(
    userInfo: UserInfo,
    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: ${userInfo.id}",
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            text = "名前: ${userInfo.name}",
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            text = "メール: ${userInfo.email}",
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            text = "年齢: ${userInfo.age}歳",
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Button(
            onClick = onNavigateBack
        ) {
            Text("戻る")
        }
    }
}

最後に

書き方自体は大きな変更がないので、そこまで難しく感じないと思います
次は特定の画面まで戻る処理を実装しようと思ってます