LazyColumn 项目相互叠加

Question

I was using Jetpack Compose version 1.0.0-alpha01 and LazyColumnFor to display some items in a list. After updating to 1.0.0-beta06 I noticed that LazyColumnFor had been deprecated in favor of LazyColumn. After migrating however, the items in the list draw on top of each other instead of being listed vertically with some spacing in between.

What's odd here is that the Preview renders the items as expected, while the app installed on the device(s) does not.

Here's the activity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val textStyle = TextStyle(color = Color.White, fontSize = 16.sp)
            val boldStyle = textStyle.merge(TextStyle(fontWeight = FontWeight.Bold))
            ComposeListTestTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    LazyColumn(modifier = Modifier.fillMaxHeight()) {
                        items(listOf("Row1", "Row2")) { day ->
                            Text(
                                text = day,
                                style = boldStyle,
                                modifier = Modifier.padding(top = 8.dp),
                                color = Color.Green
                            )
                        }
                    }
                }
            }
        }
    }
}

And here's the preview:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    val textStyle = TextStyle(color = Color.White, fontSize = 16.sp)
    val boldStyle = textStyle.merge(TextStyle(fontWeight = FontWeight.Bold))
    ComposeListTestTheme {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            LazyColumn(modifier = Modifier.fillMaxHeight()) {
                items(listOf("Row1", "Row2")) { day ->
                    Text(
                        text = day,
                        style = boldStyle,
                        modifier = Modifier.padding(top = 8.dp),
                        color = Color.Green
                    )
                }
            }
        }
    }
}

Unfortunately I haven't been able to get the new layout inspector to work on any of my devices, or I suspect I could've seen some clues as to why this happens.

ComposeListTestTheme:

@Composable
fun ComposeListTestTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Answer 1

The issue happened because the app was not hardware accelerated. This was fixed in https://issuetracker.google.com/issues/187853238 .