尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Jetpack Compose - MutableStateFlow、LaunchedEffect 函数

Jetpack Compose - MutableStateFlow、LaunchedEffect 函数 MutableStateFlow1、基本介绍MutableStateFlow 是 Kotlin 协程库中专门用于状态管理的热流MutableStateFlow 可以看作 MutableLiveData 的协程版本它们的设计目标一致持有可观察的可变数据StateFlow 是只读的MutableStateFlow 是可读可写的2、演示classMyViewModel{// 私有可写对外可读privateval_counterMutableStateFlow(0)valcounter:StateFlowInt_counter.asStateFlow()privateval_messageMutableStateFlow()valmessage:StateFlowString_message.asStateFlow()funincrement(){_counter.value_counter.value1_message.value点击了${_counter.value}次}funreset(){_counter.value0_message.value}}使用 collectAsState 函数// 记住状态不然它每次都会重新创建valmyViewModelremember{MyViewModel()}// 订阅数据数据更新时自动刷新 UIvalcounterbymyViewModel.counter.collectAsState()valmessagebymyViewModel.message.collectAsState()Column(modifierModifier.fillMaxSize().padding(16.dp),verticalArrangementArrangement.Center){Text(text计数:$counter,fontSize24.sp)Spacer(modifierModifier.height(8.dp))Text(textmessage,fontSize16.sp)Spacer(modifierModifier.height(16.dp))Button(onClick{myViewModel.increment()}){Text(增加)}Spacer(modifierModifier.height(8.dp))Button(onClick{myViewModel.reset()}){Text(重置)}}使用 collect 函数// 记住状态不然它每次都会重新创建valmyViewModelremember{MyViewModel()}varcounterbyremember{mutableStateOf(0)}varmessagebyremember{mutableStateOf()}LaunchedEffect(Unit){myViewModel.counter.collect{newValue-counternewValue}}LaunchedEffect(Unit){myViewModel.message.collect{newValue-messagenewValue}}Column(modifierModifier.fillMaxSize().padding(16.dp),verticalArrangementArrangement.Center){Text(text计数:$counter,fontSize24.sp)Spacer(modifierModifier.height(8.dp))Text(textmessage,fontSize16.sp)Spacer(modifierModifier.height(16.dp))Button(onClick{myViewModel.increment()}){Text(增加)}Spacer(modifierModifier.height(8.dp))Button(onClick{myViewModel.reset()}){Text(重置)}}LaunchedEffect 函数1、基本介绍在 Compose 中LaunchedEffect 函数专门用来安全执行挂起函数生命周期自动绑定到可组合项场景说明进入组合启动协程执行代码块退出组合自动取消协程键值变化时重组先取消旧协程再启动新协程键值选择如下键值行为Unit只执行一次不重启key (变量)变量变化时重启2、演示ComposablefunMainPage(){varmessagebyremember{mutableStateOf(首页加载中)}LaunchedEffect(Unit){delay(2000)message首页加载完成}Text(message,fontSize24.sp)}首页加载只执行一次在这个例子中LaunchedEffect 绑定到了 MainPage 这个可组合函数ComposablefunMainPage(){varkeywordbyremember{mutableStateOf()}varsearchResultsbyremember{mutableStateOf(listOfString())}LaunchedEffect(keyword){delay(2*1000)if(keyword.isNotBlank()){searchResultskeyword.map{it.toString()}}else{searchResultsemptyList()}}Column{TextField(valuekeyword,onValueChange{keywordit})searchResults.forEach{Text(it)}}}搜索防抖用户每次输入keyword 变化触发 LaunchedEffect每次都会等待 2 秒如果在 2 秒内 keyword 再次变化会取消之前的协程重新开始计时只有稳定 2 秒没有新输入才会执行更新 searchResultsComposablefunMainPage(){valalpharemember{Animatable(1f)}LaunchedEffect(Unit){while(isActive){delay(1000)alpha.animateTo(0f,tween(300))// 将 alpha 值从 1f 动画到 0f时长 300msalpha.animateTo(1f,tween(300))// 将 alpha 值从 0f 动画到 1f时长 300ms}}Box(modifierModifier.size(100.dp).background(Color.Red.copy(alphaalpha.value)))}呼吸灯效果循环重复isActive 检查协程是否还在运行
返回列表