AI 助理
备案控制台
开发者社区 云计算 文章 正文

Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用

2022-06-20 1201
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用

Compose可以配合多个Jetpack组件使用

Compose可以配合多个Jetpack组件开发提高开发效率


多种组合方式

Compose配合ViewModel使用

概述

Compose中ViewModel的使用和Jetpack一致，通常我们构建页面的时候，如果一条数据多个布局都需要使用到的话我们只能在方法的形参中层层传递。但是这样明显是不合理的，会降低代码的可读性。

使用ViewModel可以完美的解决这个问题，Compose中使用ViewModel的话需要引入lifecycle-viewmodel-compose库，获取ViewModel的方式需要用到扩展函数：viewModel()

多个@Composable修饰的函数里面使用viewModel()获取ViewModel可以获取到同一个ViewModel对象，这就是我们能解决问题的根本原因

以上所说仅限于同一个导航页中。如果是在不同的导航页中，那么获取到的ViewModel是不同的对象，这一点跟我们不同Activity中获取不同ViewModel是一样的


依赖支持

implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
复制代码


代码

@Composable
fun useWithViewModel() {
    val datas = remember {
        mutableStateListOf(
            ItemData(title = "向ViewModel中的值自增1并展示", content = "0")
        )
    }
    val model: ExampleViewModel = viewModel()//获取ViewModel对象
    Scaffold(topBar = {
        buildTopBar(title = "Compose和ViewModel的结合")
    }) {
        ListView(
            datas = datas,
            state = rememberLazyListState(),
            click = { itemData: ItemData, index, _ ->
                model.increase()//ViewModel中对象自增1
                itemData.content = model.count.toString()//刷新数据
                changeData(datas, index)
            })
    }
}
复制代码

ExampleViewModel对象

class ExampleViewModel: ViewModel() {
    fun increase() {
        count++
    }
    var count =0
}
复制代码


数据流Flow

概述

Compose可以在不导入依赖的情况下使用Flow，用法基本与相同。不过Compose中使用StateFlow不需要我们在协程中开启collect收集数据流，使用的时候直接使用Flow.collectAsState即可获取到StateFlow中的值进行展示。


示例代码

下面代码使用了MutableStateFlow实现了数据监听，当更新MutableStateFlow值的时候函数会被刷新，然后使用collectAsState即可获取到最新值进行展示。

点击下面的按钮改变值，上面的按钮内容被改变展示效果

@Composable
fun useStateFlow() {
    var repository = remember {
        Repository()
    }
    Column {
        listItem(
            itemData = ItemData(
                title = "点击更改StateFlow的值",
                content = repository.stateFlow.collectAsState().value//获取StateFlow中的值展示
            ), onClick = {
            })
        changeUiWithState(repository)
    }
}
@Composable
fun changeUiWithState(repository: Repository) {
    listItem(itemData = ItemData(title = "点击改变数据"), onClick = {
        repository.increase()//点击数值自增1
    })
}
class Repository {
    val stateFlow = MutableStateFlow("初始值0")
    var count = 0
    fun increase(): Int {
        stateFlow.value = count.toString()//更改StateFlow中的值
        return count++
    }
}
复制代码


运行效果

image.png


Hilt

初学者可以将Hilt的学习延后，Hilt不是学习Compose的充要条件

hilt的使用和传统开发基本一致，可以查看我的另一篇文章：juejin.cn/post/696714…


coil

coil是一个图片库，可以用来加载Compose中的远程图片


依赖

implementation 'io.coil-kt:coil-compose:1.3.2'
复制代码


代码

@Composable
fun useCoil() {
    val painter =
        rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509_KvXhU.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631501719&t=9653a6a5bb4e29505b9b582c770b42ef",
            builder = {
                crossfade(true)
            })
    Image(
        modifier = Modifier
            .size(300.dp)
            .clip(shape = RoundedCornerShape(20.dp)),
        painter = painter,
        contentDescription = ""
    )
}
复制代码


各种效果

圆形效果展示

rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509_KvXhU.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631501719&t=9653a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(CircleCropTransformation())
            })
