如何在Jetpack Compose中自定义Toast？需修改文字颜色

Jetpack Compose本身没有提供原生Toast组件，我们仍需基于Android系统Toast API实现自定义，或者用更适配Compose设计的Snackbar替代，以下是两种可行方案：

方案1：自定义Compose布局的Toast #

通过ComposeView将Composable内容嵌入系统Toast，实现完全自定义样式：

步骤1：定义Toast的Composable内容 #

@Composable
fun CustomToastContent(message: String) {
    Surface(
        color = Color.DarkGray.copy(alpha = 0.8f),
        shape = RoundedCornerShape(8.dp),
        padding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
    ) {
        Text(
            text = message,
            color = Color.Green, // 这里设置你需要的文字颜色
            fontSize = 14.sp
        )
    }
}

步骤2：封装显示Toast的函数 #

fun showCustomToast(context: Context, message: String) {
    val toast = Toast(context).apply {
        view = ComposeView(context).apply {
            setContent {
                CustomToastContent(message = message)
            }
        }
        duration = Toast.LENGTH_SHORT
    }
    toast.show()
}

步骤3：在Compose中调用 #

@Composable
fun CustomToastDemo() {
    val context = LocalContext.current
    Button(onClick = {
        showCustomToast(context, "这是自定义文字颜色的Toast")
    }) {
        Text(text = "显示自定义Toast")
    }
}

方案2：用Snackbar替代Toast（推荐） #

Toast是系统级组件，部分ROM可能强制覆盖其样式，而Snackbar是Compose原生组件，样式完全可控，更适配现代应用设计：

基础用法（自定义文字颜色） #

@Composable
fun SnackbarAsToastDemo() {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()

    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState) { data ->
                Snackbar(
                    snackbarData = data,
                    modifier = Modifier.padding(16.dp)
                ) {
                    Text(
                        text = data.message,
                        color = Color.White // 自定义文字颜色
                    )
                }
            }
        }
    ) { padding ->
        Column(
            modifier = Modifier.padding(padding).fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar(
                        message = "用Snackbar替代Toast",
                        duration = SnackbarDuration.Short
                    )
                }
            }) {
                Text(text = "显示Snackbar")
            }
        }
    }
}

注意：Snackbar默认绑定到Scaffold，若不需要Scaffold，也可单独使用Snackbar组件实现类似Toast的悬浮提示。

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