Jetpack Compose中如何设置Snackbar动态显示位置

核心逻辑为全局维护可观察的底部偏移状态，自定义根Scaffold的Snackbar容器应用该偏移，带底部导航的页面在生命周期内同步底部栏实际高度到全局状态，页面退出时重置偏移，即可实现Snackbar位置自动适配，不会被底部导航遮挡。

具体实现步骤 #

• 定义全局CompositionLocal传递偏移状态
  用于在所有子页面共享Snackbar需要预留的底部边距，默认值为0（即无底部导航时Snackbar贴底显示）

  import androidx.compose.runtime.compositionLocalOf
  import androidx.compose.ui.unit.Dp
  import androidx.compose.runtime.MutableState
  
  val LocalSnackbarBottomPadding = compositionLocalOf<MutableState<Dp>> { 
      error("Snackbar padding state not initialized") 
  }
  

• 自定义尺寸监听修饰符，用于获取底部导航的实际渲染高度

  import androidx.compose.ui.Modifier
  import androidx.compose.ui.layout.onSizeChanged
  import androidx.compose.ui.unit.toDp
  
  fun Modifier.onMeasureHeight(
      onHeightChange: (Dp) -> Unit
  ): Modifier = this.then(
      Modifier.onSizeChanged { size ->
          onHeightChange(size.height.toDp())
      }
  )
  

• 改造根页面MainScreen，自定义SnackbarHost应用动态边距
  不再使用Scaffold默认的SnackbarHost，手动给Snackbar容器加上全局状态对应的底部内边距，同时把偏移状态通过CompositionLocal下发到所有子页面

  import androidx.compose.runtime.remember
  import androidx.compose.foundation.layout.padding
  import androidx.compose.material.Scaffold
  import androidx.compose.material.SnackbarHost
  import androidx.compose.material.rememberScaffoldState
  import androidx.navigation.compose.rememberNavController
  import androidx.navigation.compose.NavHost
  import androidx.navigation.compose.composable
  import androidx.compose.runtime.mutableStateOf
  import androidx.compose.ui.unit.dp
  import androidx.compose.runtime.CompositionLocalProvider
  
  @Composable
  fun MainScreen() {
      val navController = rememberNavController()
      val scaffoldState = rememberScaffoldState()
      // 维护全局Snackbar底部偏移状态，默认0dp
      val snackbarBottomPadding = remember { mutableStateOf(0.dp) }
  
      Scaffold(
          scaffoldState = scaffoldState,
          // 重写SnackbarHost，应用动态底部边距
          snackbarHost = { hostState ->
              SnackbarHost(
                  hostState = hostState,
                  modifier = Modifier.padding(bottom = snackbarBottomPadding.value)
              )
          }
      ) { innerPadding ->
          // 下发偏移状态到所有子页面
          CompositionLocalProvider(
              LocalSnackbarBottomPadding provides snackbarBottomPadding
          ) {
              NavHost(
                  navController = navController,
                  startDestination = "first",
                  modifier = Modifier.padding(innerPadding)
              ) {
                  composable("first") { FirstScreen() }
                  composable("second") { SecondScreen() }
                  // 其余根页面直接按规则注册即可
              }
          }
      }
  }
  

• 改造带底部导航的容器页面（示例为SecondScreen）
  页面进入时监听底部导航的高度同步到全局状态，页面退出时将偏移重置为0，避免影响其他无底部导航的页面

  import androidx.compose.material.Scaffold
  import androidx.compose.runtime.DisposableEffect
  import androidx.compose.foundation.layout.Box
  
  // 包含底部导航的容器页面
  @Composable
  fun SecondScreen() {
      val snackbarPadding = LocalSnackbarBottomPadding.current
      
      // 页面销毁时重置偏移为0
      DisposableEffect(Unit) {
          onDispose {
              snackbarPadding.value = 0.dp
          }
      }
  
      Scaffold(
          bottomBar = {
              MyBottomBar(
                  // 监听底部导航实际高度，同步到全局状态
                  modifier = Modifier.onMeasureHeight { barHeight ->
                      snackbarPadding.value = barHeight
                  }
              )
          }
      ) { innerPadding ->
          // 容器内部的子NavHost、页面内容放在这里即可
          // 内部所有子页面调用全局snackbarHostState显示提示时，都会自动适配底部边距
          Box(modifier = Modifier.padding(innerPadding))
      }
  }
  

无底部导航页面处理 #

类似FirstScreen这类没有底部导航的页面不需要做任何额外代码改造，全局偏移默认是0dp，Snackbar会直接显示在屏幕最底部，符合需求。

扩展适配说明 #

• 该方案支持任意层级的嵌套导航，只要带底部导航的容器正确实现高度上报和销毁重置逻辑，容器下所有子页面的Snackbar都会自动适配位置
• 如果底部导航有动态显示/隐藏、高度变化的逻辑，onMeasureHeight会自动捕获高度变化更新偏移，Snackbar位置会同步调整，不需要额外编写监听逻辑
• 全局统一使用根Scaffold的scaffoldState.snackbarHostState触发Snackbar即可，不要在嵌套Scaffold中重复维护Snackbar状态，避免出现多Snackbar重叠的问题

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