Jetpack Compose中LazyColumn为何截断自定义布局视图左右部分？

问题重现 #

我在Text组件上使用自定义LayoutModifier，分别搭配Column和LazyColumn做测试，代码如下：

@Composable
fun Greeting() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text("Normal Column")
        Column(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier
                .width(150.dp)
                .height(128.dp)
                .background(Color.Yellow)
        ) {
            Spacer(Modifier.height(16.dp))
            CustomLayoutText()
        }
        Text("Lazy Column")
        LazyColumn(
            verticalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier
                .width(150.dp)
                .height(128.dp)
                .background(Color.Yellow)
        ) {
            item {
                Spacer(Modifier.height(16.dp))
            }
            item {
                CustomLayoutText()
            }
        }
    }
}

@Composable
private fun CustomLayoutText() {
    Text("Hello This is a Long text that should fit well",
        modifier = Modifier
            .height(20.dp)
            .layout { measurable, constraints ->
                val placeable =
                    measurable.measure(constraints.offset(180.dp.roundToPx()))
                layout(
                    placeable.width, placeable.height
                ) { placeable.place(0, 0) }
            }
            .background(Color.Gray)
    )
}

两者的Modifier和排列逻辑完全一致，但LazyColumn中的Text会被左右各截断60.dp。用布局检查器查看时，两种布局下的Text都显示为完整长度，但LazyColumn里的Text部分内容就是看不到。

原因分析 #

这是因为LazyColumn为了滚动性能优化，默认会裁剪超出自身边界的子内容，而普通Column没有这个默认裁剪行为。自定义LayoutModifier里通过constraints.offset扩展了Text的可测量空间，导致Text实际宽度超过了LazyColumn设置的150.dp宽度，触发了LazyColumn的默认裁剪机制，所以超出部分被隐藏了。

解决方案 #

有两种常用解决方式：

方案1：关闭LazyColumn的默认裁剪

给LazyColumn添加Modifier.clipToBounds(false)，直接关闭它的边界裁剪，让超出范围的内容正常显示：

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(16.dp),
    modifier = Modifier
        .width(150.dp)
        .height(128.dp)
        .background(Color.Yellow)
        .clipToBounds(false) // 关闭边界裁剪
) {
    // ... 原有item内容
}

方案2：仅给目标item关闭裁剪

如果不想影响整个LazyColumn的裁剪优化，可以只给需要显示完整内容的item添加Modifier.clipToBounds(false)：

item {
    CustomLayoutText(
        modifier = Modifier.clipToBounds(false)
    )
}
// 同时修改CustomLayoutText接收modifier参数
@Composable
private fun CustomLayoutText(modifier: Modifier = Modifier) {
    Text("Hello This is a Long text that should fit well",
        modifier = modifier
            .height(20.dp)
            .layout { measurable, constraints ->
                val placeable =
                    measurable.measure(constraints.offset(180.dp.roundToPx()))
                layout(
                    placeable.width, placeable.height
                ) { placeable.place(0, 0) }
            }
            .background(Color.Gray)
    )
}

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