Jetpack Compose实现Snackbar显示在FAB下方的问题

要实现Snackbar显示在FAB下方，核心是自定义Scaffold的SnackbarHost布局位置，避开默认的底部区域重叠逻辑。以下是具体实现方案：

方案思路 #

默认情况下，Scaffold的SnackbarHost与FAB共享底部区域，Snackbar会自动显示在FAB上方（或顶起FAB）。要让Snackbar移到FAB下方，需要：

1. 自定义SnackbarHost的位置，给它添加足够的底部内边距，留出FAB的显示空间
2. 可选：动态获取FAB的实际尺寸，确保内边距适配不同的FAB样式

代码实现 #

基础版（适配标准FAB） #

如果使用标准尺寸的FAB（56dp高），可以直接给SnackbarHost添加固定的底部内边距：

@Composable
fun snackBarDemo() {
    val coroutineScope = rememberCoroutineScope()
    val snackBarHostState = remember { SnackbarHostState() }
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scaffoldState = rememberScaffoldState(drawerState, snackbarHostState)
    // 标准FAB高度+间距，确保Snackbar在FAB下方
    val fabBottomPadding = 56.dp + 16.dp

    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {},
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        scaffoldState.snackbarHostState.showSnackbar("Hello this is my snackbar")
                    }
                }) {
                Icon(
                    painter = painterResource(id = R.drawable.icon),
                    contentDescription = "操作图标",
                    modifier = Modifier.padding(start = 5.dp, top = 2.dp)
                )
            }
        },
        // 自定义SnackbarHost位置
        snackbarHost = { hostState ->
            SnackbarHost(
                hostState = hostState,
                modifier = Modifier
                    .padding(bottom = fabBottomPadding)
                    .align(Alignment.BottomCenter)
            )
        }
    ) {}
}

进阶版（动态适配自定义FAB） #

如果FAB有自定义尺寸或偏移，可通过onGloballyPositioned获取FAB的实际尺寸，动态调整Snackbar的位置：

@Composable
fun snackBarDemo() {
    val coroutineScope = rememberCoroutineScope()
    val snackBarHostState = remember { SnackbarHostState() }
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scaffoldState = rememberScaffoldState(drawerState, snackbarHostState)
    
    // 存储FAB的实际尺寸
    val fabSize = remember { mutableStateOf(IntSize.Zero) }
    val fabBottomPadding = with(LocalDensity.current) {
        (fabSize.value.height + 16).toDp()
    }

    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {},
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        scaffoldState.snackbarHostState.showSnackbar("Hello this is my snackbar")
                    }
                },
                modifier = Modifier
                    .onGloballyPositioned { coordinates ->
                        // 获取FAB的实际尺寸
                        fabSize.value = coordinates.size
                    }
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.icon),
                    contentDescription = "操作图标",
                    modifier = Modifier.padding(start = 5.dp, top = 2.dp)
                )
            }
        },
        snackbarHost = { hostState ->
            SnackbarHost(
                hostState = hostState,
                modifier = Modifier
                    .padding(bottom = fabBottomPadding)
                    .align(Alignment.BottomCenter)
            )
        }
    ) {}
}

方案说明 #

• 通过自定义snackbarHost参数，完全控制了Snackbar的布局容器位置，避免了默认的FAB与Snackbar重叠逻辑
• 基础版适合使用标准FAB的场景，实现简单；进阶版适配自定义尺寸或偏移的FAB，兼容性更强
• 这种方式不会让Snackbar跟随FAB的偏移移动，因为Snackbar的位置基于屏幕底部的固定内边距，而非FAB的位置

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