如何为rememberScaffoldState的SnackbarHostState添加Modifier调整样式与位置？

要修改Snackbar的位置（顶部/底部）和颜色，核心是替换Scaffold默认的SnackbarHost，自定义Snackbar的布局和样式。以下是具体实现步骤：

1. 修改Scaffold配置，添加自定义SnackbarHost #

在你的SnackbarDemoApp的Scaffold中，新增snackbarHost参数，替换默认的Snackbar宿主：

@Composable
fun SnackbarDemoApp() {
    SnackbarDemoTheme {
        val appState: SnackbarDemoAppState = rememberSnackbarDemoAppState()

        Scaffold(
            scaffoldState = appState.scaffoldState,
            // 自定义SnackbarHost
            snackbarHost = { hostState ->
                SnackbarHost(hostState) { snackbarData ->
                    // 调用我们的自定义Snackbar
                    CustomPositionedSnackbar(
                        snackbarData = snackbarData,
                        backgroundColor = Color(0xFF333333),
                        isTopAligned = false // false=底部显示，true=顶部显示
                    )
                }
            }
        ) {
            MyNavigation(
                navController = appState.navController,
                showSnackbar = { message, duration ->
                    appState.showSnackbar(message = message, duration = duration)
                }
            )
        }
    }
}

2. 实现自定义位置和样式的Snackbar组件 #

创建一个CustomPositionedSnackbar组件，通过Modifier控制位置，同时自定义背景色、文字颜色等样式：

@Composable
fun CustomPositionedSnackbar(
    snackbarData: SnackbarData,
    backgroundColor: Color,
    isTopAligned: Boolean
) {
    // 控制位置的Modifier：顶部/底部的边距
    val positionModifier = if (isTopAligned) {
        Modifier.padding(top = 16.dp)
    } else {
        Modifier.padding(bottom = 16.dp)
    }

    // 用Box控制Snackbar的整体对齐
    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = if (isTopAligned) Alignment.TopCenter else Alignment.BottomCenter
    ) {
        Snackbar(
            modifier = positionModifier.fillMaxWidth(0.9f), // 限制宽度，更美观
            backgroundColor = backgroundColor,
            contentColor = Color.White, // 文字颜色
            snackbarData = snackbarData
        )
    }
}

3. 更灵活的自定义：完全重写Snackbar布局 #

如果你需要更精细的样式控制（比如自定义按钮、圆角），可以完全重写Snackbar的布局：

@Composable
fun CustomPositionedSnackbar(
    snackbarData: SnackbarData,
    backgroundColor: Color,
    isTopAligned: Boolean
) {
    val positionModifier = if (isTopAligned) {
        Modifier.padding(top = 16.dp)
    } else {
        Modifier.padding(bottom = 16.dp)
    }

    Box(
        modifier = Modifier.fillMaxWidth(),
        contentAlignment = if (isTopAligned) Alignment.TopCenter else Alignment.BottomCenter
    ) {
        Surface(
            color = backgroundColor,
            shape = RoundedCornerShape(12.dp), // 自定义圆角
            elevation = 8.dp,
            modifier = positionModifier.fillMaxWidth(0.9f)
        ) {
            Row(
                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 消息文本
                Text(
                    text = snackbarData.message,
                    color = Color.White,
                    modifier = Modifier.weight(1f)
                )
                // 操作按钮
                snackbarData.actionLabel?.let { label ->
                    TextButton(
                        onClick = { snackbarData.performAction() },
                        contentColor = Color.Yellow
                    ) {
                        Text(text = label, fontWeight = FontWeight.Bold)
                    }
                }
            }
        }
    }
}

关键说明 #

• 自定义SnackbarHost后，原来的appState.showSnackbar调用逻辑完全不需要修改，因为我们依然使用了原有的SnackbarHostState。
• 通过isTopAligned参数可以快速切换Snackbar显示在顶部或底部，调整padding值可以控制与屏幕边缘的距离。
• 修改backgroundColor、contentColor等参数即可自定义颜色样式。

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