Jetpack Compose 中使用 Snackbar 提示信息

发布时间: 2021-09-21 21:38:58 作者: 大象笔记

之所以想记录一下 Jetpack Compose 中 Snackbar 的使用,主要是发现 Snackbar 代码示例引入了两个我没有见过的概念:

snackbar

中文是,小吃店 ... snack, 小吃的意思。

snackbar 的交互形式非常独特,是屏幕底部出现一条横幅,包含提示信息。还可以内置一个按钮,例如撤销操作等。

Compose 中 Snackbar 的使用

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    },
)

scaffoldState 的作用

State for Scaffold composable component. Contains basic screen state, e.g. Drawer configuration, as well as sizes of components after layout has happened

rememberCoroutineScope 的作用

rememberCoroutineScope 记录了 coroutine scope 的引用,当其所在的 Composable 被清理时, coroutine 也会被自动取消。

我是一名山东烟台的开发者,联系作者