Compose Multiplatform: 画面遷移ライブラリを評価する ⑤ まとめ編

fun VoyagerApp() {
    Navigator(GalleryScreen())
}

class GalleryScreen : Screen {
    @Composable
    override fun Content() {
        val navigator = LocalNavigator.current
        GalleryContent(
            pictures = Pictures.value,
            onClick = { navigator?.push(PreviewScreen(it)) },
            modifier = Modifier.fillMaxSize()
        )
    }
}

class PreviewScreen(
    private val picture: Picture
) : Screen {
    @Composable
    override fun Content() {
        val navigator = LocalNavigator.current
        var isShowDeitals by remember { mutableStateOf(false) }

        PreviewContent(
            picture = picture,
            onBack = { navigator?.pop() },
            onNavigateDetails = { isShowDeitals = true },
            modifier = Modifier.fillMaxSize(),
        )

        if (isShowDeitals) {
            Dialog(onDismissRequest = { isShowDeitals = false }) {
                DetailsContent(
                    picture = picture,
                    onBack = { isShowDeitals = false },
                    modifier = Modifier.wrapContentSize()
                )
            }
        }
    }
}

@Composable
fun PrecomposeDemo() {
    PreComposeApp {
        val navigator = rememberNavigator()
        NavHost(
            navigator = navigator,
            navTransition = NavTransition(),
            initialRoute = "/gallery"
        ) {
            scene(
                route = "/gallery",
                navTransition = NavTransition(),
            ) {
                GalleryScreen(
                    pictures = Pictures.value,
                    onNavigatePreview = { navigator.navigate("/preview/${it.name}") },
                    modifier = Modifier.fillMaxSize()
                )
            }

            scene(
                route = "/preview/{name}",
                navTransition = NavTransition(),
            ) { backStackEntry ->
                val name = backStackEntry.path<String>("name")
                val picture = Pictures.value.firstOrNull { it.name == name } ?: return@scene

                PreviewScreen(
                    picture = picture,
                    onNavigateDetails = { navigator.navigate("/details/${it.name}") },
                    onBack = { navigator.popBackStack() },
                    modifier = Modifier.fillMaxSize()
                )
            }

            dialog(
                route = "/details/{name}"
            ) { backStackEntry ->
                val name = backStackEntry.path<String>("name")
                val picture = Pictures.value.firstOrNull { it.name == name } ?: return@dialog
                DetailsDialog(
                    picture = picture,
                    onBack = { navigator.popBackStack() },
                    modifier = Modifier.wrapContentSize()
                )
            }
        }
    }
}

@Parcelize
sealed class Screens : Parcelable {
    data object Gallery : Screens()
    data class Preview(val name: String) : Screens()
}

@Composable
fun DecomposeApp() {
    val router: Router<Screens> = rememberRouter(Screens::class) { listOf(Screens.Gallery) }
    RoutedContent(router = router) { screen ->
        when (screen) {
            Screens.Gallery -> {
                GalleryScreen(
                    pictures = Pictures.value,
                    onNavigatePreview = { router.push(Screens.Preview(it.name)) },
                    modifier = Modifier.fillMaxSize()
                )
            }

            is Screens.Preview -> {
                val picture = Pictures.value.firstOrNull { it.name == screen.name } ?: return@RoutedContent
                var isShowDetails by remember { mutableStateOf(false) }

                PreviewScreen(
                    picture = picture,
                    onNavigateDetails = { isShowDetails = true },
                    onBack = { router.pop() },
                    modifier = Modifier.fillMaxSize()
                )

                if (isShowDetails) {
                    DetailsDialog(
                        picture = picture,
                        onBack = { isShowDetails = false },
                        modifier = Modifier.wrapContentSize()
                    )
                }
            }
        }
    }
}