如何在Kotlin Multiplatform中根据平台加载不同Composable？

开发者阿泽

2026-6-13

问题描述

我正在开发一个KMP应用，希望根据平台（桌面和移动平台）加载特定的Composable（或整个屏幕）。这些Composable位于不同的模块：androidMain和commonMain。我尝试在commonMain的LoginScreen中调用以下函数，但移动端和桌面端都会加载它，请问需要修改哪些内容？

@Composable
fun MainView() {
    val platformName = getPlatformName()
    val navController = rememberNavController()
    Button(onClick = {
        if (platformName == "Android") {
            navController.navigate(DestinosNavegacion.android.route)
        } else {
            navController.navigate("ios")
        }
    }){
        Text("Navegar a la vista especifica")
    }
}

DestinosNavegacion.kt

sealed class DestinosNavegacion(
    val route: String,
    val title: String,
    arguments: List<NamedNavArgument> = listOf()
) {
    object LoginScreen : DestinosNavegacion("loginScreen", "loginScreen")
    object app : DestinosNavegacion("app", "app")
    object login : DestinosNavegacion(
        "login/{email}/{password}",
        "login",
        arguments = listOf(
            navArgument("email") { type = NavType.StringType },
            navArgument("password") { type = NavType.StringType }
        )
    )
    object android : DestinosNavegacion("android", "DatosAndroid")
}

NavGraph.kt

@Composable
fun NavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = DestinosNavegacion.LoginScreen.route,
    ) {
        composable(DestinosNavegacion.LoginScreen.route) { LoginScreen(navController) }
        composable(DestinosNavegacion.app.route) { /*APP(TODOS LOS PARAMETROS QUE LLEVE)*/ }
        composable(DestinosNavegacion.login.route) { backStackEntry ->
            val email = backStackEntry.arguments?.getString("email") ?: ""
            val password = backStackEntry.arguments?.getString("password") ?: ""

            MainView()

            /* login funcion (llamada api y tal) */
        }
        composable(DestinosNavegacion.android.route) {
            DatosAndroid()
        }

    }
}

解决方案

要实现平台专属Composable的按需加载，核心是利用KMP的expect/actual机制封装平台判断逻辑，同时配合类型安全的导航配置，避免硬编码平台名称和路由字符串。具体修改如下：

1. 用expect/actual替代硬编码平台判断

在commonMain中定义预期函数和平台枚举，统一平台判断的入口：

// commonMain/Platform.kt
expect fun getPlatform(): PlatformType

enum class PlatformType {
    ANDROID, IOS, DESKTOP
}

在各平台模块中实现actual函数：

androidMain：

// androidMain/Platform.kt
actual fun getPlatform(): PlatformType = PlatformType.ANDROID

iosMain：

// iosMain/Platform.kt
actual fun getPlatform(): PlatformType = PlatformType.IOS

desktopMain：

// desktopMain/Platform.kt
actual fun getPlatform(): PlatformType = PlatformType.DESKTOP

2. 完善导航目的地定义

补充iOS和桌面的专属路由，避免硬编码字符串：

// commonMain/DestinosNavegacion.kt
sealed class DestinosNavegacion(
    val route: String,
    val title: String,
    arguments: List<NamedNavArgument> = listOf()
) {
    object LoginScreen : DestinosNavegacion("loginScreen", "Login")
    object App : DestinosNavegacion("app", "App")
    object Login : DestinosNavegacion(
        "login/{email}/{password}",
        "Login",
        arguments = listOf(
            navArgument("email") { type = NavType.StringType },
            navArgument("password") { type = NavType.StringType }
        )
    )
    object AndroidScreen : DestinosNavegacion("android_screen", "Android专属页面")
    object IosScreen : DestinosNavegacion("ios_screen", "iOS专属页面")
    object DesktopScreen : DestinosNavegacion("desktop_screen", "桌面专属页面")
}

3. 修改MainView的导航逻辑

用类型安全的方式匹配平台与路由：

// commonMain/MainView.kt
@Composable
fun MainView(navController: NavHostController) {
    val platform = getPlatform()
    Button(onClick = {
        val targetRoute = when(platform) {
            PlatformType.ANDROID -> DestinosNavegacion.AndroidScreen.route
            PlatformType.IOS -> DestinosNavegacion.IosScreen.route
            PlatformType.DESKTOP -> DestinosNavegacion.DesktopScreen.route
        }
        navController.navigate(targetRoute)
    }){
        Text("跳转到平台专属页面")
    }
}

4. 拆分平台专属路由注册

避免在common代码中直接引用平台专属Composable，通过expect/actual拆分导航图的平台部分：

commonMain的基础导航图：

// commonMain/NavGraph.kt
@Composable
fun NavGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = DestinosNavegacion.LoginScreen.route,
    ) {
        composable(DestinosNavegacion.LoginScreen.route) { LoginScreen(navController) }
        composable(DestinosNavegacion.App.route) { /* 通用App页面 */ }
        composable(DestinosNavegacion.Login.route) { backStackEntry ->
            val email = backStackEntry.arguments?.getString("email") ?: ""
            val password = backStackEntry.arguments?.getString("password") ?: ""

            MainView(navController)

            /* 登录逻辑（API调用等） */
        }
        // 调用平台专属路由注册函数
        registerPlatformSpecificScreens(navController)
    }
}

// 预期平台专属路由注册函数
@Composable
expect fun NavGraphBuilder.registerPlatformSpecificScreens(navController: NavHostController)

androidMain注册Android专属页面：

// androidMain/NavGraph.kt
@Composable
actual fun NavGraphBuilder.registerPlatformSpecificScreens(navController: NavHostController) {
    composable(DestinosNavegacion.AndroidScreen.route) {
        DatosAndroid() // Android专属Composable
    }
}

iosMain注册iOS专属页面：

// iosMain/NavGraph.kt
@Composable
actual fun NavGraphBuilder.registerPlatformSpecificScreens(navController: NavHostController) {
    composable(DestinosNavegacion.IosScreen.route) {
        IosSpecificScreen() // iOS专属Composable
    }
}

desktopMain注册桌面专属页面：

// desktopMain/NavGraph.kt
@Composable
actual fun NavGraphBuilder.registerPlatformSpecificScreens(navController: NavHostController) {
    composable(DestinosNavegacion.DesktopScreen.route) {
        DesktopSpecificScreen() // 桌面专属Composable
    }
}

5. 关键注意事项

禁止在common代码中直接引用平台专属Composable（如DatosAndroid），否则会触发编译错误；
所有平台判断逻辑通过expect/actual封装，保证代码的类型安全和可维护性，杜绝硬编码字符串判断平台。

内容的提问来源于stack exchange，提问作者alesv