Android Compose 十一:常用组件列表 compose自己个的 下拉刷新

列表下拉刷新

  • material3 还没有下拉刷新功能
  • material:1.3.0 之后 swiperefresh 被弃用 被PullRefresh替代
  • 使用PullRefresh 需要添加依赖 implementation 'androidx.compose.material:material:1.6.8'
先上代码
复制代码
var refreshing by remember {
        mutableStateOf(false)
    }    

    val list = remember{
        List(10){"条目》》${it}"}.toMutableStateList()
    }

    val scope = rememberCoroutineScope()
    val refreshState = rememberPullRefreshState(refreshing = refreshing, onRefresh = {
        scope.launch {
            refreshing = true
            list.addAll( List(20){
                delay(100)
                "新的条目》》${it}"
            })
            refreshing = false
        }
    })

    Box(modifier = Modifier
        .pullRefresh(refreshState)
        .padding(20.dp)){
        LazyColumn(modifier = Modifier.fillMaxSize()){
            items(list){
                Text(text = "条目>>${it}")
            }
        }

        PullRefreshIndicator(refreshing = refreshing, state = refreshState,modifier=Modifier.align(
            Alignment.TopCenter
        ))
    }
再看效果
  • 默认列表10条
  • 下拉刷新时 协程添加20条 每条延时100ms后刷新结束
接着分析
复制代码
fun Modifier.pullRefresh(
    state: PullRefreshState,     //刷新状态的回调
    enabled: Boolean = true
)

上边是让我们使用rememberPullRefreshState,那么我们就听话看看rememberPullRefreshState

复制代码
@Composable
@ExperimentalMaterialApi
fun rememberPullRefreshState(
    refreshing: Boolean,      //当前是否正在刷新
    onRefresh: () -> Unit,    //刷新时调用此函数
    refreshThreshold: Dp = PullRefreshDefaults.RefreshThreshold,
    refreshingOffset: Dp = PullRefreshDefaults.RefreshingOffset,
): PullRefreshState {
接着我们看看 PullRefreshIndicator
复制代码
fun PullRefreshIndicator(
    refreshing: Boolean,    //A boolean representing whether a refresh is occurring. 
    state: PullRefreshState,  //刷新时的回调函数
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(backgroundColor),
    scale: Boolean = false
) {

如果我们注释掉PullRefreshIndicator

结果

  • 没有了刷新的指示器
  • 依然可以刷新列表

说明:

  • PullRefreshIndicator只是用来显示当前是否正在刷新状态的指示器
  • 执行列表刷新的还是Modifer.pullRefresh
于是乎 开玩
复制代码
//        PullRefreshIndicator(refreshing = refreshing, state = refreshState,modifier=Modifier.align(
//            Alignment.TopCenter
//        ))

        AnimatedVisibility(visible = refreshing,modifier = Modifier.align(Alignment.TopCenter)){
            CircularProgressIndicator(
                modifier = Modifier.width(64.dp),
                color = MaterialTheme.colorScheme.secondary,
            )
        }`

结果

相关推荐
百锦再33 分钟前
Android Studio开发 SharedPreferences 详解
android·ide·android studio
青春给了狗1 小时前
Android 14 修改侧滑手势动画效果
android
CYRUS STUDIO1 小时前
Android APP 热修复原理
android·app·frida·hotfix·热修复
火柴就是我2 小时前
首次使用Android Studio时,http proxy,gradle问题解决
android
limingade2 小时前
手机打电话时电脑坐席同时收听对方说话并插入IVR预录声音片段
android·智能手机·电脑·蓝牙电话·电脑打电话
浩浩测试一下2 小时前
计算机网络中的DHCP是什么呀? 详情解答
android·网络·计算机网络·安全·web安全·网络安全·安全架构
青春给了狗4 小时前
Android 14 系统统一修改app启动时图标大小和圆角
android
pengyu4 小时前
【Flutter 状态管理 - 柒】 | InheritedWidget:藏在组件树里的"魔法"✨
android·flutter·dart
居然是阿宋6 小时前
Kotlin高阶函数 vs Lambda表达式:关键区别与协作关系
android·开发语言·kotlin
凉、介6 小时前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci