如何在Jetpack compose中實現滑動刷新

Question

如何使用 kotlin 在 Jetpack compose 中創建滑動刷新？ 請分享正確的參考鏈接

刷卡刷新不可用

 SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing),
        onRefresh = {  },
    ) {
        LazyColumn {
           
        }
    }

Answer 1

要在 Jetpack Compose 中創建滑動刷新，您可以在此處找到 Accompanist 庫： https ://google.github.io/accompanist/swiperefresh/

基本用法：

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

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

Answer 2

要創建滑動刷新布局，我們需要在 buld.gradle 中添加依賴項，它將提供滑動刷新布局，就像傳統 android 中的 SwipeRefreshLayout 一樣。

  implementation 'com.google.accompanist:accompanist-swiperefresh:0.24.13-rc'

..

要創建這種布局，我們需要兩個 API，一個用於布局的 SwipeRefresh，另一個用於記住狀態的 rememberSwipeRefreshState。

@Composable
fun SwipeRefreshCompose() {

    var refreshing by remember { mutableStateOf(false) }
    LaunchedEffect(refreshing) {
        if (refreshing) {
            delay(3000)
            refreshing = false
        }
    }

    SwipeRefresh(
        state = rememberSwipeRefreshState(isRefreshing = refreshing),
        onRefresh = { refreshing = true },
    ) {

       // list view

    }

}

Answer 3

現在您可以使用內置的pullRefresh修改器。

就像是：

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

fun refresh() = refreshScope.launch {
    refreshing = true
    //...do something
    refreshing = false
}

val state = rememberPullRefreshState(refreshing, ::refresh)

Box(Modifier.pullRefresh(state)) {
    LazyColumn(Modifier.fillMaxSize()) {
        if (!refreshing) {
            items(itemCount) {
                //...
            }
        }
    }

    PullRefreshIndicator(refreshing, state, Modifier.align(Alignment.TopCenter))
}