后台任务运行时不出现加载进度条

Question

我想在从数据库中检索购物清单项目时显示一个圆形进度条。我有一个Lazycolumn，它显示检索到的购物清单项目，但从不显示圆形进度条，并且在显示列表之前会短暂显示消息"You don't have any items in this shopping list."。这种行为是不希望的。在viewmodel，放置loading.value = false后viewModelScope 协程中的数据库调用不起作用。我怎样才能解决这个问题？

ShoppingListScreen 可组合

fun ShoppingListScreen(
    navController: NavHostController,
    shoppingListScreenViewModel: ShoppingListScreenViewModel,
    sharedViewModel: SharedViewModel
) {
    val scope = rememberCoroutineScope()
    val focusManager = LocalFocusManager.current
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
    val allItems = shoppingListScreenViewModel.shoppingListItemsState.value?.collectAsLazyPagingItems()
    val showProgressBar = shoppingListScreenViewModel.loading.value

    Scaffold(
        topBar = {
            CustomAppBar(
                title = "Shopping List Screen",
                titleFontSize = 20.sp,
                appBarElevation = 4.dp,
                navController = navController
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    shoppingListScreenViewModel.setStateValue(SHOW_ADD_ITEM_DIALOG_STR, true)
                },
                backgroundColor = Color.Blue,
                contentColor = Color.White
            ) {
                Icon(Icons.Filled.Add, "")
            }
        },
        backgroundColor = Color.White,
        // Defaults to false
        isFloatingActionButtonDocked = false,
        bottomBar = { BottomNavigationBar(navController = navController) }
    ) {
        Box {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(screenHeight)
            ) {
                if (allItems?.itemCount == 0) {
                    item { Text("You don't have any items in this shopping list.") }
                }

                items(
                    items = allItems!!,
                    key = { item ->
                        item.id
                    }
                ) { item ->
                    ShoppingListScreenItem(
                        navController = navController,
                        item = item,
                        sharedViewModel = sharedViewModel
                    ) { isChecked ->
                        scope.launch {
                            shoppingListScreenViewModel.changeItemChecked(item!!, isChecked)
                        }
                    }
                }

                item {
                    Text("Testing!")
                }

                item { Spacer(modifier = Modifier.padding(screenHeight - (screenHeight - 70.dp))) }
            }

            ConditionalCircularProgressBar(isDisplayed = showProgressBar)
        }
    }
}

购物清单屏幕视图模型

@HiltViewModel
class ShoppingListScreenViewModel @Inject constructor(
    private val getAllShoppingListItemsUseCase: GetAllShoppingListItemsUseCase
) {
   private val _shoppingListItemsState = mutableStateOf<Flow<PagingData<ShoppingListItem>>?>(null)

   val shoppingListItemsState: State<Flow<PagingData<ShoppingListItem>>?> get() = _shoppingListItemsState

   val loading = mutableStateOf(false)

   init {
      getAllShoppingListItemsFromDb()
   }

   private fun getAllShoppingListItemsFromDb() {
        viewModelScope.launch {
            loading.value = true
            _shoppingListItemsState.value = getAllShoppingListItemsUseCase().distinctUntilChanged()
            loading.value = false
        }
    }
}

Answer 1

将 CircularProgressIndicator 放在 Surface 或 Box 中，也许您正在使用带有导航的 Scaffold，在我的情况下，我在我的循环进度中使用 padding top 60.dp 然后它有点阻碍。