0

我SwipeRefresh在撰写中使用视图（来自伴奏者）。我在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
            )
        }
    }
}
4

1 回答 1

1

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

所以也许有太少的元素 Compose 会自动使LazyColumn/LazyVerticalGrid不可滚动以优化事物？

我最好的猜测是当您没有要显示的项目时显示一个 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(...) {
             // ...
        }
    }
}
于 2022-01-30T16:06:23.073 回答