Jetpack Compose 快捷信息栏 SnackbarHost

$信息条组件$ 用作在屏幕底部显示的简短通知。它可提供有关操作或操作的反馈，而不会中断用户体验。信息条会在几秒钟后消失。用户还可以使用操作（例如点按按钮）将其关闭。

请考虑以下三个可能会使用信息提示控件的用例：

操作确认：用户删除电子邮件或消息后，系统会显示信息提示控件来确认操作并提供"撤消"选项。
网络状态：当应用的互联网连接中断时，系统会弹出信息提示控件，提示其现在处于离线状态。
数据提交：成功提交表单或更新设置后，信息提示控件会显示更改已成功保存。

基本示例

如需实现信息提示控件，请先创建 $`SnackbarHost`$ ，其中包含 $`SnackbarHostState`$ 属性。SnackbarHostState 提供对 $`showSnackbar()`$ 函数的访问权限，该函数可用于显示信息提示控件。

此挂起函数需要 CoroutineScope（例如使用 $`rememberCoroutineScope`$ ，并且可被调用以响应界面事件，以便在 Scaffold 中显示 $`Snackbar`$

ts 复制代码

package com.lujianfei.composeui.page.component

import MyTopAppBar
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import kotlinx.coroutines.launch


/**
 * Author: lujianfei
 * Date: 2024/3/27 11:25
 * Description:
 */

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun SnackbarHostPage(navController: NavHostController?= null) {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    Scaffold(
        topBar = {
            MyTopAppBar(
                title = {
                    Text("SnackbarHost 快捷信息栏")
                },
                navigationIcon = {
                    IconButton(onClick = { navController?.popBackStack() }) {
                        Icon(Icons.Filled.ArrowBack,"")
                    }
                }
            )
        },
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show snackbar") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar("Snackbar")
                    }
                }
            )
        }
    ) { padding ->
        Column(modifier = Modifier
            .padding(padding)
            .verticalScroll(rememberScrollState())) {
        }
    }
}

带有操作信息的信息条

您可以提供可选操作，并调整 Snackbar 的时长。snackbarHostState.showSnackbar() 函数可接受额外的 actionLabel 和 duration 参数，并返回 $`SnackbarResult`$ 。

ts 复制代码

val result = snackbarHostState
    .showSnackbar(
        message = "Snackbar",
        actionLabel = "Action",
        // Defaults to SnackbarDuration.Short
        duration = SnackbarDuration.Indefinite
    )
when (result) {
    SnackbarResult.ActionPerformed -> {
        /* Handle snackbar action performed */
    }
    SnackbarResult.Dismissed -> {
        /* Handle snackbar dismissed */
    }
}

上一篇 Jetpack Compose 底部动作条

下一篇 Jetpack Compose 分页器 Pager