Android Jetpack Compose点击顶部导航按钮两次致白屏卡顿

问题场景 #

使用TopAppBar搭配汉堡菜单图标+ModalNavigationDrawer+ModalDrawerSheet的Compose应用，在以下场景出现无崩溃的白屏卡顿：

• 快速双击导航图标时
• 从首页打开抽屉导航至设置页面，返回首页后再次点击导航图标时

可能原因 #

1. 抽屉状态并发冲突：快速点击导致抽屉状态（打开/关闭）被频繁触发，协程并发执行状态切换逻辑，引发UI重组异常
2. 导航与抽屉状态未联动：跳转页面时未主动关闭抽屉，返回首页后抽屉状态残留，触发异常重组
3. 重组范围失控：HomeHeader或主页面组件未合理限制重组范围，状态变化引发大面积UI重绘

修复方案 #

1. 串行化抽屉状态切换逻辑 #

使用rememberCoroutineScope确保抽屉状态切换动作串行执行，避免快速点击的并发冲突：

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()

val onMenuClick = {
    scope.launch {
        // 先判断当前状态，避免重复触发
        drawerState.apply {
            if (isClosed) open() else close()
        }
    }
}

2. 导航时主动关闭抽屉 #

在抽屉项的导航逻辑中，先关闭抽屉再执行跳转，确保返回首页时抽屉状态为关闭：

val navController = rememberNavController()

val navigateToSettings = {
    scope.launch {
        drawerState.close()
        // 等待抽屉关闭完成再导航
        drawerState.waitForClosed()
        navController.navigate("settings")
    }
}

3. 限制组件重组范围 #

优化HomeHeader组件，仅在必要参数变化时重组，避免不必要的重绘：

@Composable
fun HomeHeader(
    onMenuClick: () -> Unit,
    title: String
) {
    // 使用remember包装不变的配置，减少重组触发
    val menuIcon = remember { Icons.Default.Menu }
    
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = onMenuClick) {
                Icon(
                    imageVector = menuIcon,
                    contentDescription = "打开导航抽屉"
                )
            }
        }
    )
}

4. 优化ModalNavigationDrawer布局结构 #

确保ModalNavigationDrawer仅包裹NavHost，避免主内容嵌套过多可能引发重组的组件：

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet {
            // 抽屉导航项
            NavigationDrawerItem(
                label = { Text("设置") },
                selected = false,
                onClick = navigateToSettings
            )
            // 其他导航项...
        }
    }
) {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") {
            HomeScreen(
                header = { HomeHeader(onMenuClick = onMenuClick, title = "首页") }
            )
        }
        composable("settings") {
            SettingsScreen()
        }
    }
}

内容的提问来源于stack exchange，提问作者Dr Mido