Jetpack Compose TopAppBar 在使用 Navigation 组件设置 BottomNavView 后闪烁

Question

使用带有BottomNavigationView 和导航组件的 Jetpack Compose 应用程序，我对 Activity 内的底部栏进行了常规设置：

val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
navigationView.setupWithNavController(navController)

在每个屏幕中，我都使用可组合的TopAppBar。 不幸的是，在添加 setupWithNavController 调用后，TopAppBar 开始在所有导航栏目标中闪烁（但不是在更深的目标中）。

如何解决闪烁问题？

Answer 1

我遇到了同样的问题。令我惊讶的是，将androidx.navigation:navigation-compose version 降低到2.4.0-alpha04 有所帮助。

Answer 2

我无法准确回答您如何解决闪烁问题，但我可以告诉您，在 Jetpack Compose 中使用导航组件 TopBars 和 BottomBars 的推荐方法是使用 Scaffold component 和 navigation-compose component。

Compose Navigation 组件依赖：

// Navigation
implementation "androidx.navigation:navigation-compose:1.0.0-alpha09"

它仍处于 alpha 阶段，但到目前为止它运行得非常好。尽量保持发布所有更新。

使用示例：

@Composable
fun App() {
    val navController = rememberNavController()

    Scaffold(
        topBar = {
            TopAppBar {
                Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
                    Text(text = "App Title")
                }
            }
        },
        bottomBar = {
            BottomAppBar {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    TextButton(onClick = { navController.navigate("home") }) {
                        Text(text = "Home")
                    }
                    TextButton(onClick = { navController.navigate("favorites") }) {
                        Text(text = "Favorites")
                    }
                    TextButton(onClick = { navController.navigate("profile") }) {
                        Text(text = "Profile")
                    }
                }
            }
        }
    ) {
        NavHost(navController, startDestination = "home") {
            composable("home") {
                Home()
            }
            composable("favorites") {
                Favorites()
            }
            composable("profile") {
                Profile()
            }
        }
    }
}