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

相关推荐
刘龙超16 小时前
如何应对 Android 面试官 -> 玩转 JetPack ViewBinding
android jetpack
顾林海19 小时前
ViewModel 销毁时机详解
android·面试·android jetpack
雨白1 天前
Jetpack系列(三):Room数据库——从增删改查到数据库平滑升级
android·android jetpack
雨白2 天前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
刘龙超4 天前
如何应对 Android 面试官 -> 玩转 JetPack LiveData
android jetpack
Wgllss14 天前
Kotlin+协程+FLow+Channel+Compose 实现一个直播多个弹幕效果
android·架构·android jetpack
_一条咸鱼_14 天前
Android Gson注解驱动的转换规则原理(9)
android·面试·android jetpack
_一条咸鱼_14 天前
Android Runtime大对象分配与处理流程原理深度剖析(59)
android·面试·android jetpack
Wgllss15 天前
Kotlin+协程+FLow+Channel,实现生产消费者模式3种案例
android·架构·android jetpack
Wgllss15 天前
6种Kotlin中单例模式写法,特点及应用场景指南
android·架构·android jetpack