尽管使用 LazyColumn 实现了循环进度条，但仍显示空列表消息答案

【问题标题】：Empty list message still shown despite circular progress bar implementation with LazyColumn尽管使用 LazyColumn 实现了循环进度条，但仍显示空列表消息
【发布时间】：2022-11-14 22:40:15
【问题描述】：

我有一个LazyColumn，它显示从ViewModel 的数据库中检索到的购物清单项目列表。如果检索到的项目列表为空，LazyColumn 将显示以下消息：“您的购物清单中没有任何商品。”问题是在显示项目之前，此消息会短暂显示 1 秒钟。为了解决这个问题，我在检索项目时实现了一个圆形进度条，但它甚至没有出现，消息仍然显示。我怎样才能解决这个问题？

视图模型

@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 {
      loading.value = true
      getAllShoppingListItemsFromDb()
   }

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

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)
                ) {
                    item {
                        if (allItems != null && allItems.itemCount == 0) {
                            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 { Spacer(modifier = Modifier.padding(screenHeight - (screenHeight - 70.dp))) }
                }

            ConditionalCircularProgressBar(isDisplayed = showProgressBar)
        }
    }
}

【问题讨论】：

标签： android android-jetpack-compose kotlin-coroutines android-viewmodel lazycolumn

【解决方案1】：

快速解决方案：

val showProgressBar = shoppingListScreenViewModel.loading.collectAdState()

并将此条件添加到“您没有任何物品...”if，如下所示：

if (allItems != null && allItems.itemCount == 0 && !showProgressBar) { ... }

更好的解决方案是使用密封类来实现这一点，您将为不同的状态返回不同的类（例如加载、错误、空、数据）。而在 UI 方面，您只需要when 覆盖可能的数据类型。 Here 你可以找到一个完美的例子。

【讨论】：