Jetpack Compose 中使用 Snackbar 提示信息

文章目录

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

    • rememberScaffoldState
    • rememberCoroutineScope

    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 也会被自动取消。