如何在不同屏幕上更改 Scaffold Floating Action Button 动作。喷气背包撰写

时间:2021-07-05 15:58:39

标签: android android-jetpack-compose android-jetpack-compose-scaffold

如何根据带有脚手架的当前屏幕更改 FAB 操作(onClick{})。

            Scaffold(
                floatingActionButton = {
                    FloatingActionButton(onClick = { 
                        //Different actions here depending on current screen
                    }) { }
                }
            ) {
                NavHost(
                    navController = navController,
                    startDestination = "route1"
                ) {
                    composable(
                        route = "route1"
                    ) {
                        ScreenOne()
                    }

                    composable(
                        route = "route2"
                    ) {
                        ScreenTwo()
                    }
                }
            }

例如我想用 ScreenOne() 添加一些实体到数据库,用 ScreenTwo() 我想保存编辑过的实体。所有这些都使用 Scaffold 共享的相同 FAB。

更新: 刚刚明白,我还需要提一下,我也需要FAB知道一些数据来操作。例如,我想通过单击 FAB 将某个实体保存到数据库中,因此 FAB 需要了解该实体。

示例: 我正在单击列表中的某个项目。它打开了一些实体的导航方向。我正在修改此实体并单击 FAB 以保存编辑后的实体。

2 个答案:

答案 0 :(得分:0)

如果您使用的是 Navigation,则可以通过 navController 检索 rememberNavController(),然后将其用于 getCurrentBackStackEntry().destination,在 onClick 块中应用条件并相应地设置动作

答案 1 :(得分:0)

您可以观察NavController的当前路线并进行相应的操作。

// When you navigate to another screen, this value is updated.
val currentRoute = navController
    .currentBackStackEntryFlow
    .collectAsState(initial = navController.currentBackStackEntry)

Scaffold(
    floatingActionButton = {
        FloatingActionButton(
            onClick = {
                when (currentRoute.value?.destination?.route) {
                    "screen1" -> { /* Action for Screen 1 */ }
                    "screen2" -> { /* Action for Screen 2 */ }
                    // ...
                }
            }
        ) {
            Icon(Icons.Default.Add, contentDescription = null)
        }
    }
) {
    NavHost(navController = navController, startDestination = "screen1") {
        composable("screen1") { Screen1() }
        composable("screen2") { Screen2() }
    }
}