JetpackCompose Material3完成下拉改写

1.前语

在material3中很遗憾到现在方位2023年/5月26日官方还是没有更新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完成下拉改写的功用

8.结束

欢迎加群交流一同讨论计算机相关知识:QQ群259352297

这个文档对应的B站的视频教程:5分钟学会Compose material3下拉改写_哔哩哔哩_bilibili