如何在Jetpack Compose Material3中实现带对齐调整与动态图标的自定义Snackbar？

要实现带自定义对齐方式和动态图标的Material3 Snackbar，核心是通过SnackbarHost自定义内容布局，以下是分步实现方案：

1. 自定义Snackbar内容组件 #

创建可复用的CustomSnackbarContent，支持传入左右动态图标，同时灵活控制内部元素对齐：

@Composable
fun CustomSnackbarContent(
    data: SnackbarData,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false
) {
    val actionLabel = data.actionLabel
    val actionButton = @Composable {
        actionLabel?.let {
            TextButton(
                onClick = { data.performAction() },
                colors = ButtonDefaults.textButtonColors(
                    contentColor = MaterialTheme.colorScheme.inverseOnSurface
                )
            ) {
                Text(it)
            }
        }
    }

    SnackbarDefaults.SnackbarContainerColor(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 12.dp, vertical = 14.dp),
            verticalAlignment = Alignment.CenterVertically,
            // 可修改此参数调整内部元素分布，比如Arrangement.End让内容靠右
            horizontalArrangement = Arrangement.Start
        ) {
            // 左侧图标
            leadingIcon?.let {
                it()
                Spacer(modifier = Modifier.width(12.dp))
            }

            // 消息文本，占剩余宽度
            Text(
                text = data.message,
                style = MaterialTheme.typography.labelLarge,
                color = MaterialTheme.colorScheme.inverseOnSurface,
                modifier = Modifier.weight(1f)
            )

            // 右侧图标
            trailingIcon?.let {
                Spacer(modifier = Modifier.width(12.dp))
                it()
            }

            // 操作按钮
            actionLabel?.let {
                Spacer(modifier = Modifier.width(16.dp))
                if (actionOnNewLine) {
                    Column {
                        Spacer(modifier = Modifier.height(8.dp))
                        actionButton()
                    }
                } else {
                    actionButton()
                }
            }
        }
    }
}

2. 调整Snackbar的屏幕对齐位置 #

控制Snackbar在屏幕底部的整体位置（左、中、右），修改SnackbarHost的modifier即可：

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

Scaffold(
    snackbarHost = {
        SnackbarHost(
            hostState = snackbarHostState,
            // 让Snackbar靠底部右侧显示，可改为Alignment.BottomLeft/BottomCenter
            modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp)
        ) { data ->
            CustomSnackbarContent(
                data = data,
                // 根据消息类型动态切换左侧图标
                leadingIcon = {
                    when {
                        data.message.contains("成功") -> Icon(Icons.Filled.CheckCircle, null, tint = Color.Green)
                        data.message.contains("错误") -> Icon(Icons.Filled.Error, null, tint = Color.Red)
                        else -> Icon(Icons.Filled.Info, null)
                    }
                }
            )
        }
    }
) { innerPadding ->
    Column(
        modifier = Modifier.padding(innerPadding).fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = {
            coroutineScope.launch {
                snackbarHostState.showSnackbar("操作成功")
            }
        }) {
            Text("显示成功Snackbar")
        }

        Button(onClick = {
            coroutineScope.launch {
                snackbarHostState.showSnackbar("操作失败，请重试", actionLabel = "重试")
            }
        }) {
            Text("显示错误Snackbar")
        }
    }
}

3. 动态图标与对齐的关键细节 #

• 动态图标扩展：leadingIcon和trailingIcon支持传入任意Composable，包括带动画的图标（如AnimatedVisibility或Lottie动画），可根据自定义的Snackbar类型（如扩展SnackbarVisuals添加类型字段）更精准地切换图标。
• 内部元素对齐：修改Row的horizontalArrangement属性，比如Arrangement.SpaceBetween让元素均匀分布，Arrangement.Center让内容居中。
• 容器样式：SnackbarDefaults.SnackbarContainerColor确保符合Material3主题规范，也可替换为自定义颜色。

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