如何阻止Jetpack Compose扩大触摸目标尺寸？

官方文档指出：当可点击的Composable尺寸小于最小触摸目标尺寸时，Compose仍会扩大触摸目标尺寸。例如以下示例代码中，点击中心1dp的黑色盒子周围48dp区域都会触发状态变更，即使禁用LocalMinimumInteractiveComponentEnforcement也无法改变这一行为。

private fun SmallBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .size(1.dp)
        )
    }
}

要实现仅允许点击中心盒子本身来切换状态，可以通过**使用pointerInput替代clickable**来完全自定义触摸检测逻辑，具体实现如下：

private fun SmallBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .background(Color.Black)
                .size(1.dp)
                .pointerInput(Unit) {
                    detectTapGestures { offset ->
                        // 获取当前组件的本地布局边界
                        val componentBounds = this@pointerInput.layoutInfo.boundsInLocal
                        // 仅当点击位置在组件自身边界内时触发状态变更
                        if (componentBounds.contains(offset)) {
                            clicked = !clicked
                        }
                    }
                }
        )
    }
}

原理说明 #

• clickable modifier内部封装了无障碍相关的触摸区域扩展逻辑，即使禁用LocalMinimumInteractiveComponentEnforcement，其底层仍会优先保证触摸目标的可访问性尺寸。
• pointerInput是Jetpack Compose中更底层的触摸事件处理API，通过detectTapGestures可以获取点击的精确坐标，结合组件的layoutInfo.boundsInLocal判断点击是否落在组件自身范围内，从而完全控制点击响应的区域。

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