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

相关推荐
Lei活在当下6 小时前
【业务场景架构实战】4. 支付状态分层流转的设计和实现
架构·android jetpack·响应式设计
天花板之恋16 小时前
Compose之图片加载显示
android jetpack
消失的旧时光-19431 天前
Kotlinx.serialization 使用讲解
android·数据结构·android jetpack
Tans52 天前
Androidx Fragment 源码阅读笔记(下)
android jetpack·源码阅读
Lei活在当下3 天前
【业务场景架构实战】2. 对聚合支付 SDK 的封装
架构·android jetpack
Tans55 天前
Androidx Fragment 源码阅读笔记(上)
android jetpack·源码阅读
alexhilton6 天前
runBlocking实践:哪里该使用,哪里不该用
android·kotlin·android jetpack
Tans58 天前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读
ljt272496066110 天前
Compose笔记(四十九)--SwipeToDismiss
android·笔记·android jetpack
4z3312 天前
Jetpack Compose重组优化:机制剖析与性能提升策略
性能优化·android jetpack