Jetpack Compose中Snackbar未显示在屏幕底部问题求助

我点击按钮尝试显示Snackbar，但它没有出现在屏幕底部。目前的实现是在DisplaySnackBarOnClik的Column中处理按钮逻辑，MySnackbar函数负责显示逻辑。附上当前代码和显示位置截图：

@Composable 
fun DisplaySnackBarOnClik() {

    var canShowSnackBar by remember {
        mutableStateOf(false)
    }

Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(5.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {


Button(
              onClick = { canShowSnackBar = ! canShowSnackBar },
              modifier = modifier,
              enabled = isEnabled,
              elevation =  ButtonDefaults.elevation(
                       defaultElevation = 10.dp,
                       pressedElevation = 15.dp,
                       disabledElevation = 0.dp
             ),
             colors = ButtonDefaults.buttonColors(
             backgroundColor = colorResource(R.color.cgux_primary_700),
             contentColor = colorResource(R.color.white)
        )
            ) {
        Text(text = "Show Snack Bar")
    }

 if (canShowSnackBar) {
            MySnackbar("Hello, Snackbar!", "Dismiss")
        }

}


@Composable fun MySnackbar(
    message: String, actionLabel: String, duration: SnackbarDuration = SnackbarDuration.Short
) {
    val snackbarHostState = remember { SnackbarHostState() }

    LaunchedEffect(snackbarHostState) {
        snackbarHostState.showSnackbar(message, actionLabel, duration = duration)
    }
    Box(
        Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter
    ) {
        SnackbarHost(
            hostState = snackbarHostState
        )
    }
}

问题原因 #

1. 布局层级错误：你把MySnackbar放在了带verticalScroll的Column内部，Column仅设置了fillMaxWidth而非fillMaxSize，导致MySnackbar里的Box(fillMaxSize)是相对于Column的高度，而非整个屏幕高度，所以Snackbar只能显示在Column的范围内。
2. 状态管理不当：每次触发canShowSnackBar时，都会重新创建SnackbarHostState，无法正确维护Snackbar的显示状态。

修复方案 #

推荐使用Jetpack Compose官方推荐的Scaffold组件管理Snackbar，它会自动将Snackbar定位在屏幕底部，同时优化状态逻辑：

@Composable 
fun DisplaySnackBarOnClick() {
    var canShowSnackBar by remember { mutableStateOf(false) }
    // 全局维护Snackbar状态，避免重复创建
    val snackbarHostState = remember { SnackbarHostState() }

    Scaffold(
        snackbarHost = { SnackbarHost(hostState = snackbarHostState) }
    ) { innerPadding ->
        // 使用innerPadding避免内容被Snackbar遮挡
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxSize()
                .padding(innerPadding),
            verticalArrangement = Arrangement.spacedBy(5.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = { canShowSnackBar = !canShowSnackBar },
                enabled = true, // 原代码isEnabled未定义，这里暂时设为true
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 10.dp,
                    pressedElevation = 15.dp,
                    disabledElevation = 0.dp
                ),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = colorResource(R.color.cgux_primary_700),
                    contentColor = colorResource(R.color.white)
                )
            ) {
                Text(text = "Show Snack Bar")
            }
        }
    }

    // 根据状态触发Snackbar，显示后重置状态避免重复触发
    LaunchedEffect(canShowSnackBar) {
        if (canShowSnackBar) {
            snackbarHostState.showSnackbar(
                message = "Hello, Snackbar!",
                actionLabel = "Dismiss",
                duration = SnackbarDuration.Short
            )
            canShowSnackBar = false
        }
    }
}

修改说明 #

• Scaffold自动定位：Scaffold的snackbarHost参数会自动将Snackbar固定在屏幕底部，无需手动调整布局。
• 全局状态维护：将SnackbarHostState提升到Scaffold外部，确保状态稳定不被频繁重建。
• 优化布局适配：给Column添加innerPadding，避免页面内容被Snackbar遮挡。
• 状态逻辑优化：Snackbar显示后自动重置canShowSnackBar，避免重复触发。

如果不想使用Scaffold，也可以用Box包裹整个布局，将SnackbarHost放在最外层底部：

@Composable 
fun DisplaySnackBarOnClick() {
    var canShowSnackBar by remember { mutableStateOf(false) }
    val snackbarHostState = remember { SnackbarHostState() }

    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(5.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(
                onClick = { canShowSnackBar = !canShowSnackBar },
                enabled = true,
                elevation = ButtonDefaults.elevation(
                    defaultElevation = 10.dp,
                    pressedElevation = 15.dp,
                    disabledElevation = 0.dp
                ),
                colors = ButtonDefaults.buttonColors(
                    backgroundColor = colorResource(R.color.cgux_primary_700),
                    contentColor = colorResource(R.color.white)
                )
            ) {
                Text(text = "Show Snack Bar")
            }
        }

        // 将SnackbarHost固定在屏幕底部
        SnackbarHost(
            hostState = snackbarHostState,
            modifier = Modifier.align(Alignment.BottomCenter)
        )
    }

    LaunchedEffect(canShowSnackBar) {
        if (canShowSnackBar) {
            snackbarHostState.showSnackbar(
                message = "Hello, Snackbar!",
                actionLabel = "Dismiss",
                duration = SnackbarDuration.Short
            )
            canShowSnackBar = false
        }
    }
}

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