我们先将传入的数据做一个调整,对marsUiState做一个限制(只有三种状态:正在加载、成功和错误),成功的话则保存数据(从网络返回的JSON数据)。先在MarsViewModel.kt文件,在 import 语句后,新增一个接口做类型限制:sealed interface MarsUiState { data class Success : MarsUiState data class Loading : MarsUiState data class Error : MarsUiState}
1.为了存储数据,向 Success 数据类添加一个构造函数参数。2.对于 Loading 和 Error 状态,无需设置新数据和创建新对象;只需传递网络响应即可。将 data 类更改为 Object,以便为网络响应创建对象。sealed interface MarsUiState { data class Success(val photos: String) : MarsUiState object Error : MarsUiState object Loading : MarsUiState}
private val _marsUiState = MutableStateFlow<MarsUiState>(MarsUiState.Loading)//MutableStateFlow 是 ViewModel 专用的可观察可变状态容器,属于 Kotlin 协程 Flow 体系,专门用来存放页面 UI 数据。// 对外只读状态,UI只能读取不能修改val marsUiState: StateFlow<MarsUiState> = _marsUiState
try { val listResult = MarsApi.retrofitService.getPhotos()//使用单例对象 MarsApi 从 retrofitService 接口调用 getPhotos() 方法。将返回的响应保存在名为 listResult 的 val 中。 _marsUiState.value = MarsUiState.Success(listResult) } catch(e: Exception) { _marsUiState.value = MarsUiState.Error }
在MainActivity.kt界面上,添加一个when来做对应的状态识别:val uiState = vm?.marsUiState?.collectAsStateWithLifecycle()?.value val jsonText = when (uiState) { is MarsUiState.Loading -> "等待中" is MarsUiState.Success -> uiState.photos is MarsUiState.Error -> "出现错误" null -> "ViewModel未初始化" }
这里和大家说一声抱歉,本来打算解析JSON内容,取出图片网址,然后再一步步替换应用中图片的,但是测试发现这个网址很不稳定,图片地址老是找不到图片,但是我也暂时没有其他的替代网址,所以有关解析JSON内容,我们延后一起学习。
然后我们继续往下学习怎么实现从网络上获取替换原有图片。图片网址:https://picsum.photos/id/1/600/600(修改标红的序号就可以更换图片)build.gradle.kt添加引用(Compose 加载网络图要用 Coil 的 AsyncImage /rememberAsyncImagePainter。):implementation("io.coil-kt:coil-compose:2.6.0")
import coil.compose.rememberAsyncImagePainter
@Composablepublic funGetImg(Index: Int): Painter {// return when(Index){// 1->painterResource(R.drawable._1)// 2->painterResource(R.drawable._2)// 3->painterResource(R.drawable._3)// 4->painterResource(R.drawable._4)// 5->painterResource(R.drawable._5)// else -> painterResource(R.drawable._1)// } val imageUrl = "https://picsum.photos/id/$Index/600/600" return rememberAsyncImagePainter(imageUrl)}
再去运行代码,你就会发现使用按钮可以替换对应的图片,是从网络获取的。(正常来说,我们是从获取的JSON获取我们需要的信息,然后用图片或者文字的形式展现出来的。)