Jetpack Compose中LazyColumn内的Card为何出现上下圆角不均？

问题本质 #

这个上下圆角视觉不一致的问题，是Compose布局测量逻辑和圆角裁切规则的叠加效果，你的代码没有语法错误，但几个细节触发了视觉偏差：

• RoundedCornerShape(50.dp) 的实际行为：Compose的圆角形状组件不会强行应用你传入的固定圆角半径，而是会自动适配组件的实际测量尺寸——当圆角半径大于组件高度的1/2时，系统会把实际裁切半径压缩到组件高度的1/2。如果你的Card没有固定高度，仅靠内部Text撑出整体尺寸，Text的32sp字号自带的行高上下留白不对称，就会导致上下边的实际可用裁切空间不一样，最终显示出来的上下圆角弧度出现肉眼可辨的差异
• 高饱和红色背景会放大边缘错位：纯红色背景和浅灰色列表背景的对比度极高，哪怕是1-2dp的圆角裁切偏差，都会被人眼捕捉到，看起来像是圆角完全不对称
• LazyColumn的item默认无约束布局：LazyColumn不会自动给列表项加统一的边距或尺寸约束，相邻两个item如果没有统一的垂直间距，上一个item的下边缘和下一个item的上边缘会直接贴在一起，进一步放大圆角的视觉错位感

可直接复用的修复代码 #

按优先级调整即可完全统一圆角效果：

@Composable
fun MySimpleListItem(
    itemViewState: String,
    itemClickedCallback: (() -> Unit)? = null,
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            // 给列表项加统一的边距，避免相邻item贴边
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .then(
                if (itemClickedCallback != null) Modifier.clickable { itemClickedCallback() }
                else Modifier
            ),
        // 用百分比圆角替代固定dp圆角，自动适配实际尺寸
        shape = RoundedCornerShape(percent = 50),
        backgroundColor = Color(0xFFFF0000),
    ) {
        Text(
            text = itemViewState,
            // 文本靠Card的尺寸约束居中，去掉多余的嵌套padding
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp),
            style = TextStyle(
                fontSize = 32.sp,
                // 把行高和字号对齐，消除Text自带的不对称行高留白
                lineHeight = 32.sp,
            ),
            textAlign = TextAlign.Center
        )
    }
}

额外注意点 #

• 如果你使用的是Material3版本的Card，组件默认会附加一层阴影对应的内边距，这个内边距会让shape的裁切区域和实际背景绘制区域错位，可以给Card补充elevation = CardDefaults.cardElevation(0.dp)去掉默认阴影，消除错位
• 如果需要固定圆角为50dp，必须给Card设置明确的高度值，比如.height(64.dp)，确保组件高度的1/2大于50dp，固定半径的圆角才能正常生效

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