在jetpack compose中暴露loadState时多次重组的函数答案

【问题标题】：Function recomposing multiple times on exposing loadState in jetpack compose在jetpack compose中暴露loadState时多次重组的函数
【发布时间】：2021-08-12 19:58:31
【问题描述】：

我是 jetpack compose 的新手，正在尝试实现他们新的 paging-compose api。我面临的问题是，如果我公开 loadState 以检查列表是否正在加载我的函数是否多次重新组合，如果我删除了加载状态侦听器，那么它会按预期工作。在下面的代码中，我编写了整个可组合函数

    private fun SupportScreen() {
        val issueTypes =
            produceState<ApiResource<IssueModel>>(initialValue = ApiResource.loading()) {
                value = supportViewModel.getIssuesType()
            }.value
        when (issueTypes.status) {
            ApiResource.Status.SUCCESS -> {
                dashboardActivity.stopProgressBar()
                val getTickets = remember { supportViewModel.getAllTickets() }
                val tickets = getTickets.collectAsLazyPagingItems()
                LaunchedEffect(tickets.loadState) {
                        when (tickets.loadState.refresh) {
                            is LoadState.Loading -> {
                                dashboardActivity.startProgressBar()
                            }
                            is LoadState.NotLoading -> {
                                dashboardActivity.stopProgressBar()
                                Log.e("Not loading", "Not loading")
                            }
                            is LoadState.Error -> {
                                dashboardActivity.stopProgressBar()
                            }
                        }
                    }
                LazyColumn(
                    contentPadding = PaddingValues(bottom = 16.dp),
                    modifier = Modifier
                        .fillMaxHeight()
                        .fillMaxWidth()
                        .background(Color.White)
                ) {
                    stickyHeader {
                        Row(verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(color = colorResource(id = R.color.white))) {
                            Image(painter = painterResource(id = R.drawable.ic_back),
                                contentDescription = null,
                                modifier = Modifier
                                    .wrapContentSize()
                                    .padding(20.dp))
                            Text(text = "Need Help",
                                fontSize = 16.sp,
                                fontFamily = lato,
                                fontWeight = FontWeight.Bold,
                                modifier = Modifier.padding(12.dp))
                        }
                    }
                    item {
                        Text(text = "Select Type of Issue", fontSize = 14.sp,
                            fontFamily = lato,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier.padding(20.dp))
                    }
                    issueTypes.data?.let {
                        items(it.issueData.windowed(size = 3,
                            step = 3,
                            partialWindows = true)) { subList ->
                            Row(horizontalArrangement = Arrangement.SpaceAround,
                                modifier = Modifier
                                    .fillMaxWidth()) {
                                subList.forEach { issueData ->
                                    IssueType(issueType = issueData)
                                }
                            }
                        }
                    }
                    item {
                        Row(horizontalArrangement = Arrangement.Center,
                            modifier = Modifier
                                .background(color = colorResource(id = R.color.light_blue))
                                .fillMaxWidth()
                                .padding(vertical = 20.dp)) {
                            Image(painter = painterResource(id = R.drawable.ic_phone),
                                contentDescription = null)
                            Spacer(modifier = Modifier.width(width = 20.dp))
                            Text(
                                text = "Contact us on +91 861311213",
                                fontSize = 14.sp,
                                fontFamily = lato,
                                fontWeight = FontWeight.Bold,
                            )
                        }
                    }
                    item {
                        Text(text = "Past Issues",
                            color = colorResource(id = R.color.secondary),
                            fontSize = 16.sp,
                            fontFamily = lato,
                            fontWeight = FontWeight.Bold,
                            modifier = Modifier.padding(start = 20.dp, top = 32.dp, bottom = 16.dp))
                    }
                    tickets.apply {
                        if (itemCount > 0) {
                            items(this, key = {
                                it.ticketId
                            }) { ticket ->
                                ticket?.let { TicketView(ticket = it) }
                            }
                        }
                    }
                }
            }
            ApiResource.Status.ERROR -> {
                dashboardActivity.stopProgressBar()
            }
            ApiResource.Status.LOADING -> {
                dashboardActivity.startProgressBar()
            }
        }
    }

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

尝试将 loadStateListener 设置为不同的可组合对象

@Composable
fun <T : Any> pagingLoadingState(
    dashboardActivity: DashboardActivity,
    pagingItems: LazyPagingItems<T>,
    showLoadState: (pagingState: PagingEnum) -> Unit,
    isLoaded: (() -> Unit)? = null
) {
    pagingItems.loadState.apply {
        when {
            append is LoadState.Loading -> {
                showLoadState(PagingEnum.LOADING)
            }
            append is LoadState.NotLoading -> {
                showLoadState(PagingEnum.FINISHED)
            }
            append is LoadState.Error -> {
                showLoadState(PagingEnum.ERROR)
            }
            refresh is LoadState.Loading -> {
                dashboardActivity.startProgressBar()
            }
            refresh is LoadState.NotLoading -> {
                dashboardActivity.stopProgressBar()
                if (isLoaded != null) {
                    isLoaded()
                }
            }
            refresh is LoadState.Error -> {
                dashboardActivity.stopProgressBar()
            }
        }
    }
}

如果有人以后有任何问题，请询问

【讨论】：

我不确定究竟是什么解决了您的问题，但您不应该在 LaunchedEffect 之外进行此类状态修改。