如何让Jetpack Compose中Row内的文本环绕Checkbox显示

在Jetpack Compose中，无需拆分文本或使用FlowRow，直接利用Text组件的inlineContent参数结合AnnotatedString就能实现文本环绕Checkbox的效果，具体实现如下：

实现代码 #

@OptIn(ExperimentalLayoutApi::class)
@Preview
@Composable
fun TickedItems(modifier: Modifier = Modifier, text: String = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque urna nulla, vel venenatis libero feugiat eget. Integer semper ex pharetra, consectetur sapien blandit, vestibulum lectus. Sed nec imperdiet erat. Donec id luctus libero. Etiam a venenatis purus. Maecenas quis sem id mi bibendum maximus rutrum nec odio. Fusce vel auctor orci, eget consectetur tellus. Ut iaculis magna a tellus vulputate auctor. Quisque ante eros, condimentum et facilisis sit amet, cursus eu augue. Curabitur diam ex, eleifend sed risus quis, vehicula ultricies quam.") {
    var isChecked by remember { mutableStateOf(false) }

    // 定义内嵌的Checkbox内容
    val inlineContent = mapOf(
        "checkbox" to InlineTextContent(
            Placeholder(
                width = CheckboxDefaults.MinimumWidth,
                height = CheckboxDefaults.MinimumHeight,
                placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
            )
        ) {
            Checkbox(
                checked = isChecked,
                onCheckedChange = { isChecked = it },
                modifier = Modifier.padding(end = 4.dp)
            )
        }
    )

    // 构建带占位符的AnnotatedString
    val annotatedText = buildAnnotatedString {
        // 插入Checkbox占位符
        appendInlineContent("checkbox")
        // 添加文本内容
        append(text)
    }

    Text(
        text = annotatedText,
        inlineContent = inlineContent,
        modifier = modifier.padding(8.dp)
    )
}

原理说明 #

• InlineTextContent：允许在文本流中嵌入自定义Composable组件，这里将Checkbox作为内嵌元素，通过Placeholder指定它的尺寸和垂直对齐方式，确保和文本居中对齐。
• AnnotatedString：构建包含内嵌元素标记的文本，appendInlineContent插入Checkbox占位符后，后续文本会自动围绕该元素排版，宽度不足时换行自然环绕到Checkbox下方，完美适配有限宽度的布局。
• 交互逻辑：Checkbox的选中状态依然通过remember维护，点击交互和普通Checkbox完全一致，不影响用户操作体验。

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