Jetpack Compose裁剪Composable后仍显示完整形状问题求助

问题场景 #

当前代码运行后，红色卡片会完整显示所有圆角，但我需要只展示卡片顶部200dp的区域（原卡片高度为400dp），底部完全被遮挡——就像Apple Wallet里卡片只露出顶部的效果。核心需求是直接对整个Composable进行裁剪，不需要调整子项本身的形状，也不用提前知晓子项的形状细节。

当前代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CutComposableWithShapeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ScreenContent(Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
    Column(
        modifier
            .fillMaxSize()
            .padding(12.dp)
    ) {
        Box(
            modifier = Modifier
                .height(200.dp)
        ) { // 期望只显示子Composable的一半（400dp中的200dp），且底部不显示圆角
            ItemWithShape()
        }
    }
}

@Composable
fun ItemWithShape() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(400.dp)
            .background(Color.Red, shape = RoundedCornerShape(16.dp))
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ScreenPreview() {
    CutComposableWithShapeTheme {
        ScreenContent()
    }
}

注意事项 #

• 不要建议修改ItemWithShape的形状（比如仅设置顶部圆角）
• 不要给ItemWithShape添加partial这类控制参数
• 必须实现真正的裁剪，无需知晓子项具体形状，直接对父容器内内容进行裁剪

解决方案 #

只需要给承载子Composable的Box添加clipToBounds()修饰符即可：

Box(
    modifier = Modifier
        .height(200.dp)
        .clipToBounds() // 关键：裁剪超出容器范围的所有内容
) {
    ItemWithShape()
}

原理说明 #

clipToBounds()会让容器仅显示自身范围内的内容，超出容器高度（200dp）的部分会被直接裁剪掉，不管子项原来的形状是什么。这样红色卡片的底部圆角会被容器边界裁掉，刚好实现类似Apple Wallet的卡片露出效果。

如果需要更灵活的裁剪区域控制，也可以用Modifier.clip(RectangleShape)替代clipToBounds()，两者效果一致。

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