Compose返回动画期间已出栈组件仍响应点击的问题求助

核心思路 #

利用导航返回栈条目（NavBackStackEntry）的生命周期状态，仅当当前页面处于活跃状态（RESUMED及以上）时，才响应组件的点击事件。既保留页面返回动画，又能避免已出栈的Screen B在动画期间触发点击，同时不影响Screen A的有效点击。

具体实现方案 #

在Screen B的可点击组件中，添加生命周期状态判断：

1. 监听生命周期变化维护活跃状态（推荐）：

@Composable
fun ScreenB(navController: NavHostController) {
    val navBackStackEntry = navController.currentBackStackEntryAsState().value
    var isScreenActive by remember { mutableStateOf(false) }

    // 仅当页面处于RESUMED状态时标记为活跃，离开后自动置为非活跃
    LaunchedEffect(navBackStackEntry?.lifecycle) {
        navBackStackEntry?.lifecycle?.repeatOnLifecycle(Lifecycle.State.RESUMED) {
            isScreenActive = true
        }
        isScreenActive = false
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .clickable(enabled = isScreenActive) {
                Log.d("ScreenB", "Clicked on B ")
            },
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Screen B")
    }
}

2. 简化版直接判断状态：

@Composable
fun ScreenB(navController: NavHostController) {
    val navBackStackEntry = navController.currentBackStackEntryAsState().value
    val isScreenActive = navBackStackEntry?.lifecycle?.currentState?.isAtLeast(Lifecycle.State.RESUMED) == true

    Box(
        modifier = Modifier
            .fillMaxSize()
            .clickable(enabled = isScreenActive) {
                if (isScreenActive) {
                    Log.d("ScreenB", "Clicked on B ")
                }
            },
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Screen B")
    }
}

方案优势 #

• 仅在Screen B内部控制点击有效性，完全不影响Screen A的交互逻辑，解决了之前拦截方案导致的Screen A有效点击丢失问题。
• 基于Jetpack导航的原生生命周期机制，与Compose状态管理天然兼容，稳定性高。
• 不打断页面返回动画的展示，满足保留动画的需求。

补充说明 #

已启用的strong skipping不会影响该方案有效性，生命周期状态判断基于导航栈实际状态，与Compose重组优化机制完全兼容。

内容的提问来源于stack exchange，提问作者Muhammad Ahmed AbuTalib