我想在最后一行的末尾显示一个动态的多行文本和一个图标。这个图标可以是动画的。我尝试了一些方法,但还没有成功。我应该怎么做?
与我的布局有相同想法的示例视图
在Text
可组合中,您可以使用inlineContent
来定义替换某些文本范围的标签映射。它用于将可组合项插入到文本布局中。
然后使用 aPlaceholder
您可以在文本布局中保留空间。
就像是:
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)