Android Jetpack Compose中如何检测按压状态下自定义形状组件的悬停？

你的问题核心是：矩形/圆形组件可以靠全局矩形边界判断按压点是否在范围内，但星形、三角形这类自定义形状，现有代码的矩形边界无法精确判断点是否落在形状的实际区域里。下面是具体的解决思路和代码实现：

核心思路 #

用Path定义自定义形状的精确轮廓，通过Path的contains()方法来判断按压点是否处于形状内部。步骤分为：定义形状Path、转换坐标到组件局部坐标系、在按压手势中做精确检测。

具体实现步骤 #

1. 为自定义形状创建精确的Path #

比如要做一个星形，先写出它的Path绘制逻辑：

fun createStarPath(size: Float): Path {
    val path = Path()
    val centerX = size / 2
    val centerY = size / 2
    val outerRadius = size / 2
    val innerRadius = size / 4

    // 绘制星形的10个顶点（5个外顶点+5个内顶点）
    for (i in 0 until 10) {
        val angle = (i * 36f) * (Math.PI / 180f).toFloat()
        val radius = if (i % 2 == 0) outerRadius else innerRadius
        val x = centerX + radius * cos(angle)
        val y = centerY + radius * sin(angle)
        if (i == 0) {
            path.moveTo(x, y)
        } else {
            path.lineTo(x, y)
        }
    }
    path.close()
    return path
}

2. 全局坐标转组件局部坐标 #

按压事件拿到的是全局坐标，需要转换成组件内部的相对坐标——用组件的LayoutCoordinates计算偏移：全局坐标减去组件的全局位置，得到在组件局部坐标系中的点。

3. 监听按压手势并做精确检测 #

结合pointerInput修饰符监听按压事件，在回调里完成坐标转换和Path.contains判断。

整合后的完整组件代码 #

修改你原有的WidgetWithBounds，加入自定义形状的精确检测逻辑：

typealias BoundsUpdateListener = (Rect) -> Unit

@Composable
fun WidgetWithCustomShapeBounds(
    content: @Composable () -> Unit,
    shapePathProvider: (size: IntSize) -> Path, // 传入自定义形状的Path生成器
    onBoundsUpdated: BoundsUpdateListener,
    onPressedInsideShape: () -> Unit, // 按压点在形状内的回调
    modifier: Modifier = Modifier,
    isHovered: Boolean = false,
) {
    val componentBounds = remember { mutableStateOf(Rect.Zero) }
    var boxSize by remember { mutableStateOf(IntSize.Zero) }
    var boxOffset by remember { mutableStateOf(Offset.Zero) }
    val shapePath = remember { mutableStateOf(Path()) }

    Box(modifier = Modifier
        .onGloballyPositioned { coordinates ->
            val globalPosition = coordinates.positionInRoot()
            boxOffset = globalPosition
            componentBounds.value = Rect(
                left = boxOffset.x,
                top = boxOffset.y,
                right = boxOffset.x + boxSize.width,
                bottom = boxOffset.y + boxSize.height
            )
            onBoundsUpdated(componentBounds.value)
        }
        .onSizeChanged {
            boxSize = it
            componentBounds.value = Rect(
                left = boxOffset.x,
                top = boxOffset.y,
                right = boxOffset.x + boxSize.width,
                bottom = boxOffset.y + boxSize.height
            )
            onBoundsUpdated(componentBounds.value)
            // 更新形状Path
            shapePath.value = shapePathProvider(it)
        }
        .pointerInput(Unit) {
            detectTapGestures(
                onPress = { offset ->
                    // 转换全局坐标到组件局部坐标
                    val localOffset = offset - boxOffset
                    // 先判断是否在矩形边界内（减少精确检测的计算量）
                    if (componentBounds.value.contains(offset)) {
                        // 精确判断是否在形状内
                        if (shapePath.value.contains(localOffset)) {
                            onPressedInsideShape()
                        }
                    }
                    awaitRelease()
                }
            )
        }
        .then(modifier)) {
        content()
    }
}

使用示例 #

比如用这个组件包裹星形绘制：

@Composable
fun StarWidget() {
    WidgetWithCustomShapeBounds(
        shapePathProvider = { size ->
            createStarPath(size.width.toFloat())
        },
        onBoundsUpdated = { /* 处理边界更新 */ },
        onPressedInsideShape = {
            // 按压点在星形内部时的逻辑
            println("Pressed inside star shape!")
        }
    ) {
        Canvas(modifier = Modifier.size(100.dp)) {
            drawPath(
                path = createStarPath(size.width),
                color = Color.Blue
            )
        }
    }
}

注意事项 #

• Path的绘制要基于组件的局部坐标系，确保和UI上显示的形状完全匹配；
• 可以先判断矩形边界再做精确检测，提升性能——毕竟Path.contains的计算量比矩形判断大；
• 复杂形状的Path可以提前缓存，避免每次尺寸变化都重新生成。

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