Jetpack Compose修改文本X轴偏移时如何控制宽度自动换行

当前实现出现长文本溢出的核心原因是：承载标题、副标题的Column仅配置了X/Y轴偏移属性，没有添加宽度约束。Text组件默认会按文本内容长度撑开自身宽度，设置X偏移后没有剩余可用宽度的限制，内容会直接绘制到屏幕边界外，自然无法触发自动折行逻辑。
另外原有逻辑在onGloballyPositioned回调中反复修改txtOffsetX、txtOffsetY状态，会触发多次重测量，也会导致宽度计算时机错位，约束规则无法正常生效。

核心修改逻辑共3点：

• 提前根据高亮目标的位置，计算文本容器的X/Y偏移值和可用最大宽度，不要等组件布局完成后再反推偏移值
• 给文本容器添加宽度约束，限制容器最大宽度不能超过屏幕剩余可用空间，Text碰到宽度边界时会自动触发折行
• 用remember缓存位置计算结果，避免在位置回调中反复修改状态触发布局抖动，必要时可配合BoxWithConstraints直接获取父布局宽高提升计算精度

替换原有ShowText组件实现即可：

@Composable
fun ShowText(
    currentTarget: ShowcaseProperty,
    targetRect: Rect,
    targetRadius: Float,
    updateCoordinates: (LayoutCoordinates) -> Unit
) {
    val density = LocalDensity.current
    val configuration = LocalConfiguration.current
    val screenWidthPx = with(density) { configuration.screenWidthDp.dp.toPx() }
    // 统一设置水平边距，避免文本贴住屏幕边缘
    val horizontalPaddingPx = with(density) { 16.dp.toPx() }

    // 提前计算文本位置和可用宽度，避免布局完成后二次修改状态触发抖动
    val (txtOffsetXPx, txtOffsetYPx, textMaxWidthPx) = remember(targetRect, targetRadius, screenWidthPx) {
        val textY: Float
        val possibleTop = targetRect.center.y - targetRadius
        // 预估文本高度，可根据实际文本样式调整
        val estimateTextHeight = with(density) { 160.dp.toPx() }
        textY = if (possibleTop - estimateTextHeight > 0) {
            possibleTop - estimateTextHeight
        } else {
            targetRect.center.y + targetRadius
        }

        val textX: Float
        val maxWidth: Float
        val targetCenterX = targetRect.center.x
        // 高亮目标在屏幕右半区：文本摆放到目标左侧
        if (targetCenterX >= screenWidthPx / 2) {
            textX = horizontalPaddingPx
            maxWidth = targetRect.left - horizontalPaddingPx * 2
        }
        // 高亮目标在屏幕左半区：文本摆放到目标右侧
        else {
            textX = targetRect.right + targetRadius
            maxWidth = screenWidthPx - textX - horizontalPaddingPx
        }
        Triple(textX, textY, maxWidth.coerceAtLeast(0f))
    }

    Column(
        modifier = Modifier
            .offset(
                x = with(density) { txtOffsetXPx.toDp() },
                y = with(density) { txtOffsetYPx.toDp() }
            )
            // 核心：给文本容器加最大宽度约束，长文本自动触发折行
            .widthIn(max = with(density) { textMaxWidthPx.toDp() })
            .onGloballyPositioned {
                updateCoordinates(it)
            }
            .padding(horizontal = 2.dp)
    ) {
        Text(
            text = currentTarget.title,
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Blue
        )
        Text(
            text = currentTarget.subTitle,
            fontSize = 14.sp,
            color = Color.Blue,
            lineHeight = 20.sp
        )
    }
}

• 如果需要更精准的Y轴位置，可以在onGloballyPositioned回调拿到真实文本高度后做一次Y偏移修正，注意加状态防抖判断，避免触发循环重绘
• 如果需要引导文本支持点击关闭，可以直接给Column添加clickable修饰符，无需在Canvas层单独实现手势判断
• 宽度、位置计算逻辑会自动跟随配置变更重算，无需额外处理横竖屏切换场景

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