Jetpack Compose中Snackbar被Scaffold顶部栏遮挡问题求助

问题根源 #

你的代码存在两个核心问题：

• Scaffold的snackbarHost参数错误传入了SnackbarHostState，而非自定义的SnackbarHost Composable，导致默认Snackbar布局生效。
• 自定义MySnackbar内部嵌套了SnackbarHost并放在Scaffold的content区域，受Scaffold内部布局约束，被TopAppBar遮挡。

解决方案 #

1. 重构自定义Snackbar内容 #

将UI部分与SnackbarHost分离，专注于展示自定义样式：

@Composable
fun CustomSnackbarContent(
    snackbarData: SnackbarData,
    indicatorColor: Color,
    onDismiss: () -> Unit
) {
    Row(
        modifier = Modifier
            .padding(horizontal = 25.dp, vertical = 16.dp)
            .height(56.dp)
            .background(color = dashBG, shape = RoundedCornerShape(28.dp))
            .shadow(elevation = 5.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .padding(start = 16.dp)
                .size(24.dp)
                .background(indicatorColor, CircleShape)
                .padding(4.dp),
            imageVector = Icons.Outlined.Close,
            contentDescription = "snackbar indicator"
        )
        Text(
            modifier = Modifier.padding(start = 12.dp),
            text = snackbarData.message,
            color = Color.White,
            fontWeight = FontWeight(600),
            fontSize = 15.sp,
            fontFamily = fontFamily
        )
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.CenterEnd
        ) {
            Image(
                modifier = Modifier
                    .size(12.dp)
                    .clickable(onClick = onDismiss),
                imageVector = Icons.Outlined.Close,
                contentDescription = "dismiss snackbar",
                colorFilter = ColorFilter.tint(Color.White)
            )
        }
    }
}

2. 修改主界面布局，调整Snackbar层级和位置 #

使用Box包裹Scaffold，让SnackbarHost叠加在Scaffold上层（包括TopAppBar上方），同时修正布局逻辑：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CommunityScreen(
    padding: PaddingValues
) {
    val snackbarHostState = remember { SnackbarHostState() }

    Box(modifier = Modifier.fillMaxSize()) {
        // 主界面Scaffold
        Scaffold(
            topBar = {
                CenterAlignedTopAppBar(
                    title = {
                        Text(
                            text = "Community",
                            fontFamily = fontFamily,
                            fontWeight = FontWeight(600),
                            fontSize = 26.sp
                        )
                    },
                    colors = TopAppBarDefaults.smallTopAppBarColors(
                        containerColor = BGMain
                    )
                )
            },
            modifier = Modifier.fillMaxSize(),
            containerColor = BGMain
        ) { values ->
            Column(
                modifier = Modifier
                    .padding(values)
                    .padding(padding)
                    .padding(top = 20.dp)
                    .fillMaxSize()
                    .background(Color.White, RoundedCornerShape(8.dp))
            ) {
                // 页面内容区域
            }
        }

        // 独立的SnackbarHost，显示在TopAppBar上方
        SnackbarHost(
            hostState = snackbarHostState,
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = 16.dp) // 调整与屏幕顶部的间距
        ) { snackbarData ->
            CustomSnackbarContent(
                snackbarData = snackbarData,
                indicatorColor = Color.Red,
                onDismiss = { snackbarHostState.currentSnackbarData?.dismiss() }
            )
        }
    }

    // 触发Snackbar显示
    LaunchedEffect(key1 = true) {
        delay(500L)
        snackbarHostState.showSnackbar(
            message = "Profile Verification failed!",
            actionLabel = null,
            duration = SnackbarDuration.Short
        )
    }
}

关键调整说明 #

• 层级控制：通过Box布局让SnackbarHost处于Scaffold的上层，避免被TopAppBar遮挡。
• 位置调整：使用Modifier.align(Alignment.TopCenter)和padding控制Snackbar在屏幕顶部的显示位置。
• 逻辑拆分：将Snackbar的状态管理与UI展示分离，避免嵌套布局导致的约束冲突。

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