Jetpack Compose中不可点击的透明父Box为何触发子Box点击事件

Box(
    Modifier
        .size(48.dp, 48.dp)
        .background(Color.Transparent)
        .align(Alignment.CenterEnd)
)
{
    Box(
        Modifier
            .size(height = 35.636363.dp, width = 41.818181.dp)
            .align(Alignment.CenterEnd)
            .clip(RoundedCornerShape(topStart = 20.dp, bottomStart = 20.dp))
            .clickable(onClick = {showDialogFragment.value = true})
            .background(Color.Red)
    )
}

该表现是Jetpack Compose两个内置特性共同作用的结果：

• 可点击元素默认最小热区规则：为了符合无障碍交互标准，Compose的clickable修饰符默认会将可点击元素的触摸热区最小限制为48dp × 48dp。如果组件自身的宽高小于该数值，热区会自动向外扩展到满足最小尺寸要求。你使用的子Box宽为41.818dp、高为35.636dp，两个维度均小于48dp，因此它的可点击热区被自动扩展到了48dp × 48dp，刚好完全覆盖父Box的范围。
• 透明布局的事件传递规则：没有配置clickable、pointerInput等触摸事件消费修饰符的布局，即便设置了透明背景也不会消费触摸事件，点击事件会继续向下传递给当前位置命中的可交互组件。当你点击父Box的透明区域时，父Box不会拦截消费事件，而点击位置恰好落在子Box扩展后的可点击热区范围内，因此直接触发子Box的点击回调。

可选调整方案（后续不需要该表现时可使用） #

如果后续需要仅点击子Box自身区域才触发点击事件，可以通过关闭当前组件的最小热区强制规则实现：

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
    Box(
        // 原有子Box的修饰符和逻辑
    )
}

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