JetpackCompose Material3实现下拉刷新

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实现下拉刷新的功能