Jetpack Compose 底部导航栏可见性随延迟变化

Question

我有一个带 3 个屏幕的底部导航栏。我使用 AnimatedVisibility 在详细信息屏幕中隐藏了底部导航栏，但可见性会随着延迟而变化。

        Surface(color = MaterialTheme.colors.background) {
            // Get UI state
            val uiState by rememberFlowWithLifecycle(flow = viewModel.uiState).collectAsState(initial = MainUiState(true))
            // Set Status bar to transparent
            SetStatusBarColor()
            // Create Navigation
            val navController = rememberNavController()
            val navigationActions = remember(navController) {
                NavActions(navController)
            }
            // Create Scaffold Composable
            Scaffold(
                topBar = { },
                bottomBar = {
                    AnimatedVisibility(
                        visible = uiState.isBottomBarVisible,
                    ) {
                        BottomNavigationBar(
                            navController,
                            navigationActions,
                            Modifier.navigationBarsPadding()
                        )
                    }
                }
            ) { innerPaddings ->
                NavigationGraph(
                    navController,
                    navigationActions,
                    Modifier
                        .padding(innerPaddings)
                        .statusBarsPadding()
                )
            }
            // Change bottom bar state
            val currentRoute = getCurrentRoute(navController = navController)
            viewModel.changeBottomBarVisibility(currentRoute != Screen.Detail.path)
        }
    }

默认进入和退出动画，可见性改变没有延迟

但是当我更改进入和退出动画时 scale，底栏在变得不可见时出现滞后行为

AnimatedVisibility(
       visible = uiState.isBottomBarVisible,
       enter = scaleIn(),
       exit = scaleOut()
        ) {
            BottomNavigationBar(
               navController,
               navigationActions,
               Modifier.navigationBarsPadding()
             )
     }

在华为 P40 Lite 和 Google 像素模拟器中测试，行为相同。

Compose 版本为 1.0.5 Compose 导航版本为 2.4.0 Compose动画版本为1.1.0

简而言之，动画可见性在没有默认动画的情况下表现不流畅

Answer 1

我认为，这是因为当您隐藏 bottomBar 时屏幕大小会发生变化。要解决此问题，请尝试删除 NavigationGraph 中的修饰符 padding(innerPaddings) 并手动控制每个页面的填充。如果它没有帮助，我稍后会尝试你的代码。

Jetpack Compose 底部导航栏可见性随延迟变化

Jetpack Compose Bottom Navigation Bar visibility changes with delay

animation

android

kotlin

android-jetpack-navigation

android-jetpack-compose