Modifier.animateContentSize不影响内容的收缩。

Question

这个问题描述了与中解释的相同的问题，但是由于它没有提供任何代码，所以我要打开一个新的代码。

使用Modifier.animateContentSize()，我能够动画内容在卡内的扩展，然而，相对于我所知道的应该发生的事情，我无法动画的内容减少。

每当我点击按钮后，它已经增长，而不是发挥一个缩小的动画，它只是拍回原来的大小，立即，没有任何形式的过渡。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TheThing() {
    var expanded by remember { mutableStateOf(false) }

    // A surface container using the 'background' color from the theme
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Column {
            Card(
                onClick = { expanded = !expanded },
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
                    .animateContentSize()
            ) {
                Text("Clickable", style = MaterialTheme.typography.displayMedium)

                if (expanded) {
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                    Text("More text here... ")
                }
            }
        }
    }
}

Answer 1

对于if语句中的内容，您应该使用AnimatedVisibility。这里发生的事情是，您的if (expanded)语句立即运行，因此它使您的内容立即消失，然后大小的变化是动画的，但内容已经从构图中消失了--使它看起来像没有动画的文本。

在下面的示例中，我正在定制AnimatedVisibility，使其速度更慢，这样您就可以看到实际的动画发生了。如果在它周围设置一个边框，您也会看到大小动画：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TheThing() {
    var expanded by remember { mutableStateOf(false) }

    // A surface container using the 'background' color from the theme
    Surface(
        modifier = Modifier.fillMaxSize(),

        ) {
        Column {
            Card(
                onClick = { expanded = !expanded },
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            ) {
                Column {
                    Text("Clickable")
                    AnimatedVisibility(
                        expanded, exit = fadeOut(animationSpec = tween(1000)) +
                                shrinkVertically(animationSpec = tween(1000))
                    ) {
                        Column {
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                            Text("More text here... ")
                        }
                    }
                }
            }
        }
    }
}