如何在Android Compose中实现类似谷歌Chrome下载的滑动提示消息？

一、推荐成熟库 #

• Accompanist Snackbar：Jetpack官方推荐的Compose扩展库，原生支持滑动消除，完美兼容API 26及以上版本。可自定义布局、操作按钮、显示时长，能快速匹配Chrome下载提示的样式逻辑。

  • 基础使用示例：

    // 先添加依赖
    // implementation "com.google.accompanist:accompanist-snackbar:0.30.1"
    
    val snackbarHostState = rememberSnackbarHostState()
    val scope = rememberCoroutineScope()
    
    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { padding ->
        Button(
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar(
                        message = "文件已开始下载",
                        actionLabel = "查看",
                        duration = SnackbarDuration.Long
                    )
                }
            }
        ) {
            Text("触发下载提示")
        }
    }
    

  • 样式定制：通过Snackbar的参数可修改背景色、文字样式，甚至替换整个内容布局，完全复刻Chrome提示的视觉效果。

• Compose专用Toast库：部分第三方库针对Compose优化了可滑动Toast交互，API 26+适配完善，支持横向滑动消除，可直接集成使用。

二、手动实现方案 #

若不想依赖第三方库，可基于Compose原生API自行实现：

1. 用SwipeToDismiss组件包裹提示布局，这是Compose内置的滑动消除组件，API 26+原生支持。
2. 配合AnimatedVisibility实现滑入滑出的过渡动画。
3. 示例代码：

val dismissState = rememberDismissState()
val scope = rememberCoroutineScope()

AnimatedVisibility(visible = true) {
    SwipeToDismiss(
        state = dismissState,
        directions = setOf(DismissDirection.EndToStart, DismissDirection.StartToEnd),
        dismissContent = {
            // 自定义Chrome风格提示布局
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.White)
                    .padding(16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(Icons.Default.Download, contentDescription = "下载提示")
                Spacer(modifier = Modifier.width(12.dp))
                Text("文件下载完成")
                Spacer(modifier = Modifier.weight(1f))
                TextButton(onClick = { /* 点击查看逻辑 */ }) {
                    Text("查看")
                }
            }
        },
        background = {
            // 滑动时的背景效果
            Box(modifier = Modifier.fillMaxSize().background(Color.Gray.copy(alpha = 0.2f)))
        }
    )
}

LaunchedEffect(dismissState.currentValue) {
    if (dismissState.currentValue != DismissValue.Default) {
        // 滑动消失后的后续逻辑，比如隐藏提示
    }
}

该方案完全基于Compose原生能力，无额外依赖，可灵活定制滑动方向、动画效果和布局样式。

三、关键注意事项 #

• 确保提示的显示层级，可通过Box的zIndex或Scaffold的snackbarHost保证提示处于页面最上层。
• 使用响应式布局修饰符（如fillMaxWidth）适配不同屏幕尺寸。
• 可根据需求限制滑动方向（比如仅允许右滑消除）。

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