如何在外部跳转时同步更新Bottom Navigation Tab选中状态？

问题场景 #

当前处于File标签页时，点击页面内指向Envelop标签页的链接，页面可成功跳转，但底部导航栏的Envelop Tab未呈现选中状态（如File Tab的红色高亮）。由于跳转未通过点击底部导航按钮触发，导致Tab选中状态未同步更新。

解决方案 #

方案1：跳转后主动调用setSelectedItemId()同步状态 #

通过在页面跳转完成后，主动通知MainActivity更新底部导航的选中状态。

步骤1：在MainActivity中暴露设置选中Tab的方法

// MainActivity.kt
fun setBottomNavSelectedItem(itemId: Int) {
    binding.bottomNavigationView.selectedItemId = itemId
}

步骤2：在ViewModel中添加状态通知逻辑

在触发跳转的ViewModel里，通过LiveData发送目标Tab的ID：

// 对应Fragment的ViewModel
val updateBottomNavEvent = MutableLiveData<Int?>()

fun navigateTo(screen: Screens) {
    // 原有跳转逻辑
    vm.navigateTo(Screens.envelopeScreen())
    
    // 根据目标页面设置对应Tab的ID
    val targetItemId = when(screen) {
        is Screens.envelopeScreen -> UiResources.id.envelope
        is Screens.filesScreen -> UiResources.id.files
        is Screens.homeScreen -> UiResources.home
        is Screens.timeScreen -> UiResources.time
        else -> -1
    }
    updateBottomNavEvent.value = targetItemId
}

步骤3：在MainActivity中监听LiveData更新状态

// MainActivity.kt
viewModel.updateBottomNavEvent.observe(this) { itemId ->
    itemId?.takeIf { it != -1 }?.let {
        binding.bottomNavigationView.selectedItemId = it
        viewModel.updateBottomNavEvent.value = null // 重置事件，避免重复触发
    }
}

方案2：监听页面路由变化，自动同步Tab状态 #

如果使用的路由框架支持页面切换监听，可在MainActivity中统一处理状态同步，无需在每个跳转点单独编写逻辑。

// MainActivity.kt
private fun bottomNavigationView() {
    val tabSelectedListener = BottomNavigationView.OnItemSelectedListener { item ->
        when (item.itemId) {
            UiResources.home -> {
                router.replaceScreen(screensNavigator.getScreen(ScreenOne))
                true
            }
            UiResources.time -> {
                router.navigateTo(screensNavigator.getScreen(ScreenTwo))
                true
            }
            UiResources.id.envelope -> {
                router.navigateTo(screensNavigator.getScreen(ScreenThree))
                true
            }
            UiResources.id.files -> {
                router.navigateTo(screensNavigator.getScreen(ScreenFour))
                true
            }
            else -> false
        }
    }
    binding.bottomNavigationView.setOnItemSelectedListener(tabSelectedListener)

    // 监听路由页面变化，自动同步Tab选中状态
    router.addScreenChangeListener { currentScreen ->
        val targetItemId = when(currentScreen) {
            is ScreenOne -> UiResources.home
            is ScreenTwo -> UiResources.time
            is ScreenThree -> UiResources.id.envelope
            is ScreenFour -> UiResources.id.files
            else -> -1
        }

        if (targetItemId != -1 && binding.bottomNavigationView.selectedItemId != targetItemId) {
            // 临时移除监听器，避免设置selectedItemId时触发重复跳转
            binding.bottomNavigationView.setOnItemSelectedListener(null)
            binding.bottomNavigationView.selectedItemId = targetItemId
            // 重新添加监听器
            binding.bottomNavigationView.setOnItemSelectedListener(tabSelectedListener)
        }
    }
}

注意事项 #

• 设置selectedItemId时，默认会触发OnItemSelectedListener回调，若不想重复执行页面跳转逻辑，需临时移除监听器后再设置，完成后重新添加。
• 确保路由框架的页面监听能准确获取当前显示的页面实例，否则无法匹配到对应的Tab ID。

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