Kotlin Compose for Desktop 如何实现多视图切换？

Compose Desktop 完全支持多视图开发与切换，核心逻辑和Android端Compose一致，基于状态驱动UI即可实现，不存在平台差异。

核心规则说明 #

• 所有UI切换必须通过状态变更触发重组完成，禁止在onClick这类事件回调上下文里直接调用Composable函数——这就是之前报@Composable invocations can only happen from the context of a @Composable function错误的根本原因。
• 你担心的when语句提前加载所有视图的问题不存在：Compose重组时只会执行匹配当前状态的分支代码，未命中分支的Composable不会被初始化、也不会加载，只有切换到对应视图时才会渲染对应内容。

具体实现步骤 #

• 先定义视图标识枚举，避免用字符串硬编码导致的状态异常。
• 在Window的组合作用域内定义持有当前视图的状态，状态要放在所有需要触发切换的组件都能访问到的位置。
• 将不同视图拆分为独立的@Composable函数，把视图切换的动作通过函数类型参数（回调）传给视图组件，视图内点击按钮/菜单项时只触发回调修改状态，不直接操作UI。
• 在主布局中用when语句绑定状态和视图渲染逻辑，状态变更时会自动重组渲染对应视图。

可运行参考代码 #

@OptIn(ExperimentalComposeUiApi::class)
fun main() = application {
    enum class AppView { Home, DataTable }
    Window(
        onCloseRequest = ::exitApplication,
        title = "TestProject",
        state = WindowState(width = 1300.dp, height = 750.dp)
    ) {
        var currentView by remember { mutableStateOf(AppView.Home) }
        var action by remember { mutableStateOf("Last action: None") }

        // 全局共用的菜单栏放在视图分支外，所有页面都能显示
        MenuBar {
            Menu("Tasks", mnemonic = 'T') {
                Item(
                    "Create new Task",
                    onClick = { action = "Last action: Create new Task" },
                    shortcut = KeyShortcut(Key.C, ctrl = true)
                )
                // 菜单内可直接加视图切换入口
                Item("Go to Data Table", onClick = { currentView = AppView.DataTable })
                Item("Back to Home", onClick = { currentView = AppView.Home })
            }
        }

        // 状态驱动渲染对应视图
        when (currentView) {
            AppView.Home -> HomeView(
                lastAction = action,
                onNavigateToTable = { currentView = AppView.DataTable }
            )
            AppView.DataTable -> TableView(
                onNavigateBack = { currentView = AppView.Home }
            )
        }
    }
}

// 首页视图
@Composable
fun HomeView(lastAction: String, onNavigateToTable: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TextButton(
            onClick = onNavigateToTable,
            modifier = Modifier.padding(8.dp)
        ) {
            Text(text = "Change View to Table")
        }
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Text(text = lastAction)
        }
    }
}

// 表格视图
@Composable
fun TableView(onNavigateBack: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        TextButton(
            onClick = onNavigateBack,
            modifier = Modifier.padding(8.dp)
        ) {
            Text(text = "Back to Home")
        }
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            // 此处替换为实际表格组件即可
            Text(text = "This is data table view")
        }
    }
}

架构扩展提示 #

后续搭建MVC架构时，只需要把currentView的状态管理、视图切换逻辑抽到Controller层，视图层仅负责接收状态、触发回调即可，不需要持有全局导航逻辑。如果需要支持更多视图，只需扩展视图枚举、增加对应when分支，也可以基于这套逻辑扩展参数传递、栈式返回等导航能力，不需要引入额外第三方依赖。

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