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

相关推荐
alexhilton1 天前
Kotlin互斥锁(Mutex):协程的线程安全守护神
android·kotlin·android jetpack
是六一啊i2 天前
Compose 在Row、Column上使用focusRestorer修饰符失效原因
android jetpack
用户060905255224 天前
Compose 主题 MaterialTheme
android jetpack
用户060905255224 天前
Compose 简介和基础使用
android jetpack
用户060905255224 天前
Compose 重组优化
android jetpack
行墨4 天前
Jetpack Compose 深入浅出(一)——预览 @Preview
android jetpack
alexhilton5 天前
突破速度障碍:非阻塞启动画面如何将Android 应用启动时间缩短90%
android·kotlin·android jetpack
Pika6 天前
深入浅出 Compose 测量机制
android·android jetpack·composer
fundroid8 天前
掌握 Compose 性能优化三步法
android·android jetpack