JetpackCompose Material3实现下拉刷新
1.前言
在material3中很遗憾到目前位置2023年/5月27日官方还是没有更新material3的下拉组件,网上搜和ai查询的结果都是推荐使用Modifier.pullRefresh来实现下拉刷新,但是这个是material2中的API material3中无法使用这个API,不过呢 好在官方之前在m2没有适配下拉刷新的时候单独提供了一个下拉刷新的组件,所以目前在material3中如果想实现下拉刷新的功能只能使用之前那个组件来实现,或者手动写监听,但是这个成本和复杂度都很高,只能等后期官方开发内置
2.开发环境
jetpackCompose material3、kotlin、gradle kotlinDSL
3.导入下拉刷新控件
implementation(“com.google.accompanist:accompanist-swiperefresh:0.30.1”)
4.基本布局
一个59项的列表
//布局
LazyColumn {
items(50) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(5.dp),
elevation = CardDefaults.cardElevation(
defaultElevation = 1.dp
),
shape = RoundedCornerShape(5.dp)
) {
Text(modifier = Modifier.padding(20.dp), text = it.toString())
}
}
}
5.使用下拉刷新控件(SwipeRefresh)
SwipeRefresh(state =, onRefresh = {
viewModel.startRefresh()
}) {
///布局
}
state:是下拉刷新开启的状态,通过rememberSwipeRefreshState创建
onRefresh:下拉的回调函数,下拉手势的监听,可以在这里面开启下拉
下面的花括号内就是下拉刷新包裹的布局这个用法和xml安卓的那个下拉刷新其实是一个意思
6.创建state下拉刷新状态
//这里的下拉刷新状态使用rememberSwipeRefreshState创建 其中isRefreshing就是下拉开启的判断值 Boolean类型
//refreshState我们通过Viewmodel来获取 遵循MVI架构在Viewmodel进行数据逻辑更新view层只管获取最新的数据进行操作即可
val swipeRefresh= rememberSwipeRefreshState(isRefreshing = refreshState)
SwipeRefresh(state =swipeRefresh, onRefresh = {
viewModel.startRefresh()
}) {
///布局
}
//定义ViewModel
class OtherViewModel:ViewModel(){
//使用MutableStateFlow创建展示的状态值,布尔类型,
private var _refresh=MutableStateFlow(false)
//view层不能对它直接操作我们要通过另一个变量暴露出去让view层只能读取
val refresh=_refresh
//通过调用startRefresh()来进行刷新的状态值的改变
fun startRefresh(){
//刷新是异步操作所以应该在协程中
//使用 viewModelScope.launch开启协程
viewModelScope.launch {
_refresh.value=true
//两秒后把状态改为false关闭刷新
delay(1000)
_refresh.value=false
}
}
}
7.在View层使用ViewModel中的值来改变刷新的状态
//创建ViewmModel
val viewModel:OtherViewModel= viewModel()
//通过collectAsState()动态跟踪获取refresh的最新值
val refreshState by viewModel.refresh.collectAsState()
//把refreshState传入rememberSwipeRefreshState创建refresh状态属性
val swipeRefresh= rememberSwipeRefreshState(isRefreshing = refreshState)
SwipeRefresh(state =swipeRefresh, onRefresh = {
//在下拉手势监听的回调中调用startRefresh()开启刷新
viewModel.startRefresh()
}) {
//下拉控件包裹布局
Box(
modifier = Modifier
.fillMaxSize()
.background(MaterialTheme.colorScheme.surface)
) {
LazyColumn {
items(50) {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(5.dp),
elevation = CardDefaults.cardElevation(
defaultElevation = 1.dp
),
shape = RoundedCornerShape(5.dp)
) {
Text(modifier = Modifier.padding(20.dp), text = it.toString())
}
}
}
}
}
//到目前为止就完成了material3实现下拉刷新的功能
最后
如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。
如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。
全套视频资料:
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持,若需要文中资料,直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓
PS:群里还设有ChatGPT机器人,可以解答大家在工作上或者是技术上的问题