在 LazyColumn jetpack compose 中有类似 swiperrefreshlayout 的东西可以拉刷新

Question

有类似 swiperrefreshlayout 的东西可以在喷气背包组合中拉动刷新

Answer 1

从M2 1.3.0-beta03开始，有一个新的内置 Pull-To-Refresh 组件，带有pullRefresh修改器。

你可以使用类似的东西：

val refreshScope = rememberCoroutineScope()
var refreshing by remember { mutableStateOf(false) }
var itemCount by remember { mutableStateOf(15) }

fun refresh() = refreshScope.launch {
    refreshing = true
    delay(1500)
    itemCount += 5
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)

//pullRefresh modifier
Box(Modifier.pullRefresh(state)) {

    //vertically scrollable content
    LazyColumn(Modifier.fillMaxSize()) {
        if (!refreshing) {
            items(itemCount) {
                ListItem { Text(text = "Item ${itemCount - it}") }
            }
        }
    }

    //standard Pull-Refresh indicator. You can also use a custom indicator 
    PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}

注意：pullRefresh目前，带有修饰符的可组合项的内容需要“垂直滚动”才能对滑动手势做出反应。诸如LazyColumn自动垂直滚动之类的布局，在其他情况下，您可以verticalScroll为该内容提供修饰符。

就像是：

//pullRefresh modifier
Box( Modifier.pullRefresh(state) ) {

    //vertically scrollable content
    Column(Modifier.verticalScroll(rememberScrollState())) {
        // content
    }

    //PullRefreshIndicator
}

Answer 2

Google的 Accompanist现已弃用。从 versin 1.3.0 开始，Compose Material 现已提供官方支持，使用以下代码：

我用1、2、3标记的行完成了这项工作：

val ptrState= 
   rememberPullRefreshState(viewState.isRefreshing, {viewModel.pullToRefresh()}) // 1

Box(modifier = Modifier
    .fillMaxSize()
    .pullRefresh(ptrState)) { // 2
    LazyColumn(state = rememberLazyListState()) {
        items(
            items = viewState.YOUR_LIST_ITEMS,
            key = { item -> item.id },
            itemContent = {
                YourItemCompose(it)
            })
    }
    PullRefreshIndicator
          (viewState.isRefreshing, ptrState, Modifier.align(Alignment.TopCenter)) // 3
}

viewState.isRefreshing是一个保存刷新状态的布尔值，viewModel.pullToRefresh()是执行刷新数据的实际工作的方法（例如再次调用 API）

如果您不知道依赖关系：

    implementation 'androidx.compose.material:material:1.4.0-alpha02' 

Answer 3

您可以使用Google 的 Accompanist库来实现滑动刷新。

示例用法：

val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()

SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { viewModel.refresh() },
) {
    LazyColumn {
        items(30) { index ->
            // TODO: list items
        }
    }
}

文档：https : //google.github.io/accompanist/swiperrefresh/