Jetpack Compose：如何将指针事件传递给其他Composable组件？

方案1：使用PointerEventPass.Initial传递事件 #

默认pointerInput使用PointerEventPass.Main处理事件，会消费事件导致下层Composable无法接收。改用PointerEventPass.Initial可让上层Canvas先处理事件，再将事件传递给BasicTextField，注意不要调用event.consume()，否则事件仍会被拦截。

修改后的代码：

Box() {
    BasicTextField(
        // 你的样式配置
    )

    Canvas(
        modifier = Modifier.pointerInput(Unit) {
            awaitPointerEventScope {
                while (true) {
                    // 指定Initial阶段处理事件
                    val event = awaitPointerEvent(PointerEventPass.Initial)
                    when (event.type) {
                        PointerEventType.Release -> {
                            // 处理点击逻辑，比如更改高亮颜色
                            // 不要调用event.consume()
                        }
                    }
                }
            }
        }
    ) {
        // 绘制高亮和轮廓
    }
}

方案2：用drawBehind替代独立Canvas #

将绘制逻辑移到Modifier.drawBehind中，配合Box布局，同样使用PointerEventPass.Initial处理指针事件，代码结构更紧凑：

Box {
    BasicTextField(
        // 你的样式配置
    )

    Box(
        modifier = Modifier
            .matchParentSize()
            .pointerInput(Unit) {
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent(PointerEventPass.Initial)
                        if (event.type == PointerEventType.Release) {
                            // 处理点击逻辑
                        }
                    }
                }
            }
            .drawBehind {
                // 这里写之前Canvas中的绘制逻辑
            }
    )
}

方案3：在BasicTextField内部绘制覆盖层（推荐） #

直接利用BasicTextField的onTextLayout获取文本布局信息，通过Modifier.drawWithContent在TextField内部绘制覆盖层。这种方式无需额外上层Composable，完全避免事件拦截，还能精准对齐文本位置：

var text by remember { mutableStateOf("") }
var textLayoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }

BasicTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .drawWithContent {
            // 先绘制TextField原内容
            drawContent()
            // 利用textLayoutResult计算高亮区域坐标并绘制
            textLayoutResult?.let { layout ->
                // 示例：绘制第一个字符的高亮区域
                val firstCharBounds = layout.getBoundingBox(0)
                drawRoundRect(
                    color = Color.Yellow.copy(alpha = 0.3f),
                    topLeft = Offset(firstCharBounds.left, firstCharBounds.top),
                    size = Size(firstCharBounds.width(), firstCharBounds.height()),
                    cornerRadius = CornerRadius(4.dp.toPx())
                )
            }
        },
    onTextLayout = { layoutResult ->
        textLayoutResult = layoutResult
    }
)

该方案优势：

• 无需处理事件传递，触摸事件直接由BasicTextField接收
• 通过TextLayoutResult精准获取文本位置，绘制更准确
• 代码逻辑集中，维护更方便

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