LazyColumn 项目相互叠加

Question

我使用 Jetpack Compose 版本 1.0.0-alpha01 和 LazyColumnFor 在列表中显示一些项目。更新到 1.0.0-beta06 后，我注意到 LazyColumnFor 已被弃用，取而代之的是 LazyColumn。然而，在迁移之后，列表中的项目会相互叠加，而不是垂直列出并在其间留出一些间距。

这里的奇怪之处在于，预览会按预期呈现项目，而安装在设备上的应用却没有。

这是活动：

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
                            )
                        }
                    }
                }
            }
        }
    }
}

这是预览：

@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
                    )
                }
            }
        }
    }
}

很遗憾，我无法让新的布局检查器在我的任何设备上工作，或者我怀疑我可能已经找到了一些线索来解释为什么会发生这种情况。

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

出现此问题是因为该应用未进行硬件加速。这已在 https://issuetracker.google.com/issues/187853238 中修复。