如果 LazyGridView 在撰写中没有子项，则滑动刷新不起作用

Question

我在撰写中使用 SwipeRefresh 视图（来自 accompanist）。我里面有 LazyVerticalGrid，网格从网络填充分页数据。如果分页数据中没有内容，我将显示空状态视图。当有一些数据时，滑动刷新就可以了。问题是，如果没有数据，我无法在 LazyVerticalGrid 中进行滑动刷新，但在 LazyColumn 中同样有效（两种情况都显示 NoContentView）。

@Composable
fun GridItems(
    searchViewModel: SearchViewModel
) {
    var isRefreshing by remember { mutableStateOf(false) }
    val posts = remember { searchViewModel.posts }.collectAsLazyPagingItems()

    Scaffold(
        topBar = { MyTopBar() }
    ) { innerPadding ->
        SwipeRefresh(
            state = rememberSwipeRefreshState(isRefreshing = isRefreshing),
            onRefresh = { searchViewModel.getPosts() }
        ) {
            Column(modifier = Modifier.padding(innerPadding)) {
                LazyVerticalGrid(
                    cells = GridCells.Fixed(3),
                    modifier = modifier.padding(horizontal = 3.dp)
                ) {
                    items() {
                        MySinglePostItem()
                    }

                    posts.apply {
                        when {
                            //Other loadState here

                            // Show below view if no item is present in paging data 
                            loadState.refresh is LoadState.NotLoading && loadState.append.endOfPaginationReached && posts.itemCount < 1 -> {
                                NoContentView(Modifier.fillMaxSize())
                            }
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun NoContentView(modifier: Modifier = Modifier) {
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                modifier = Modifier.size(48.dp),
                painter = painterResource(id = R.drawable.ic_outlined_image_no_content)
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = stringResource(id = R.string.empty_posts_message),
                fontSize = 15.sp
            )
        }
    }
}

Answer 1

正如 Accompanist 在其 documentation 中所述，SwipeRefresh 需要一些可滚动的内容以便能够对滑动手势做出反应。

因此，也许 Compose 的元素太少会自动生成 LazyColumn/LazyVerticalGrid non-scrollable 以便进行优化？

我最好的猜测是当您没有要显示的项目时显示 Scrollable-Column，否则显示 LazyVerticalGrid。

SwipeRefresh(...) {
    if (loadState.refresh is LoadState.NotLoading && loadState.append.endOfPaginationReached && posts.itemCount < 1) {
        Column(Modifier.verticalScroll(rememberScrollState())) {
            NoContentView(Modifier.fillMaxSize())
        }
    } else {
        LazyVerticalGrid(...) {
             // ...
        }
    }
}

如果 LazyGridView 在撰写中没有子项，则滑动刷新不起作用

Swipe to refresh is not working if LazyGridView has no child in compose

android

android-jetpack-compose

jetpack-compose-accompanist