AI 助理
备案控制台
开发者社区 物联网 文章 正文

kotlin安卓开发【Jetpack Compose】：封装SnackBarUtil工具类方便使用

2024-06-12 628
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： GPT-4o 是一个非常智能的模型，比当前的通义千问最新版本在能力上有显著提升。作者让GPT开发一段代码，功能为在 Kotlin 中使用 Jetpack Compose 框架封装一个 Snackbar 工具类，方便调用



大模型返回的代码， 根本就没法用，本篇是一个 badcase。 实际上应该使用Toast，非常简单易用。Toast的具体使用，见文章最后



问题：

kotlin 开发安卓app， 使用Jetpack Compose框架。 帮我封装一个好用的util 工具类， 实现一行代码可以调用snackbar 显示一个简短的信息， 支持 错误类型， 警告类型， 消息类型， 成功类型， 不同的图标加上具体的同时信息一起显示。 几秒后自动消失。



GPT-4o给的回复



为了封装一个实用的工具类，实现一行代码即可调用 Snackbar 显示一个简短的信息，并支持错误类型、警告类型、消息类型、成功类型等不同的图标和信息，可以按照以下步骤进行实现：

  1. 创建一个 SnackbarUtil 工具类。
  2. 定义 SnackbarType 枚举类，表示不同类型的 Snackbar。
  3. 封装 showSnackbar 方法，以便一行代码即可调用 Snackbar。

完整代码示例

定义 SnackbarType 枚举类以及图标资源

首先定义 SnackbarType 枚举类和图标资源，以表示不同类型的 Snackbar 和对应的图标。


import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.ui.graphics.vector.ImageVector

enum class SnackbarType(val icon: ImageVector) {
    ERROR(Icons.Default.Error),
    WARNING(Icons.Default.Warning),
    INFO(Icons.Default.Info),
    SUCCESS(Icons.Default.CheckCircle)
}



创建 SnackbarUtil

接下来，创建 SnackbarUtil 工具类，封装一个用于显示 Snackbar 的方法。



import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

object SnackbarUtil {
    fun showSnackbar(
        scaffoldState: ScaffoldState,
        message: String,
        type: SnackbarType,
        durationMillis: Long = 3000 // Duration can be customized here
    ) {
        val scope = rememberCoroutineScope()
        scope.launch {
            scaffoldState.snackbarHostState.showSnackbar(
                message = message,
                actionLabel = null, // No action button
                duration = SnackbarDuration.Short
            )
            delay(durationMillis)
            scaffoldState.snackbarHostState.currentSnackbarData?.dismiss()
        }
    }
    
    @Composable
    fun CustomSnackbar(snackbarData: SnackbarData, type: SnackbarType) {
        Snackbar(
            modifier = Modifier.padding(8.dp)
        ) {
            Icon(
                imageVector = type.icon,
                contentDescription = null,
                modifier = Modifier.size(24.dp)
            )
            Spacer(modifier = Modifier.size(8.dp))
            Text(text = snackbarData.message)
        }
    }
}



使用 SnackbarUtil 在 UI层

我们在 UI 层调用 SnackbarUtil 来显示不同类型的 Snackbar。示例代码如下：



import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    val scaffoldState = rememberScaffoldState()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(title = { Text("Snackbar Example") })
        },
        content = {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
            ) {
                Button(onClick = {
                    SnackbarUtil.showSnackbar(
                        scaffoldState = scaffoldState,
                        message = "Error message",
                        type = SnackbarType.ERROR
                    )
                }) {
                    Text("Show Error")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showSnackbar(
                        scaffoldState = scaffoldState,
                        message = "Warning message",
                        type = SnackbarType.WARNING
                    )
                }) {
                    Text("Show Warning")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showSnackbar(
                        scaffoldState = scaffoldState,
                        message = "Info message",
                        type = SnackbarType.INFO
                    )
                }) {
                    Text("Show Info")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showSnackbar(
                        scaffoldState = scaffoldState,
                        message = "Success message",
                        type = SnackbarType.SUCCESS
                    )
                }) {
                    Text("Show Success")
                }
            }
        },
        snackbarHost = {
            SnackbarHost(
                hostState = scaffoldState.snackbarHostState,
                snackbar = { snackbarData ->
                    SnackbarUtil.CustomSnackbar(snackbarData = snackbarData, type = SnackbarType.INFO) // Pass your type here
                }
            )
        }
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp()
}



上面有几个问题，

1、不需要CustomSnackbar，这个有点繁琐，没必要。

2、传参数 scafoldState， 应该不需要

3、 type参数也不需要， 直接封装成4个函数，给到用户。


我把上述要求给gpt说了， 最终它给了一个非常完美的代码




