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

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式