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

相关推荐
Tans52 天前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读
ljt27249606613 天前
Compose笔记(四十九)--SwipeToDismiss
android·笔记·android jetpack
4z335 天前
Jetpack Compose重组优化:机制剖析与性能提升策略
性能优化·android jetpack
alexhilton5 天前
Android ViewModel数据加载:基于Flow架构的最佳实践
android·kotlin·android jetpack
水牛9 天前
一行代码完成startActivityForResult
android·android jetpack
kymjs张涛9 天前
零一开源|前沿技术周刊 #14
android·android studio·android jetpack
alexhilton10 天前
Android应用的架构演进
android·kotlin·android jetpack
fundroid11 天前
全新 LifecycleOwner 可组合项:让 Composable 具备独立生命周期
android jetpack
alexhilton13 天前
Compose Unstyled:Compose UI中失传的设计系统层
android·kotlin·android jetpack
柿蒂13 天前
从动态缩放自定义View,聊聊为什么不要把问题复杂化
android·ai编程·android jetpack