Jetpack Compose如何实现Snackbar动态避障不遮挡底部重要元素

核心逻辑和你之前View体系的思路完全对齐，只是适配Compose的声明式特性做了实现调整，全程不需要写if-else判断元素可见性，只要给需要避让的组件加一行Modifier标注即可。

核心原理 #

你提到的CompositionLocal不用存单个元素的位置信息，只要存一个全局可观测的状态管理器，所有带避让标记的组件通过Modifier自动上报自身位置和可见性到这个管理器，Snackbar宿主监听管理器的状态自动计算避让距离即可。

完整实现代码 #

1. 定义状态管理器与CompositionLocal #

import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

class SnackbarAvoidanceState {
    // 存储所有当前可见避让元素的顶部Y坐标（相对于根布局），key为元素唯一标识
    private val _avoidElementTopYs = mutableStateMapOf<Any, Float>()

    // 对外暴露所有避让元素中最靠上的Y坐标（Y值越小越靠近屏幕顶部），无元素时返回null
    val minAvoidTopY: Float? get() = _avoidElementTopYs.values.minOrNull()

    fun addAvoidElement(elementKey: Any, topY: Float) {
        _avoidElementTopYs[elementKey] = topY
    }

    fun removeAvoidElement(elementKey: Any) {
        _avoidElementTopYs.remove(elementKey)
    }
}

// 用于传递状态管理器的CompositionLocal
val LocalSnackbarAvoidanceState = compositionLocalOf<SnackbarAvoidanceState> {
    error("请先在根布局初始化SnackbarAvoidanceState并通过CompositionLocal向下传递")
}

@Composable
fun ProvideSnackbarAvoidanceState(
    state: SnackbarAvoidanceState,
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalSnackbarAvoidanceState provides state) {
        content()
    }
}

2. 定义避让标记Modifier #

fun Modifier.avoidSnackbarOverlay(): Modifier = composed {
    val avoidanceState = LocalSnackbarAvoidanceState.current
    // 生成当前元素的唯一标识
    val elementKey = remember { Any() }

    this.onGloballyPositioned { coordinates ->
        // 判断元素是否处于可见状态
        val isVisible = coordinates.isAttached 
            && coordinates.size.width > 0 
            && coordinates.size.height > 0
        if (isVisible) {
            // 上报当前元素相对于根布局的顶部Y坐标
            avoidanceState.addAvoidElement(elementKey, coordinates.positionInRoot().y)
        } else {
            avoidanceState.removeAvoidElement(elementKey)
        }
    }.onDispose {
        // 元素被移除时同步删除位置信息
        avoidanceState.removeAvoidElement(elementKey)
    }
}

3. 适配Snackbar宿主 #

在根布局的Scaffold中初始化状态，并调整Snackbar的位置：

import androidx.compose.material.Scaffold
import androidx.compose.material.SnackbarHost
import androidx.compose.material.SnackbarHostState

@Composable
fun AppRoot(content: @Composable () -> Unit) {
    val avoidanceState = remember { SnackbarAvoidanceState() }
    val snackbarHostState = remember { SnackbarHostState() }
    val density = LocalDensity.current
    val screenHeightPx = with(density) {
        LocalConfiguration.current.screenHeightDp.dp.toPx()
    }

    ProvideSnackbarAvoidanceState(avoidanceState) {
        Scaffold(
            snackbarHost = {
                SnackbarHost(
                    hostState = snackbarHostState,
                    modifier = Modifier.padding(
                        bottom = avoidanceState.minAvoidTopY?.let { topY ->
                            // 计算Snackbar需要的底部边距：屏幕高度 - 最靠上避让元素的顶部Y坐标
                            with(density) { (screenHeightPx - topY).toDp() }
                        } ?: 16.dp // 无避让元素时的默认底部边距
                    )
                )
            }
        ) { innerPadding ->
            androidx.compose.foundation.layout.Box(
                modifier = androidx.compose.ui.Modifier.padding(innerPadding)
            ) {
                content()
            }
        }
    }
}

使用方式 #

任何需要Snackbar避让的组件，直接加上avoidSnackbarOverlay() Modifier即可，不管元素是显示/隐藏、动态添加/移除，都会自动适配：

// 底部导航栏
 androidx.compose.material.BottomNavigation(
    modifier = Modifier.avoidSnackbarOverlay()
) { /* 导航内容 */ }

// 悬浮操作按钮
androidx.compose.material.FloatingActionButton(
    onClick = { /* 点击逻辑 */ },
    modifier = Modifier.avoidSnackbarOverlay()
) { /* 按钮内容 */ }

// 任意自定义底部组件
CustomBottomBanner(
    visible = showBanner,
    modifier = Modifier.avoidSnackbarOverlay()
) { /*  banner内容 */ }

注意事项 #

如果你的Snackbar宿主不是在根层级，只需要把上报坐标的positionInRoot()改为positionInParent()（或者对应Snackbar宿主的坐标）即可适配。

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