如何在将Composable作为InlineTextContent显示前预测量其尺寸？

要在AnnotatedString中使用Composable作为InlineTextContent，确实需要提前为Placeholder指定宽高。Jetpack Compose没有直接提供预测量API，但可以通过以下几种方案实现：

方案一：使用SubcomposeLayout预测量（推荐） #

SubcomposeLayout支持分阶段组合并测量子Composable，我们可以先预组合目标InlineContent，获取其尺寸后再构建带正确Placeholder的AnnotatedString，最后渲染Text组件。

示例代码：

@Composable
fun InlineTextWithMeasuredContent(
    baseText: String,
    inlineContent: @Composable () -> Unit
) {
    SubcomposeLayout { constraints ->
        // 1. 预组合并测量InlineContent的尺寸
        val inlinePlaceables = subcompose("PreMeasureInline") {
            inlineContent()
        }.map {
            it.measure(constraints.copy(minWidth = 0, minHeight = 0))
        }
        val inlineWidth = inlinePlaceables.firstOrNull()?.width ?: 0
        val inlineHeight = inlinePlaceables.firstOrNull()?.height ?: 0

        // 2. 转换单位（结合屏幕密度适配）
        val density = LocalDensity.current
        val placeholderWidth = with(density) { inlineWidth.toDp() }
        val placeholderHeight = with(density) { inlineHeight.toDp() }

        // 3. 构建带Placeholder的AnnotatedString
        val annotatedText = buildAnnotatedString {
            append(baseText)
            appendInlineContent(
                id = "measuredInline",
                placeholder = Placeholder(
                    width = placeholderWidth,
                    height = placeholderHeight,
                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                )
            )
        }

        // 4. 测量并布局最终的Text组件
        val textPlaceables = subcompose("FinalText") {
            Text(
                text = annotatedText,
                inlineContent = mapOf(
                    "measuredInline" to InlineTextContent(
                        placeholder = Placeholder(
                            width = placeholderWidth,
                            height = placeholderHeight,
                            placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                        )
                    ) {
                        inlineContent()
                    }
                )
            )
        }.map { it.measure(constraints) }

        layout(textPlaceables.first().width, textPlaceables.first().height) {
            textPlaceables.first().place(0, 0)
        }
    }
}

关键说明： #

• SubcomposeLayout的分阶段组合避免了重复布局，不会出现视觉闪烁；
• 通过LocalDensity转换单位，确保尺寸在不同屏幕上适配；
• 若InlineContent包含多个子元素，需取最大宽高作为Placeholder尺寸。

方案二：提前计算固定尺寸（适合静态内容） #

如果InlineContent是固定尺寸的组件（比如图标、固定文本），可以直接通过已知参数计算尺寸：

• 图标类：使用组件默认尺寸（如24.dp），或通过ImageVector的固有尺寸推导；
• 文本类：结合TextStyle的字体大小和文本长度估算宽度，再用LocalDensity转换单位。

示例代码：

@Composable
fun InlineTextWithFixedContent() {
    val iconSize = 24.dp
    val annotatedText = buildAnnotatedString {
        append("点击 ")
        appendInlineContent(
            id = "icon",
            placeholder = Placeholder(
                width = iconSize,
                height = iconSize,
                placeholderVerticalAlign = PlaceholderVerticalAlign.Center
            )
        )
        append(" 开始")
    }

    Text(
        text = annotatedText,
        inlineContent = mapOf(
            "icon" to InlineTextContent(
                placeholder = Placeholder(iconSize, iconSize, PlaceholderVerticalAlign.Center)
            ) {
                Icon(Icons.Filled.PlayArrow, contentDescription = "开始")
            }
        )
    )
}

方案三：事后修正（不推荐，会有重绘） #

如果无法提前测量，可以先给Placeholder一个临时尺寸，渲染后通过onGloballyPositioned获取实际尺寸，再更新AnnotatedString。但这种方法会触发两次布局，可能导致视觉闪烁：

@Composable
fun InlineTextWithPostMeasure() {
    var placeholderSize by remember { mutableStateOf(Size.Zero) }
    val density = LocalDensity.current

    Text(
        text = buildAnnotatedString {
            append("文本 ")
            appendInlineContent(
                id = "dynamic",
                placeholder = Placeholder(
                    width = with(density) { placeholderSize.width.toDp() },
                    height = with(density) { placeholderSize.height.toDp() },
                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                )
            )
        },
        inlineContent = mapOf(
            "dynamic" to InlineTextContent(
                placeholder = Placeholder(
                    width = with(density) { placeholderSize.width.toDp() },
                    height = with(density) { placeholderSize.height.toDp() },
                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                )
            ) {
                Box(
                    modifier = Modifier.onGloballyPositioned { coordinates ->
                        placeholderSize = coordinates.size.toSize()
                    }
                ) {
                    Text("动态文本")
                }
            }
        )
    )
}

总结： #

优先使用SubcomposeLayout预测量方案，它能在单次布局周期内完成尺寸计算和渲染；静态内容直接用固定尺寸更高效；事后修正仅作为动态内容的备选方案。

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