Jetpack Compose：如何在AnnotatedString内显示固定17dp×17dp的Box？

解决Jetpack Compose AnnotatedString中固定dp尺寸Box的显示问题 #

核心问题分析

你遇到的尺寸差异，主要来自两方面：一是手动实现的dpToSp转换未适配Compose的密度体系，二是Placeholder预留空间与实际Box的布局属性（如padding）未对齐。

解决方案步骤

1. 对齐InlineContent与菜单Box的布局属性

确保InlineContent内的Box和菜单中的Box使用完全一致的Modifier，包括padding、宽高、裁剪等样式，避免因布局差异导致视觉尺寸不同：

inlineContent[id] = InlineTextContent(
    Placeholder(/* 稍后设置尺寸 */)
) {
    Box(
        modifier = Modifier
            .padding(2.dp) // 和菜单里的配置保持一致
            .width(17.dp)
            .height(17.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(bgColor),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = sourceViewId,
            fontSize = 13.sp,
            fontWeight = FontWeight(500),
            color = textColor,
            textAlign = TextAlign.Center
        )
    }
}

2. 正确计算Placeholder的预留尺寸

Placeholder的width和height是Sp单位，需要将目标dp尺寸（含padding的总占用空间）转换为对应的Sp值，确保预留空间与实际Box完全匹配。使用Compose内置的LocalDensity进行转换，避免手动计算误差：

val density = LocalDensity.current
// 计算总占用尺寸：17dp宽高 + 左右/上下各2dp padding = 21dp
val totalSize = with(density) { (17.dp + 4.dp).toSp() }

inlineContent[id] = InlineTextContent(
    Placeholder(
        width = totalSize,
        height = totalSize,
        placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
    )
) {
    // 上述Box代码
}

注意：如果菜单中padding(2.dp)是内边距（Modifier顺序为.width(17.dp).padding(2.dp)），则Placeholder只需预留17dp的空间，无需额外加padding。

3. 替换手动dpToSp函数

放弃自己实现的dpToSp，改用Compose提供的toSp()扩展方法，它会自动适配当前设备的密度和字体缩放，确保转换准确：

// 正确的dp转Sp方式
val targetDp = 17.dp
val convertedSp = with(LocalDensity.current) { targetDp.toSp() }

为什么之前的方法失效？

• 手动dpToSp依赖Context的displayMetrics，与Compose独立的密度管理体系存在适配差异，导致转换精度不足。
• 未考虑菜单中Box的padding属性，InlineContent内的Box缺少外层padding，视觉上尺寸更小。
• Placeholder预留空间未匹配Box的总占用尺寸，导致布局时Box被压缩，显示偏小。

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