[英]How to animate TextStyle in Jetpack Compose?
The text in one of my Composables is struck-through when a certain boolean variable is true.当某个布尔变量为真时,我的一个可组合项中的文本会被删除。 How can I animate this change in TextStyle
on recomposition so that the line fades in rather than appearing and disappearing abruptly?如何在重新组合时为TextStyle
这种更改设置动画,以便线条淡入而不是突然出现和消失?
@Composable
fun MyComposable(
completed: Boolean
) {
val textStyle = TextStyle(textDecoration = if (completed) TextDecoration.LineThrough else null)
Text(
text = title,
color = textColor,
style = textStyle,
modifier = Modifier.align(Alignment.CenterVertically)
)
Not sure if it exists a way to animate a TextStyle
.不确定它是否存在动画TextStyle
。
Not a great solution, but just a workaround:不是一个很好的解决方案,而只是一种解决方法:
Box() {
AnimatedVisibility(
visible = !completed,
enter = fadeIn(
animationSpec = tween(durationMillis = duration)
),
exit = fadeOut(
animationSpec = tween(durationMillis = duration)
)) {
Text(
text = title,
style = TextStyle(textDecoration=null)
)
}
AnimatedVisibility(
visible = completed,
enter = fadeIn(
animationSpec = tween(durationMillis = duration)
),
exit = fadeOut(
animationSpec = tween(durationMillis = duration)
)) {
Text(
text = title,
style = TextStyle(textDecoration = TextDecoration.LineThrough),
)
}
}
Gabriele's answer is also a decent workaround, but perhaps a simpler one would be to put the Text
and the " Stroke
", in a box, overlapping. Gabriele 的答案也是一个不错的解决方法,但也许更简单的方法是将Text
和“ Stroke
”放在一个框中,重叠。 Say,说,
@Composable
fun MyComposable(
completed: Boolean
) {
Box{
Text(
text = title,
color = textColor,
style = textStyle,
modifier = Modifier.align(Alignment.CenterVertically)
)
AnimatedVisibility (completed) {
Box(Modifier.width(1.dp)){
//Empty Box of unit width to serve as the stroke
// Add background modifiers to match the font color
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.