本文最后更新于 75 天前,其中的信息可能已经有所发展或是发生改变。
上一次简单讲了讲 Compose 里的主题以及状态管理,这次的下拉刷新也是非常重要的一个组件之一。
与传统的 SwipeRefreshLayout 不同的是,在 Compose 中是用 Modifier 来声明下拉状态的,并且通过一个 PullRefreshIndicator 组件来显示加载圆圈。
首先准备一个 ViewModel 来保存刷新状态:
val refreshing by viewModel.isRefreshing.observeAsState(false)
然后用 rememberPullRefreshState() 声明一个动态变量用来保存刷新状态以及刷新事件:
val refreshState = rememberPullRefreshState(refreshing, {
// TODO
})
第二个参数就是 onRefresh(),当触发下拉刷新时执行。
接下来准备一个 Box 组件用来包裹要使用下拉刷新的组件:
Box(modifier = Modifier.pullRefresh(messageListRefreshState).weight(1f)) {
// Other Components
PullRefreshIndicator(
modifier = Modifier.align(Alignment.TopCenter),
refreshing = refreshing,
state = refreshState,
contentColor = MaterialTheme.colorScheme.primary,
backgroundColor = MaterialTheme.colorScheme.background
)
}
将 PullRefreshIndicator 组件放在最下面即可,其出现的位置由 align 决定。
本期内容比较短,到这里其实就已经结束了,这个下拉刷新组件已经可以正常使用了。