为什么在 Jetpack Compose 的下一页中显示 BottomNavigation？答案

【问题标题】：Why BottomNavigation show in the next page in Jetpack Compose?为什么在 Jetpack Compose 的下一页中显示 BottomNavigation？
【发布时间】：2021-08-31 01:48:30
【问题描述】：

我想在 Jetpack Compose 中使用 Scaffold 和 BottomNavigation 进行导航。它们位于 MainPage 中。但是当我点击 MainPage 中的内容并导航到 DetailPage 时，BottomNavigation 也存在，如图所示：

如何在DetailPage中隐藏BottomNavigation？

【问题讨论】：

请添加您的脚手架源代码

标签： android android-jetpack android-jetpack-compose jetpack-compose-navigation android-jetpack-compose-scaffold

【解决方案1】：

您需要指定您想要显示哪些屏幕以及您不想要哪些屏幕；否则，它将显示在Scaffold 体内的所有屏幕上（您拥有bottomBar）。下面的代码来自我的应用程序。

创建一个状态，观察 navController 上的任何目的地变化

在when 中你可以放置任何你想显示的屏幕navigationBar 否则只需将currentScreen 设置为NoBottomBar

@Composable
private fun NavController.currentScreen(): State<MainSubScreen> {
    val currentScreen = remember { mutableStateOf<MainSubScreen>(MainSubScreen.Home) }

    DisposableEffect(key1 = this) {
        val listener = NavController.OnDestinationChangedListener { _, destination, _ ->
            when {
                destination.hierarchy.any { it.route == MainSubScreen.Home.route } -> {
                    currentScreen.value = MainSubScreen.Home
                } else -> currentScreen.value = MainSubScreen.NoBottomBar
            }
        }
        addOnDestinationChangedListener(listener)
    }
    return currentScreen
}

在您放置底部栏的脚手架上

所以你可以检查 currentScreen 是否是 NoBottomBar 如果是，不要显示它

// initialized currentScreeen above
val currentScreen by navController.currentScreen()

    Scaffold(
        bottomBar = {
            if (currentScreen != MainSubScreen.NoBottomBar) {
                MainBottomNavigation()
            } else Unit
        }
    ) {
        // Your screen
    }

【讨论】：

这是一个好方法。但是我通过 ViewModel 保存状态来完成它。我已经发布了我的答案。

【解决方案2】：

这取决于您放置 NavHost 的位置。如果它包裹了你的 Scaffold，那么你导航 Composable 覆盖整个屏幕

NavHost(
    navController = navController,
    startDestination = "start_destination"
) {
     composable(route = "start_destination") { ->
        Scaffold(){...}
    }
}

如果 NavHost 位于 content: @Composable (PaddingValues) -> Unit 内，则当您在 TopAbbpar、Tabs 或 BottomNavigation 保持在屏幕上时进行导航

【讨论】：

我认为这种方式违背了 Scaffold 的意图。所以我通过 ViewModel 保存状态来完成它。我已经发布了我的答案。

【解决方案3】：

我喜欢一种方法。
尝试使用ViewModle来控制BottomNavigation的可见性，进入MainPage时显示，离开MainPage时隐藏

// ViewModel
class VM: ViewModel() {
  private val _state: MutableLiveData<Boolean> = MutableLiveData(true)
  val state: LiveData<Boolean> get() = _state
  fun setState(status: Boolean) {
      _state.postValue(status)
  }
}


// MainPage
@Compose MainPage(vm: VM) {
  LaunchedEffect(key1 = true) {
    vm.setState(true)
  }

  DisposableEffect(key1 = true) {
    onDispose {
      vm.setState(false)
    }
  }
}


// page contains Scaffold
@Composable
fun Greeting(vm: VM) {
  // State of BottomNavigation`s visibility
  val state = remember { mutableStateOf<Boolean>(true) }
  // read the BottomNavigation`s visibility from ViewModel and send to State
  vm.state.observeAsState().value?.let { state.value = it }

  Scaffold(bottomBar = {
    // show / hide BottomNavigation controlled by State
    state.takeIf { it.value }?.let {
        BottomNavigation {
            list.forEachIndexed { index, label ->
                BottomNavigationItem(
                    label = { Text(text = label) },
                    selected = index == selectedItem.value,
                    onClick = { selectedItem.value = index },
                    icon = {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_launcher_foreground),
                            contentDescription = null
                        )
                    })
            }
        }
    }
  }) {
    NavHost(navController = navController, startDestination = "one") {
        composable(route = "one") { PageList(navController, vm) }
        composable(route = "detail") { PageDetail(vm) }
      }
    }
  }

如果不想快速隐藏BottomNavigation，可以在Navigation之前隐藏BottomNavigation。

【讨论】：