复制代码

image.png


圆角效果

rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509_KvXhU.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631501719&t=9653a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(
                    RoundedCornersTransformation()
                )
            })
复制代码

image.png


圆形加灰色效果

val painter =
        rememberImagePainter(data = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201501%2F27%2F20150127103509_KvXhU.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631501719&t=9653a6a5bb4e29505b9b582c770b42ef",
            builder = {
                transformations(
                    listOf(GrayscaleTransformation(), CircleCropTransformation())
                )
            })
复制代码

image.png



关键词：
jetpack hilt
jetpack compose
jetpack viewmodel
jetpack flow
卡布学安卓
目录
相关文章
蓝色流星1000
|
4月前
|
存储 缓存 Android开发
安卓Jetpack Compose+Kotlin， 使用ExoPlayer播放多个【远程url】音频，搭配Okhttp库进行下载和缓存，播放完随机播放下一首
这是一个Kotlin项目，使用Jetpack Compose和ExoPlayer框架开发Android应用，功能是播放远程URL音频列表。应用会检查本地缓存，如果文件存在且大小与远程文件一致则使用缓存，否则下载文件并播放。播放完成后或遇到异常，会随机播放下一首音频，并在播放前随机设置播放速度（0.9到1.2倍速）。代码包括ViewModel，负责音频管理和播放逻辑，以及UI层，包含播放和停止按钮。
蓝色流星1000
264 0
蓝色流星1000
|
4月前
|
存储 数据库 Android开发
安卓Jetpack Compose+Kotlin，支持从本地添加音频文件到播放列表，支持删除，使用ExoPlayer播放音乐
为了在UI界面添加用于添加和删除本地音乐文件的按钮，以及相关的播放功能，你需要实现以下几个步骤： 1. **集成用户选择本地音乐**：允许用户从设备中选择音乐文件。 2. **创建UI按钮**：在界面中创建添加和删除按钮。 3. **数据库功能**：使用Room数据库来存储音频文件信息。 4. **更新ViewModel**：处理添加、删除和播放音频文件的逻辑。 5. **UI实现**：在UI层支持添加、删除音乐以及播放功能。
蓝色流星1000
198 1
Ant.Dream
|
1月前
|
编译器 Android开发 开发者
带你了解Android Jetpack库中的依赖注入框架：Hilt
本文介绍了Hilt，这是Google为Android开发的依赖注入框架，基于Dagger构建，旨在简化依赖注入过程。Hilt通过自动化的组件和注解减少了DI的样板代码，提高了应用的可测试性和可维护性。文章详细讲解了Hilt的主要概念、基本用法及原理，帮助开发者更好地理解和应用Hilt。
Ant.Dream
60 8
帅政的oss
|
1月前
|
安全 Java Android开发
探索安卓应用开发的新趋势：Kotlin和Jetpack Compose
在安卓应用开发领域，随着技术的不断进步，新的编程语言和框架层出不穷。Kotlin作为一种现代的编程语言，因其简洁性和高效性正逐渐取代Java成为安卓开发的首选语言。同时，Jetpack Compose作为一个新的UI工具包，提供了一种声明式的UI设计方法，使得界面编写更加直观和灵活。本文将深入探讨Kotlin和Jetpack Compose的特点、优势以及如何结合使用它们来构建现代化的安卓应用。
帅政的oss
43 4
蓝色流星1000
|
3月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app， webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中，集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤：1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限，考虑Android 11的分区存储；2) 配置WebView允许JavaScript和文件访问，启用`javaScriptEnabled`、`allowFileAccess`等设置；3) HTML5页面使用`<input type="file">`让用户选择文件，利用File API；
蓝色流星1000
126 5
蓝色流星1000
|
4月前
|
JavaScript Java Android开发
kotlin安卓在Jetpack Compose 框架下跨组件通讯EventBus
**EventBus** 是一个Android事件总线库，简化组件间通信。要使用它，首先在Gradle中添加依赖`implementation &#39;org.greenrobot:eventbus:3.3.1&#39;`。然后，可选地定义事件类如`MessageEvent`。在活动或Fragment的`onCreate`中注册订阅者，在`onDestroy`中反注册。通过`@Subscribe`注解方法处理事件，如`onMessageEvent`。发送事件使用`EventBus.getDefault().post()`。
蓝色流星1000
346 2
蓝色流星1000
|
4月前
|
安全 JavaScript 前端开发
kotlin开发安卓app，JetPack Compose框架，给webview新增一个按钮，点击刷新网页
在Kotlin中开发Android应用，使用Jetpack Compose框架时，可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角，点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要：
蓝色流星1000
105 1
蓝色流星1000
|
4月前
|
缓存 Android开发 Kotlin
【安卓app开发】kotlin Jetpack Compose框架 | 先用OKhttp下载远程音频文件再使用ExoPlayer播放
使用 Kotlin 的 Jetpack Compose 开发安卓应用时，可以结合 OkHttp 下载远程音频文件和 ExoPlayer 进行播放。在 `build.gradle` 添加相关依赖后，示例代码展示了如何下载音频并用 ExoPlayer 播放。代码包括添加依赖、下载文件、播放文件及简单的 Compose UI。注意，示例未包含完整错误处理和资源释放，实际应用需补充这些内容。
蓝色流星1000
199 5
蓝色流星1000
|
4月前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview ， 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件，设置JavaScript交互：`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类，允许JavaScript调用Android方法如播放音频。当页面加载完成时，执行`onWebViewReady`回调。
蓝色流星1000
257 2
蓝色流星1000
|
4月前
|
存储 Android开发 Kotlin
开发安卓app OKhttp下载后使用MediaPlayer播放
在Android Jetpack Compose应用程序中，要使用OkHttp下载远程音频文件并在本地播放，你需要完成以下几个步骤： 1. **添加依赖**：确保`build.gradle`文件包含OkHttp和Jetpack Compose的相关依赖。 2. **下载逻辑**：创建一个`suspend`函数，使用OkHttp发起网络请求下载音频文件到本地。 3. **播放逻辑**：利用`MediaPlayer`管理音频播放状态。 4. **Compose UI**：构建用户界面，包含下载和播放音频的按钮。
蓝色流星1000
112 4

热门文章

最新文章

  • 1
    Jetpack DataStore 你总要了解一下吧？
  • 2
    Jetpack MVVM 常见错误用法（四） 使用 LiveData/StateFlow 发送 Event
  • 3
    android Jetpack—ViewModel使用方法和详细原理解析
  • 4
    android Jetpack组件Navigation导航组件--组件间跳转、组件间传值功能实现
  • 5
    Jetpack 系列（4）—— 有小伙伴说看不懂 LiveData、Flow、Channel，跟我走
  • 6
    Android Jetpack系列之Lifecycle
  • 7
    Android Jetpack组件 DataStore的使用和简单封装
  • 8
    android Jetpack Navigation组件—— 之嵌套导航图
  • 9
    Android Jetpack系列之 ViewModel
  • 10
    Android Jetpack系列之MVVM使用及封装
  • 1
    构建高效Android应用：采用Kotlin与Jetpack的实践指南
    58
  • 2
    构建高效Android应用：采用Kotlin与Jetpack的实践指南
    61
  • 3
    构建高效Android应用：采用Kotlin与Jetpack的实践指南
    44
  • 4
    构建高效Android应用：使用Jetpack架构组件实现MVVM模式
    80
  • 5
    构建高效的安卓应用：探究Android Jetpack架构组件
    71
  • 6
    构建高效的安卓应用：使用Jetpack Compose实现动态UI
    162
  • 7
    构建高效安卓应用：采用Jetpack架构组件优化用户体验
    54
  • 8
    构建高效安卓应用：采用Jetpack Compose实现动态UI
    154
  • 9
    构建高效安卓应用：Jetpack MVVM 架构的实践之路
    83
  • 10
    构建高效的安卓应用：使用Jetpack Compose优化UI开发
    120

    • 相关电子书

    更多
  • Flutter in action
  • 《Flutter in action》
  • 低代码开发师（初级）实战教程
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片