上一次简单讲了讲 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 决定。

本期内容比较短，到这里其实就已经结束了，这个下拉刷新组件已经可以正常使用了。