Jetpack Compose：避免状态提升至应用层级的页面状态获取方案

针对你的场景，最简洁且符合Compose设计理念的方案是通过CompositionLocal来传递页面的保存回调，既不需要提升全局状态，也无需依赖共享ViewModel，同时保持页面状态的封装性。

步骤1：定义CompositionLocal用于传递保存函数 #

首先创建一个CompositionLocal，用来提供当前页面的玩家保存逻辑：

val LocalSavePlayerAction = compositionLocalOf<() -> Unit> {
    error("SavePlayerAction not provided for this screen")
}

步骤2：在创建玩家页面中封装状态与保存逻辑 #

在CreatePlayerScreen中管理玩家名称、颜色的本地状态，定义保存函数，并通过LocalCompositionLocalProvider将该函数暴露给父层级的TopAppBar：

@Composable
fun CreatePlayerScreen(navController: NavController) {
    // 页面本地状态：玩家名称与选中颜色
    val playerName = remember { mutableStateOf("") }
    val selectedColor = remember { mutableStateOf(Color.Default) }

    // 使用rememberUpdatedState确保回调始终持有最新的状态值
    val savePlayerAction = rememberUpdatedState {
        // 构造玩家对象并执行数据库保存
        val newPlayer = Player(name = playerName.value, color = selectedColor.value)
        // 调用你的数据库保存方法，例如：playerRepository.insert(newPlayer)
        // 保存完成后返回上一页
        navController.popBackStack()
    }

    // 提供保存回调给上层组件
    LocalCompositionLocalProvider(LocalSavePlayerAction provides savePlayerAction.value) {
        // 页面UI：名称输入框、颜色选择器等
        Column(modifier = Modifier.padding(16.dp)) {
            OutlinedTextField(
                value = playerName.value,
                onValueChange = { playerName.value = it },
                label = { Text("玩家名称") },
                modifier = Modifier.fillMaxWidth()
            )
            // 颜色选择器组件（示例）
            ColorPicker(selectedColor = selectedColor.value, onColorSelected = { selectedColor.value = it })
        }
    }
}

步骤3：在全局TopAppBar中获取并调用回调 #

在你的全局TopAppBar中，通过LocalSavePlayerAction获取当前页面的保存函数，绑定到对勾按钮的点击事件：

@Composable
fun AppTopAppBar(navController: NavController) {
    val currentRoute = navController.currentBackStackEntry?.destination?.route
    val savePlayerAction = LocalSavePlayerAction.current

    TopAppBar(
        title = { Text(if (currentRoute == "createPlayer") "创建玩家" else "首页") },
        actions = {
            // 仅在创建玩家页面显示保存按钮
            if (currentRoute == "createPlayer") {
                IconButton(onClick = savePlayerAction) {
                    Icon(Icons.Filled.Check, contentDescription = "保存玩家")
                }
            }
        }
    )
}

步骤4：保持原有全局Scaffold结构 #

你的全局App结构无需大幅修改，只需确保NavHost正确渲染CreatePlayerScreen：

@Composable
fun App() {
    val navController = rememberNavController()
    Scaffold(
        topBar = { AppTopAppBar(navController) }
    ) { innerPadding ->
        NavHost(
            navController = navController,
            startDestination = "home",
            modifier = Modifier.padding(innerPadding)
        ) {
            composable("home") { HomeScreen(navController) }
            composable("createPlayer") { CreatePlayerScreen(navController) }
        }
    }
}

方案优势 #

• 状态封装：玩家的名称、颜色状态仅属于CreatePlayerScreen，不会污染全局状态
• 低耦合：TopAppBar无需直接依赖页面的状态或ViewModel，仅通过CompositionLocal获取回调
• 灵活性：其他页面可以通过提供不同的CompositionLocal实现，定制TopAppBar的操作按钮

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