原Snackbar弹窗行为为何变更？使用SnackbarHost如何恢复？

算力阿峰

2026-7-1

Snackbar弹窗位置差异的原因及恢复原生行为的方法

行为变更的原因

原生View体系的Snackbar遵循Material Design 1规范，默认绑定到屏幕底部的CoordinatorLayout（或父布局），设计初衷就是从底部弹出，用于展示底部操作的反馈提示。
Compose的SnackbarHost基于Material Design 3的默认实现，MD3对Snackbar的交互场景做了调整，默认的SnackbarHost布局逻辑将Snackbar置于屏幕中部——这是Compose Material库的独立设计选择，没有沿用原生View体系的底部绑定逻辑。

用SnackbarHost恢复原生弹窗行为

当然可以，只需自定义SnackbarHost的布局就能实现底部弹出效果，具体操作如下：

创建SnackbarHostState实例，在构建SnackbarHost时手动控制布局位置参数。
利用Compose布局修饰器，比如Modifier.align(Alignment.BottomCenter)搭配padding(bottom = 16.dp)（模拟原生边距），将Snackbar固定在屏幕底部。
示例代码：

val snackbarHostState = remember { SnackbarHostState() }
val coroutineScope = rememberCoroutineScope()

Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState) { snackbarData ->
            Snackbar(
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(bottom = 16.dp),
                snackbarData = snackbarData
            )
        }
    }
) { paddingValues ->
    Button(
        onClick = {
            coroutineScope.launch {
                snackbarHostState.showSnackbar("这是底部弹出的Snackbar")
            }
        },
        modifier = Modifier.padding(paddingValues)
    ) {
        Text("显示Snackbar")
    }
}