如何在Compose Navigation内层页面处理底部导航按钮二次点击

要实现二次点击同一底部导航按钮时，让内层页面执行自定义操作（如内容上滚），核心是利用currentBackStackEntryAsState获取当前页面的BackStackEntry，并通过其savedStateHandle传递事件，内层页面监听该事件触发操作。

实现步骤 #

1. 底部导航栏处理二次点击事件 #

在底部导航项的点击逻辑中，判断是否点击了当前已选中的标签：

• 如果是，通过当前BackStackEntry的savedStateHandle设置一个触发标记
• 如果不是，执行常规导航逻辑

val navController = rememberNavController()
val currentDestination = navController.currentBackStackEntryAsState().value?.destination

BottomNavigation {
    // 假设navItems是你的标签页配置列表，包含route、icon、label等
    navItems.forEach { item ->
        val isSelected = currentDestination?.hierarchy?.any { it.route == item.route } == true
        
        BottomNavigationItem(
            selected = isSelected,
            onClick = {
                if (isSelected) {
                    // 二次点击同一标签，发送滚动触发事件
                    navController.currentBackStackEntry?.savedStateHandle?.set(
                        key = "TriggerScrollToTop",
                        value = true
                    )
                } else {
                    // 常规导航：避免重复入栈，保留状态
                    navController.navigate(item.route) {
                        popUpTo(navController.graph.startDestinationId) { saveState = true }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            },
            icon = { Icon(item.icon, contentDescription = item.label) },
            label = { Text(item.label) }
        )
    }
}

2. 内层页面监听事件并执行操作 #

在内层页面（如带滚动列表的页面）中，通过currentBackStackEntryAsState获取当前BackStackEntry，监听savedStateHandle中的标记变化，触发自定义操作（如滚动到顶部）。

@Composable
fun HomeScreen() {
    val navController = rememberNavController()
    val scrollState = rememberLazyListState()
    val currentBackStackEntry = navController.currentBackStackEntryAsState().value

    // 监听二次点击触发的事件
    LaunchedEffect(currentBackStackEntry?.savedStateHandle?.getStateFlow("TriggerScrollToTop", false)) {
        currentBackStackEntry?.savedStateHandle?.getStateFlow("TriggerScrollToTop", false)?.collect { shouldTrigger ->
            if (shouldTrigger) {
                // 执行自定义操作：滚动到列表顶部
                scrollState.animateScrollToItem(index = 0)
                // 重置标记，避免重复触发
                currentBackStackEntry.savedStateHandle["TriggerScrollToTop"] = false
            }
        }
    }

    // 页面内容示例：带滚动的列表
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text(
                text = "列表项 $index",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            )
        }
    }
}

关键说明 #

• savedStateHandle：作为BackStackEntry的状态容器，用于在导航组件和页面之间传递临时事件，与页面生命周期绑定，不会造成内存泄漏。
• StateFlow监听：使用getStateFlow将标记转为可观察流，确保每次标记变化都能触发操作；触发后重置标记，避免重复响应同一事件。
• 嵌套导航场景：如果每个标签页是独立的嵌套导航图，需通过navController.getBackStackEntry(item.route)获取对应标签页的BackStackEntry，再设置savedStateHandle，内层页面同样监听自身所属导航图的BackStackEntry即可。

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