google / accompanist

A collection of extension libraries for Jetpack Compose
https://google.github.io/accompanist
Apache License 2.0
7.34k stars 593 forks source link

EmptyScreenContent works every time #1696

Closed oolyvi closed 11 months ago

oolyvi commented 11 months ago

Description I have a screen, which involves a lazy column with its items. The user should add these items on AddingScreen and these data will be shown on ReadingsScreen, but when this screen is empty, I want to show EmptyContentScreen . The problem is EmptyContentScreen works every time while running the app from the Android studio or my phone. How can I reject this EmptyContentScreen screen and works when the screen is really empty?

My code sample

/*          Reading Screen            */
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun ReadingsScreen(
    onAddReading: () -> Unit,
    onReadingItemClick: () -> Unit,
    viewModel: ReadingViewModel = hiltViewModel(),
) {

    Scaffold(
        topBar = {
            ReadingTopBar(
                onAddReading = onAddReading
            )
        },
        modifier = Modifier.fillMaxSize()
    ) {

        val readings = viewModel.readings.collectAsStateWithLifecycle(initialValue = emptyList())

        if (readings.value.isNotEmpty()) {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp),
                verticalArrangement = Arrangement.Top,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                ReadingContent(
                    readings = readings.value,
                    onReadingItemClick = onReadingItemClick,
                )
            }
        } else {
            ReadingEmptyContent()            
        }

    }

}

/*          Reading Content            */
@Composable
private fun ReadingContent(
    readings: List<Reading>,
    onReadingItemClick: () -> Unit,
    modifier: Modifier = Modifier,
) {

    LazyColumn(
        modifier = modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        contentPadding = PaddingValues(
            top = 74.dp,
            bottom = 74.dp
        )
    ) {
        items(readings) { reading ->
            ReadingItem(
                reading = reading,
                onReadingItemClick = onReadingItemClick
            )
        }

    }

}

/*          Reading Item            */
@Composable
private fun ReadingItem(
    reading: Reading,
    onReadingItemClick: () -> Unit,
) {
    Card(
        border = BorderStroke(3.dp, MaterialTheme.colorScheme.onSurface),
        shape = RoundedCornerShape(30.dp),
        modifier = Modifier
            .clickable {
                onReadingItemClick()
            }
            .background(Color.Transparent)
            .padding(5.dp)
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Row(
                modifier = Modifier
                    .fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Center
            ) {
                AsyncImage(
                    model = ImageRequest.Builder(LocalContext.current)
                        .data(reading.bookImage)
                        .crossfade(true)
                        .build(),
                    contentDescription = "user custom book image",
                    contentScale = ContentScale.Fit,
                    error = painterResource(R.drawable.warning),
                    modifier = Modifier
                        .align(Alignment.CenterVertically)
                        .clip(RoundedCornerShape(30.dp))
                        .height(100.dp)
                        .width(100.dp)
                )
                Column(
                    modifier = Modifier.padding(10.dp)                
                ) {
                    Text(
                        text = reading.bookName,
                        fontWeight = FontWeight.ExtraBold,
                        fontSize = 30.sp,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Divider(thickness = 4.dp, color = Color.Black)
                    Text(
                        text = reading.author,
                        fontWeight = FontWeight.SemiBold,
                        fontStyle = FontStyle.Italic,
                        fontSize = 20.sp,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = reading.genre,
                        fontWeight = FontWeight.SemiBold,
                        fontSize = 20.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = reading.language,
                        fontWeight = FontWeight.SemiBold,
                        fontSize = 20.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = reading.pageCount,
                        fontWeight = FontWeight.SemiBold,
                        fontSize = 18.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                    Text(
                        text = reading.completionDate,
                        fontWeight = FontWeight.Light,
                        fontSize = 18.sp,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface
                    )
                }
            }
        }
    }

}

/*          Reading empty content            */
@Composable
private fun ReadingEmptyContent(
    modifier: Modifier = Modifier,
) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.book),
            contentDescription = "no reading",
            modifier = Modifier.size(96.dp)
        )
        Text(text = "You have no readings")
    }
}
bentrengrove commented 11 months ago

This doesn't look like a bug related to Accompanist, but just a general Compose question. I recommend posting your question on Stack Overflow.