Jetpack Compose中LazyColumn内元素全部堆叠重叠该如何解决？

问题诱因 #

该异常是Jetpack Compose版本依赖不匹配的典型表现，常见于两种场景：

1. Compose编译器版本与项目使用的Kotlin版本未严格对齐
2. androidx.core:core-ktx 1.8.0+版本与低于1.2.0稳定版的Compose运行时存在测量逻辑兼容问题

解决方案 #

• 首先核对Kotlin版本与Compose编译器版本的匹配关系，严格按照官方适配规则调整版本：
  例：Kotlin 1.7.x 对应 Compose 编译器 1.2.x / 1.3.x；Kotlin 1.8.x 对应 Compose 编译器 1.4.x
• 临时修复可以给LazyColumn内的所有item外层添加fillMaxWidth()修饰符，强制item占满横向宽度，触发正确的纵向测量逻辑：

setContent {
    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp),
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            Text("header", modifier = Modifier.fillMaxWidth())
        }
        items(5) { idx ->
            Text("dummy title $idx", modifier = Modifier.fillMaxWidth())
        }
        item {
            Text("footer", modifier = Modifier.fillMaxWidth())
        }
    }
}

• 若上述方法无效，可将androidx.core:core-ktx降级到1.7.0版本，该版本与绝大多数Compose稳定版不存在兼容性冲突，在模块级build.gradle中修改依赖即可：

dependencies {
    implementation "androidx.core:core-ktx:1.7.0"
    // 其余依赖保持不变
}

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