使用NavController页面切换卡顿问题排查求助

问题描述 #

刚接触Jetpack Compose，使用NavController进行页面切换时，发现默认过渡动画过程中帧率极低、卡顿明显。尝试移除默认动画但未成功，已在多台设备测试，问题一致。

依赖版本信息 #

implementation 'androidx.activity:activity-compose:1.8.2'
implementation "androidx.navigation:navigation-compose:2.7.6"
implementation "androidx.compose.material:material:1.5.4"
implementation 'androidx.compose.material3:material3'
implementation 'androidx.core:core-ktx:1.12.0'
implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')

代码实现 #

MainActivity代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CarCareTrackerTheme {
                val navController = rememberNavController()

                MyBottomNavigation(navController)
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyBottomNavigation(navController: NavController) {
    Scaffold(
        modifier = Modifier,
        floatingActionButton = {
            Box() {
                FloatingActionButton(
                    onClick = { /* stub */},
                    containerColor = MainBlue,
                    shape = CircleShape,
                    modifier =
                        Modifier.align(Alignment.Center)
                            .size(80.dp)
                            .offset(y = 50.dp)
                            .shadow(
                                elevation = 10.dp,
                                shape = CircleShape,
                            ),
                ) {
                    Icon(Icons.Filled.Add, contentDescription = "Add", tint = Color.White)
                }
            }
        },
        floatingActionButtonPosition = FabPosition.Center,
        content = { innerPadding ->
            NavHost(
                navController as NavHostController,
                startDestination = "home",
                Modifier.padding(innerPadding),
            ) {
                composable("home") { HomeScreen(navController) }
                composable("settings") { SettingsScreen(navController) }
            }
        },
        bottomBar = {
            BottomNavigation(backgroundColor = Color.White, contentColor = MainBlue) {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                BottomNavigationItem(
                    icon = {
                        val isSelected =
                            currentDestination?.hierarchy?.any { it.route == "home" } == true
                        Icon(
                            Icons.Filled.Home,
                            contentDescription = null,
                            tint = if (isSelected) MainBlue else LightGray
                        )
                    },
                    label = {
                        val isSelected =
                            currentDestination?.hierarchy?.any { it.route == "home" } == true
                        Text(
                            stringResource(R.string.home),
                            color = if (isSelected) MainBlue else LightGray
                        )
                    },
                    selected = currentDestination?.hierarchy?.any { it.route == "home" } == true,
                    selectedContentColor = MainBlue,
                    onClick = {
                        navController.navigate("home") {
                            popUpTo(navController.graph.findStartDestination().id) {
                                saveState = true
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    }
                )

                BottomNavigationItem(
                    icon = {
                        val isSelected =
                            currentDestination?.hierarchy?.any { it.route == "settings" } == true
                        Icon(
                            Icons.Filled.Settings,
                            contentDescription = null,
                            tint = if (isSelected) MainBlue else LightGray
                        )
                    },
                    label = {
                        val isSelected =
                            currentDestination?.hierarchy?.any { it.route == "settings" } == true
                        Text(
                            stringResource(R.string.settings),
                            color = if (isSelected) MainBlue else LightGray
                        )
                    },
                    selected =
                        currentDestination?.hierarchy?.any { it.route == "settings" } == true,
                    selectedContentColor = MainBlue,
                    unselectedContentColor = LightGray,
                    onClick = {
                        navController.navigate("settings") {
                            popUpTo(navController.graph.findStartDestination().id) {
                                saveState = true
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    }
                )
            }
        }
    )
}

SettingsScreen代码 #

@Composable
fun SettingsScreen (
    navController: NavController
){
    Column() {
        Text(text = "SettingsScreen")
        Text(text = "SettingsScreen")
    }
}

HomeScreen代码 #

@Composable
fun HomeScreen(
    navController: NavController
) {
    Column() {
        Text(text = "HomeScreen")
        Text(text = "HomeScreen")
    }
}

疑问 #

请问该问题的原因是什么？我哪里操作有误？

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