好的，我们可以进一步简化 SnackbarUtil，将 showSnackbarError、showSnackbarInfo、showSnackbarWarning 和 showSnackbarSuccess 四个函数分离出来，这样调用者就不需要传递 type 参数了。

更新后的 SnackbarUtil 工具类

SnackbarType 枚举类（保留用于内部）


工具类


import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.platform.LocalContext
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

object SnackbarUtil {
    @Composable
    private fun showSnackbar(
        message: String,
        type: SnackbarType,
        durationMillis: Long = 3000 // Duration can be customized here
    ) {
        val scaffoldState = rememberScaffoldState()
        val coroutineScope = rememberCoroutineScope()
        
        LaunchedEffect(key1 = message) {
            coroutineScope.launch {
                scaffoldState.snackbarHostState.showSnackbar(
                    message = message,
                    actionLabel = type.label,
                    duration = SnackbarDuration.Short
                )
                delay(durationMillis)
                scaffoldState.snackbarHostState.currentSnackbarData?.dismiss()
            }
        }

        // Connect this to the actual Scaffold in your UI
        Scaffold(snackbarHost = {
            SnackbarHost(hostState = scaffoldState.snackbarHostState)
        }) {}
    }

    @Composable
    fun showError(message: String, durationMillis: Long = 3000) {
        showSnackbar(message, SnackbarType.ERROR, durationMillis)
    }

    @Composable
    fun showWarning(message: String, durationMillis: Long = 3000) {
        showSnackbar(message, SnackbarType.WARNING, durationMillis)
    }

    @Composable
    fun showInfo(message: String, durationMillis: Long = 3000) {
        showSnackbar(message, SnackbarType.INFO, durationMillis)
    }

    @Composable
    fun showSuccess(message: String, durationMillis: Long = 3000) {
        showSnackbar(message, SnackbarType.SUCCESS, durationMillis)
    }
}





使用 SnackbarUtil 在 UI 层

在实际的 UI 组件中调用 SnackbarUtil 来显示不同类型的 Snackbar：



import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Snackbar Example") })
        },
        content = {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = {
                    SnackbarUtil.showError("Error message")
                }) {
                    Text("Show Error")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showWarning("Warning message")
                }) {
                    Text("Show Warning")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showInfo("Info message")
                }) {
                    Text("Show Info")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Button(onClick = {
                    SnackbarUtil.showSuccess("Success message")
                }) {
                    Text("Show Success")
                }
            }
        },
        snackbarHost = { SnackbarHost(hostState = rememberScaffoldState().snackbarHostState) }
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApp()
}



解释：

  1. SnackbarType 枚举类：保留用于内部表示不同类型的 Snackbar，并且为每种类型指定了一个标签和图标。
  2. SnackbarUtil：
  • showSnackbar 私有组合函数：这是一个私有方法，现在所有具体类型的 Snackbar 都通过这个方法显示。
  • showError、showWarning、showInfo、showSuccess 组合函数：以上函数调用 showSnackbar，传递相应的 SnackbarType，这样调用者就不需要传递 type 参数了。
  1. MyApp 组件：
  • 使用 Scaffold 来搭建基本页面布局。
  • 每个按钮点击时会分别调用 SnackbarUtil.showError、SnackbarUtil.showWarning、SnackbarUtil.showInfo 和 SnackbarUtil.showSuccess 显示不同类型的 Snackbar。

通过这种方式，可以更加简洁地调用 SnackbarUtil.showError、SnackbarUtil.showWarning、SnackbarUtil.showInfo 和 SnackbarUtil.showSuccess 方法来显示不同类型的 Snackbar，使代码更加简洁和易于维护。





通义千问给的回复



在Kotlin与Jetpack Compose中，你可以创建一个实用的工具类来简化Snackbar的调用，使其能够通过一行代码展示不同类型的Snackbar消息，并带有自动消失功能。下面是一个示例实现：

SnackbarUtil.kt


package your.package.name.util

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.outlined.Warning
import androidx.compose.material.icons.rounded.CheckCircle
import androidx.compose.material.icons.rounded.ErrorOutline
import androidx.compose.material.icons.rounded.Info
import androidx.compose.material.icons.rounded.WarningAmber
import androidx.compose.material.snackbar.SnackbarDuration
import androidx.compose.material.snackbar.SnackbarResult
import androidx.compose.material.snackbar.SnackbarHost
import androidx.compose.material.snackbar.SnackbarHostState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalLifecycleOwner
import kotlinx.coroutines.delay

enum class SnackbarType {
    ERROR, WARNING, INFO, SUCCESS
}

