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() 函数可接受额外的 actionLabelduration 参数,并返回 [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

相关推荐
我命由我1234519 小时前
Android 对话框 - 对话框全屏显示(设置 Window 属性、使用自定义样式、继承 DialogFragment 实现、继承 Dialog 实现)
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Jeled1 天前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
我命由我123451 天前
Android 开发问题:getLeft、getRight、getTop、getBottom 方法返回的值都为 0
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
alexhilton6 天前
Kotlin互斥锁(Mutex):协程的线程安全守护神
android·kotlin·android jetpack
是六一啊i8 天前
Compose 在Row、Column上使用focusRestorer修饰符失效原因
android jetpack
用户060905255229 天前
Compose 主题 MaterialTheme
android jetpack
用户060905255229 天前
Compose 简介和基础使用
android jetpack
用户060905255229 天前
Compose 重组优化
android jetpack
行墨9 天前
Jetpack Compose 深入浅出(一)——预览 @Preview
android jetpack