如何将Ripple效果约束至父Composable组件？

自定义BottomBar时，子项包含常规标签页和全宽附加视图，导致标签页高度未占满BottomBar全高。Ripple效果要么被限制在标签页高度范围内，要么取消边界限制后超出BottomBar。希望将Ripple效果约束在BottomBar的高度范围内。

原代码：

@Composable
fun BottomBar(
    items: List<BottomBarItem>,
    onItemSelected: (Int) -> Unit,
) {
    Box(
        modifier = Modifier
            .defaultMinSize(68.dp)
            .fillMaxWidth()
            .background(color = Color.Blue),
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .defaultMinSize(minHeight = 68.dp),
            verticalArrangement = Arrangement.Center,
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                items.forEachIndexed { index, item ->
                    Box(
                        modifier = Modifier
                            .weight(1f)
                            .clickable(
                                onClick = { onItemSelected(index) },
                                indication = ripple(bounded = false, color = Color.Red),
                                interactionSource = remember { MutableInteractionSource() },
                            ),
                        contentAlignment = Alignment.Center,
                    ) {
                        Text(text = item.label, color = Color.White)
                    }
                }
            }
            // 其他全宽视图，位于标签内容下方...
        }
    }
}

最直接的解决思路是让可点击区域覆盖BottomBar全高，同时用外层容器裁剪溢出内容，这样Ripple效果既能铺满BottomBar高度，又不会超出边界。具体修改后的代码如下：

@Composable
fun BottomBar(
    items: List<BottomBarItem>,
    onItemSelected: (Int) -> Unit,
) {
    Box(
        modifier = Modifier
            .defaultMinSize(68.dp)
            .fillMaxWidth()
            .background(color = Color.Blue)
            .clip(RectangleShape) // 裁剪所有超出容器的内容
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(), // 让Column填充外层Box的全部高度
            verticalArrangement = Arrangement.Center,
        ) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically,
            ) {
                items.forEachIndexed { index, item ->
                    Box(
                        modifier = Modifier
                            .weight(1f)
                            .fillMaxHeight() // 让可点击区域覆盖BottomBar全高
                            .clickable(
                                onClick = { onItemSelected(index) },
                                indication = ripple(bounded = true, color = Color.Red), // 恢复边界限制，此时范围就是BottomBar高度
                                interactionSource = remember { MutableInteractionSource() },
                            ),
                        contentAlignment = Alignment.Center,
                    ) {
                        Text(text = item.label, color = Color.White)
                    }
                }
            }
            // 其他全宽视图，位于标签内容下方...
        }
    }
}

关键修改说明 #

• 外层Box添加.clip(RectangleShape)：强制截断所有超出BottomBar边界的元素，彻底避免Ripple或其他内容溢出。
• Column设置.fillMaxHeight()：让Column填充外层Box的全部高度，确保内部布局空间与BottomBar高度一致。
• 每个标签的Box添加.fillMaxHeight()：将可点击区域的高度扩展到整个BottomBar，此时ripple(bounded = true)就能让Ripple效果恰好覆盖BottomBar的高度范围，既不会被限制在小标签区域，也不会超出容器。

如果想要保留Ripple的扩散效果，只需保持外层Box的裁剪修饰符，即使设置ripple(bounded = false)，Ripple也会被容器边界截断，最终效果仍会被限制在BottomBar范围内。

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