如何在 Jetpack Compose 中為 TextStyle 設置動畫？

Question

當某個布爾變量為真時，我的一個可組合項中的文本會被刪除。 如何在重新組合時為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)
    )

Answer 1

不確定它是否存在動畫TextStyle 。
不是一個很好的解決方案，而只是一種解決方法：

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),
        )
    }
}

Answer 2

Gabriele 的答案也是一個不錯的解決方法，但也許更簡單的方法是將Text和“ Stroke ”放在一個框中，重疊。 說，

@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
   }
  }
}