Jetpack Compose Popup垂直超16dp时内容被裁剪问题求助

问题分析 #

Popup设置clipEnabled = false后仍裁剪超出16dp的caret，核心原因是Popup内部默认布局容器存在额外裁剪逻辑，或是TooltipBox封装的Popup在测量阶段限制了最大高度，导致超出16dp的部分被强制裁切。

解决方案 #

1. 自定义Popup替代TooltipBox默认实现 #

放弃TooltipBox的内置Popup，手动实现Popup并完全控制布局参数，避免默认约束：

@Composable
fun CustomHeightCaretTooltip(
    isVisible: Boolean,
    anchor: @Composable () -> Unit,
    tooltipContent: @Composable () -> Unit
) {
    val anchorPositioner = remember { CustomAnchorPositioner() }
    Box {
        anchor()
        if (isVisible) {
            Popup(
                popupPositionProvider = anchorPositioner,
                properties = PopupProperties(
                    clipEnabled = false,
                    dismissOnBackPress = true,
                    dismissOnClickOutside = true
                )
            ) {
                Box(
                    modifier = Modifier
                        .wrapContentSize()
                        .padding(0.dp) // 移除默认内边距，避免间接裁剪
                ) {
                    tooltipContent()
                }
            }
        }
    }
}

// 自定义锚点定位器，确保Tooltip位置不会挤压caret
private class CustomAnchorPositioner : PopupPositionProvider {
    override fun calculatePosition(
        anchorBounds: IntRect,
        windowSize: IntSize,
        layoutDirection: LayoutDirection,
        popupContentSize: IntSize
    ): IntOffset {
        // 调整Y轴位置，让高caret完全显示在锚点上方
        val yPos = anchorBounds.top - popupContentSize.height
        return IntOffset(
            x = anchorBounds.centerX - popupContentSize.width / 2,
            y = yPos
        )
    }
}

2. 将Caret作为Tooltip内容的一部分绘制 #

如果仍想使用TooltipBox，可把高caret整合进Tooltip主体内容，避免依赖TooltipBox的内置caret限制：

TooltipBox(
    positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
    tooltip = {
        Column {
            // 自定义高度的caret（示例20dp，超过16dp限制）
            Box(
                modifier = Modifier
                    .size(24.dp, 20.dp)
                    .background(
                        color = Color.DarkGray,
                        shape = TriangleShape
                    )
                    .align(Alignment.CenterHorizontally)
            )
            // Tooltip主体内容
            Box(
                modifier = Modifier
                    .background(Color.DarkGray, RoundedCornerShape(8.dp))
                    .padding(horizontal = 12.dp, vertical = 8.dp)
            ) {
                Text("带高Caret的Tooltip内容", color = Color.White)
            }
        }
    },
    state = rememberTooltipState(isVisible = true)
) {
    Button(onClick = { /* 触发显示逻辑 */ }) {
        Text("显示Tooltip")
    }
}

// 自定义三角形Shape用于绘制caret
private val TriangleShape = GenericShape { size, _ ->
    moveTo(size.width / 2, 0f)
    lineTo(size.width, size.height)
    lineTo(0f, size.height)
    close()
}

3. 移除内容的高度约束 #

确保Tooltip内容没有被Modifier.height()、Modifier.heightIn()等限制高度，始终使用wrapContentSize()让内容自适应高度，避免强制裁剪。

验证要点 #

• 确认PopupProperties(clipEnabled = false)已正确配置
• 检查Tooltip内容是否存在隐性高度约束
• 自定义定位器时，确保Popup位置不会被窗口边缘挤压导致裁切

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