如何在跳过单词后放置图标

Question

我想在跳过这个词后放一个图标把它总是出现在左上角。

示例：跳过>

Text(text = buildAnnotatedString {
        append("")
        val skipText = stringResource(id = R.string.skip)
        withStyle(style = SpanStyle(color = MaterialTheme.colors.onBackground)
        ) {
            append(skipText)
        }
        Icon(Icons.Filled.ChevronRight, "chevron right")
    },
    style = MaterialTheme.typography.body1,
    modifier = Modifier
    .align(Alignment.BottomCenter)
    .padding(bottom = 50.dp)
)

Answer 1

您可以使用 inlineContent 属性将可组合项插入文本布局。

val inlineContent = mapOf(
    Pair(
        "icon",
        InlineTextContent(
            Placeholder(
                width = 12.sp,
                height = 12.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) {
            Icon(Icons.Filled.CheckCircle,"",tint = Color.Red)
        }
    )
)

Text(
    text = buildAnnotatedString {
        append("")
        val skipText = "Skip text"
        withStyle(style = SpanStyle(color = MaterialTheme.colors.onBackground)){
            append(skipText)
        }
        appendInlineContent("icon", "[icon]")
    },
    style = MaterialTheme.typography.body1,
    modifier = Modifier
        .padding(bottom = 50.dp),
    inlineContent = inlineContent
)

如何在跳过单词后放置图标

how to put icon after the word skip

android

android-jetpack-compose