Jetpack Compose中EmptyContentFavorite异常显示问题求助

问题说明 #

我实现了EmptyContentFavorite()空状态页面，原本期望仅当收藏列表为空时才显示它，但目前每次点击进入该页面都会显示这个空状态页面，需要修改代码实现仅在列表确实为空时展示。

原代码示例 #

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun FavoriteScreen(
    navController: NavController,
    viewModel: FavoriteViewModel = hiltViewModel(),
) {

    val state = viewModel.state.value

    val books = state.books
    var currentSortOrder by remember { mutableStateOf<SortOrder>(SortOrder.DateDescending) }
    val sortedBooks = when (currentSortOrder) {
        SortOrder.DateDescending -> books.sortedByDescending { it.timestamp }
        SortOrder.DateAscending -> books.sortedBy { it.timestamp }
        SortOrder.PageCountIncrement -> books.sortedBy { it.pageCount.toInt() }
        SortOrder.PageCountDecrement -> books.sortedByDescending { it.pageCount.toInt() }
        SortOrder.Shortest -> books.sortedBy { it.bookName.length }
        SortOrder.Longest -> books.sortedByDescending { it.bookName.length }
    }
    
    val isLoading by viewModel.isLoading.collectAsState()
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing = isLoading)
    

    Scaffold(
        topBar = {
            FavoriteTopBar(navController = navController)
        },
        modifier = Modifier.padding(bottom = 45.dp)
    ) {

        Spacer(modifier = Modifier.height(12.dp))

        SwipeRefresh(
            state = swipeRefreshState,
            onRefresh = {
                viewModel.getBooks(BookOrder.Date(OrderType.Descending))
            },
            modifier = Modifier.padding(top = 20.dp)
        ) {
            // 原判断逻辑
            if (books.isNotEmpty()) {                
                LazyVerticalStaggeredGrid(
                    columns = StaggeredGridCells.Fixed(2),
                    modifier = Modifier.fillMaxSize(),
                    contentPadding = PaddingValues(
                        top = 50.dp,
                        bottom = 50.dp
                    ),
                    horizontalArrangement = Arrangement.spacedBy(16.dp),
                    verticalItemSpacing = 16.dp
                ) {
                    items(sortedBooks) { book ->
                        FavoriteItem(
                            book = book
                        )

                        Spacer(modifier = Modifier.height(16.dp))
                    }
                }
            } else {
                EmptyContentFavorite()
            }
        }
    }
}

@Composable
fun EmptyContentFavorite() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.red_heart),
            contentDescription = "no favorite",
            modifier = Modifier.size(96.dp)
        )
        Text(text = "You have no favorites!")
    }
}

修复方案 #

问题根源：页面初始化时state.books初始为空列表，而数据加载是异步操作，导致刚进入页面就直接触发空状态显示，加载完成后才会更新为列表。需要结合isLoading状态判断，避免加载过程中误显示空状态。

修改后的核心代码部分：

SwipeRefresh(
    state = swipeRefreshState,
    onRefresh = {
        viewModel.getBooks(BookOrder.Date(OrderType.Descending))
    },
    modifier = Modifier.padding(top = 20.dp)
) {
    // 修复后的判断逻辑
    if (isLoading) {
        // 加载中显示进度指示器，可根据需求调整样式
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator()
        }
    } else if (books.isNotEmpty()) {                
        LazyVerticalStaggeredGrid(
            columns = StaggeredGridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(
                top = 50.dp,
                bottom = 50.dp
            ),
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            verticalItemSpacing = 16.dp
        ) {
            items(sortedBooks) { book ->
                FavoriteItem(
                    book = book
                )

                Spacer(modifier = Modifier.height(16.dp))
            }
        }
    } else {
        EmptyContentFavorite()
    }
}

修复说明 #

• 当isLoading为true时，显示加载指示器，避免空状态提前出现
• 加载完成后，若books不为空则显示收藏列表，为空时才展示空状态页面

内容的提问来源于stack exchange，提问作者oolyvi