android - 如何启用 Compose snackbar 的滑动关闭行为

Question

下面显示 Compose Snackbar 的简单代码

此代码在 onClick 事件发生时正确显示 Snackbar。

 val scaffoldState = rememberScaffoldState() // this contains the `SnackbarHostState`
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        modifier = Modifier,
        scaffoldState = scaffoldState // attaching `scaffoldState` to the `Scaffold`
    ) {
        Button(
            onClick = {
                coroutineScope.launch { // using the `coroutineScope` to `launch` showing the snackbar
                    // taking the `snackbarHostState` from the attached `scaffoldState`
                    val snackbarResult = scaffoldState.snackbarHostState.showSnackbar(
                        message = "This is your message",
                        actionLabel = "Do something."
                    )
                    when (snackbarResult) {
                        SnackbarResult.Dismissed -> Log.d("SnackbarDemo", "Dismissed")
                        SnackbarResult.ActionPerformed -> Log.d("SnackbarDemo", "Snackbar's button clicked")
                    }
                }
            }
        ) {
            Text(text = "A button that shows a Snackbar")
        }
    }

如何在右/左滑动时关闭 snackbar？

Answer 1

SnackbarHost 没有这样的功能。但是您可以使用 nackbarHost 参数扩展它。

此外，如果您希望 snackbar 仅在滑动时消失，您可能需要将持续时间设置为 Indefinite:

Scaffold(
    modifier = Modifier,
    scaffoldState = scaffoldState,
    snackbarHost = { SwipeableSnackbarHost(it) } // modification 1
) {
    Button(
        onClick = {
            coroutineScope.launch {
                val snackbarResult = scaffoldState.snackbarHostState.showSnackbar(
                    message = "This is your message",
                    actionLabel = "Do something.",
                    duration = SnackbarDuration.Indefinite,  // modification 2
                )
                when (snackbarResult) {
                    SnackbarResult.Dismissed -> Log.d("SnackbarDemo", "Dismissed")
                    SnackbarResult.ActionPerformed -> Log.d(
                        "SnackbarDemo",
                        "Snackbar's button clicked"
                    )
                }
            }
        }
    ) {
        Text(text = "A button that shows a Snackbar")
    }
}

SwipeableSnackbarHost 灵感来自 this answer

enum class SwipeDirection {
    Left,
    Initial,
    Right,
}

@Composable
fun SwipeableSnackbarHost(hostState: SnackbarHostState) {
    if (hostState.currentSnackbarData == null) { return }
    var size by remember { mutableStateOf(Size.Zero) }
    val swipeableState = rememberSwipeableState(SwipeDirection.Initial)
    val width = remember(size) {
        if (size.width == 0f) {
            1f
        } else {
            size.width
        }
    }
    if (swipeableState.isAnimationRunning) {
        DisposableEffect(Unit) {
            onDispose {
                when (swipeableState.currentValue) {
                    SwipeDirection.Right,
                    SwipeDirection.Left -> {
                        hostState.currentSnackbarData?.dismiss()
                    }
                    else -> {
                        return@onDispose
                    }
                }
            }
        }
    }
    val offset = with(LocalDensity.current) {
        swipeableState.offset.value.toDp()
    }
    SnackbarHost(
        hostState,
        snackbar = { snackbarData ->
            Snackbar(
                snackbarData,
                modifier = Modifier.offset(x = offset)
            )
        },
        modifier = Modifier
            .onSizeChanged { size = Size(it.width.toFloat(), it.height.toFloat()) }
            .swipeable(
                state = swipeableState,
                anchors = mapOf(
                    -width to SwipeDirection.Left,
                    0f to SwipeDirection.Initial,
                    width to SwipeDirection.Right,
                ),
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal
            )
    )
}