In the Text
可组合的,你可以使用inlineContent https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/InlineTextContent定义替换某些文本范围的标签映射。它用于将可组合项插入文本布局中。
然后使用Placeholder https://developer.android.com/reference/kotlin/androidx/compose/ui/text/Placeholder您可以在文本布局中预留空间。
就像是:
val myId = "inlineContent"
val text = buildAnnotatedString {
append("Where do you like to go?")
// Append a placeholder string "[icon]" and attach an annotation "inlineContent" on it.
appendInlineContent(myId, "[icon]")
}
val inlineContent = mapOf(
Pair(
// This tells the [CoreText] to replace the placeholder string "[icon]" by
// the composable given in the [InlineTextContent] object.
myId,
InlineTextContent(
// Placeholder tells text layout the expected size and vertical alignment of
// children composable.
Placeholder(
width = 12.sp,
height = 12.sp,
placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
)
) {
// This Icon will fill maximum size, which is specified by the [Placeholder]
// above. Notice the width and height in [Placeholder] are specified in TextUnit,
// and are converted into pixel by text layout.
Icon(Icons.Filled.Face,"",tint = Color.Red)
}
)
)
Text(text = text,
modifier = Modifier.width(100.dp),
inlineContent = inlineContent)
它是可组合的,因此您可以使用您最喜欢的动画。
举个例子:
var blue by remember { mutableStateOf(false) }
val color by animateColorAsState(if (blue) Blue else Red,
animationSpec = tween(
durationMillis = 3000
))
并将图标更改为
Icon(Icons.Filled.Face,"", tint = color)