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,
            )
        }`

结果

相关推荐
鸿蒙布道师10 分钟前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Harrison_zhu1 小时前
Ubuntu18.04 编译 Android7.1代码报错
android
CYRUS STUDIO3 小时前
Unidbg Trace 反 OLLVM 控制流平坦化(fla)
android·汇编·算法·网络安全·逆向·ollvm
扫地的小何尚4 小时前
NVIDIA工业设施数字孪生中的机器人模拟
android·java·c++·链表·语言模型·机器人·gpu
顾林海5 小时前
深度解析ArrayList工作原理
android·java·面试
安静的海岸_AI5 小时前
Android端WIFI/流量共存技术方案
android
_一条咸鱼_6 小时前
Android Compose 框架进度指示器深入剖析(五十二)
android
张风捷特烈6 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter
每次的天空6 小时前
Kotlin 作用域函数:apply、let、run、with、also
android·开发语言·kotlin
重生之我在写代码6 小时前
如何进行apk反编译
android·程序员·编译器