object SnackbarUtil {
    @Composable
    fun showSnackbar(
        message: String,
        type: SnackbarType = SnackbarType.INFO,
        durationMs: Long = SnackbarDuration.Short.durationMillis,
    ) {
        val snackbarHostState = remember { SnackbarHostState() }
        val coroutineScope = remember { androidx.compose.runtime.currentComposer.coroutineScope }
        val context = LocalContext.current

        DisposableEffect(message) {
            LaunchedEffect(Unit) {
                delay(durationMs)
                snackbarHostState.showSnackbar(message = message)
            }

            onDispose {}
        }

        SnackbarHost(snackbarHostState) { data ->
            val icon = when (type) {
                SnackbarType.ERROR -> Icons.Filled.Error
                SnackbarType.WARNING -> Icons.Outlined.Warning
                SnackbarType.INFO -> Icons.Rounded.Info
                SnackbarType.SUCCESS -> Icons.Rounded.CheckCircle
            }

            Box(
                modifier = Modifier.fillMaxWidth(),
                contentAlignment = Alignment.CenterStart
            ) {
                // 在这里可以根据需要添加图标
                // 由于Compose Snackbar目前不直接支持图标，所以这里省略了图标的具体实现
                androidx.compose.material.Snackbar(
                    modifier = Modifier.align(Alignment.CenterStart),
                    action = {},
                    dismissAction = { snackbarHostState.currentSnackbarData?.dismiss() },
                    message = { androidx.compose.material.Text(message) }
                )
            }
        }
    }
}





使用示例

在你的Compose界面中，你可以这样调用SnackbarUtil.showSnackbar方法来显示不同类型的Snackbar：


import your.package.name.util.SnackbarType
import your.package.name.util.SnackbarUtil

// ...

@Composable
fun MyScreen() {
    Column(modifier = Modifier.fillMaxSize()) {
        // ... 其他组件
        Button(onClick = {
            SnackbarUtil.showSnackbar("操作成功", type = SnackbarType.SUCCESS)
        }) {
            Text("显示成功Snackbar")
        }
        Button(onClick = {
            SnackbarUtil.showSnackbar("警告信息", type = SnackbarType.WARNING)
        }) {
            Text("显示警告Snackbar")
        }
        // 类似地，添加更多按钮来测试其他类型的Snackbar
    }
}


在Kotlin与Jetpack Compose中实现Snackbar功能及相关概念，可以参考以下官方文档和资源：

  1. Jetpack Compose官方文档 - Snackbar: 虽然Compose的文档中并没有直接提供一个内置的带图标的Snackbar实现，但它详细介绍了如何使用SnackbarHost和SnackbarHostState来创建和管理Snackbar。
  1. Material Design Guidelines - Snackbars: Google的Material Design指南提供了关于Snackbars的设计原则和使用建议，帮助你理解何时以及如何使用它们。
  1. Compose状态与副作用: 了解如何在Compose中使用DisposableEffect和LaunchedEffect来管理状态和执行副作用，这对于实现定时自动消失的Snackbar非常关键。
  1. Coroutine延迟: 上述示例中使用了delay函数来实现延迟显示Snackbar，这是Kotlin协程的基本功能之一。
  1. 自定义Snackbar: 虽然上述示例中没有深入到如何添加图标，但如果你需要自定义Snackbar样式，包括添加图标，可以参考以下资源：
  1. 图标资源: Material Icons的官方页面，可以查找和下载各种图标资源。




Toast的详细使用


何时在Android应用中使用Toasts？ (When to use Toasts in Android app?)

Toast messages are used to show the user something that isn’t critical but might help the user with what’s happening in the application currently. For example, giving a hint for a specific field in the form.

Toast消息用于向用户显示不重要的内容，但可能会帮助用户了解应用程序中当前发生的情况。 例如，为表单中的特定字段提供提示。

创建吐司的语法 (Syntax to Create a Toast)

We can use the Toast class to create a toast message.

我们可以使用Toast类创建一条Toast消息。

1. Toast.makeText(this, "Androidly Short Toasts", Toast.LENGTH_SHORT).show();
2. 
3. Toast.makeText(this, "Androidly Long Toasts", Toast.LENGTH_LONG).show();

Toast requires three arguments.

吐司需要三个参数。

  1. Context语境
  2. Message信息
  3. Duration持续时间

The show() function is used to display the Toast on the screen.

show()函数用于在屏幕上显示Toast。

We can customize the layout of the toast as well as its duration.

我们可以自定义吐司的布局及其持续时间。




文章标签：
Kotlin
Android开发
关键词：
Android开发
Kotlin jetpack
Kotlin开发
安卓jetpack
Android Jetpack
delacroix_xu-15509
目录
相关文章
卓伊凡
|
3月前
|
安全 Java Android开发
为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡
为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡
卓伊凡
177 0
为什么大厂要求安卓开发者掌握Kotlin和Jetpack？深度解析现代Android开发生态优雅草卓伊凡
1528598920946422
|
4月前
|
缓存 Android开发 iOS开发
Kotlin跨平台Compose Multiplatform实战指南
Kotlin Multiplatform (KMP) 结合 Compose Multiplatform，助力开发者用一套代码构建跨平台应用（Android、iOS、桌面和 Web）。本文提供实战指南，涵盖环境搭建、项目结构、共享 UI 编写、平台适配、状态管理及资源处理等内容。通过 expect/actual 处理差异，借助官方文档与示例项目学习，减少重复代码，优化多平台开发体验。
1528598920946422
1057 18
Ant.Dream
|
安全 Java Android开发
Kotlin入门实用开发技巧与注意事项
本文源自公众号“AntDream”。Kotlin是由JetBrains开发的现代编程语言，自2017年成为Android官方开发语言后迅速流行。本文作者分享了Kotlin的实用技巧，包括变量声明、空安全、扩展函数等，帮助初学者避免常见问题。
Ant.Dream
157 15
聚优云惠
|
11月前
|
JavaScript Java Kotlin
Kotlin开发笔记 - 常量与变量
Kotlin - 常量与变量
聚优云惠
99 3
毓秀清荷
|
11月前
|
JavaScript Java Kotlin
Kotlin开发笔记 - 常量与变量
Kotlin开发笔记 - 常量与变量
毓秀清荷
73 2
毓秀清荷
|
11月前
|
IDE 开发工具 Kotlin
Kotlin开发笔记 - 参数与异常
本教程详细讲解Kotlin语法，适合深入学习。若需快速掌握，可参考“简洁”系列教程。内容涵盖具名参数、变长参数、默认参数、多返回值及异常处理等核心概念，助你高效编程。
毓秀清荷
83 1
毓秀清荷
|
11月前
|
Java 开发者 Kotlin
Kotlin开发笔记- 分支与循环
本系列教程详细讲解了Kotlin语法，适合需要深入了解Kotlin的开发者。若需快速学习Kotlin，可参考“简洁”系列教程。本文重点介绍了Kotlin中的分支语句（if...else 和 when）及循环语句（for 和 while），并提供了丰富的示例代码，帮助读者掌握这些核心语法。
毓秀清荷
69 1
陌陌谣
|
12月前
|
监控 安全 Java
Kotlin 在公司上网监控中的安卓开发应用
在数字化办公环境中，公司对员工上网行为的监控日益重要。Kotlin 作为一种基于 JVM 的编程语言，具备简洁、安全、高效的特性，已成为安卓开发的首选语言之一。通过网络请求拦截，Kotlin 可实现网址监控、访问时间记录等功能，满足公司上网监控需求。其简洁性有助于快速构建强大的监控应用，并便于后续维护与扩展。因此，Kotlin 在安卓上网监控应用开发中展现出广阔前景。
陌陌谣
96 1
聚优云惠
|
11月前
|
Kotlin
Kotlin开发笔记 - 参数与异常
Kotlin - 参数与异常
聚优云惠
83 0
聚优云惠
|
11月前
|
Java Kotlin 索引
Kotlin开发笔记- 分支与循环
Kotlin开发笔记- 分支与循环
聚优云惠
84 0

物联网

热门文章

最新文章

  • 1
    阿里云物联网无线连接服务：做好菜鸟无人车黑科技的幕后英雄
  • 2
    物联网+智慧城建，智慧城市建设的新动能
  • 3
    阿里云的物联网之路
  • 4
    物联网平台实用技巧：调用API获取设备状态
  • 5
    uDevice Center - IoT在线开发板/设备平台
  • 6
    旋转门数据压缩算法在PostgreSQL中的实现 - 流式压缩在物联网、监控、传感器等场景的应用
  • 7
    用51单片机做一个物联网温度计+远程开关
  • 8
    基于AliOS Things玩转智能语音
  • 9
    学术界关于HBase在物联网/车联网/互联网/金融/高能物理等八大场景的理论研究
  • 10
    物联网安全技术提高区块链应用数据的可信度
  • 1
    Phi-4 技术报告深度解读——论文阅读
    24
  • 2
    Phi-3 技术报告：手机本地运行的高能力语言模型
    23
  • 3
    EdgeMark：嵌入式人工智能工具的自动化与基准测试系统——论文阅读
    29
  • 4
    AI-ANNE: 将神经网络迁移到微控制器的深度探索——论文阅读
    28
  • 5
    RFID成为冶金领域管理的重要帮手
    16
  • 6
    隧道中毫米波MIMO信道特性的实验研究——论文阅读
    35
  • 7
    矩形隧道中MIMO信道特性的模态理论解释——论文解读
    44
  • 8
    什么是GEO优化？做GEO优化的最新方法【2025】
    63
  • 9
    RFID智能环卫让小区环境更 “清爽”
    22
  • 10
    I-ViT: 用于高效视觉Transformer推理的纯整数量化——论文阅读
    97

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证