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

我建议您使用AnimatedVisibility并animateContentSize组合。

1. animateContentSize从......中去除Card。
2. 将AnimatedVisibility和应用于animateContentSize可扩展内容：

AnimatedVisibility(visible = expanded) {
    Column(modifier = Modifier.animateContentSize()) {
        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... ")
    }
}

完整代码：

@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()
            ) {
                Text("Clickable", style = MaterialTheme.typography.displayMedium)

                AnimatedVisibility(visible = expanded) {
                    Column(modifier = Modifier.animateContentSize()) {
                        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... ")
                    }
                }
            }
        }
    }
}

结果：