AnimatedVisibility 不会在 Jetpack Compose 的对话框中扩展高度答案

【问题标题】：AnimatedVisibility Doesn't Expand Height In Dialog in Jetpack ComposeAnimatedVisibility 不会在 Jetpack Compose 的对话框中扩展高度
【发布时间】：2023-03-21 05:08:01
【问题描述】：

所以我的项目中有这个可组合的......

 @Composable
 private fun ShowDialog() {
        var showText by remember { mutableStateOf(false) }

        val text = if (showText) {
            "Hide Text"
        } else {
            "Show Text"
        }

        Dialog(onDismissRequest = { }) {
            Card(modifier = Modifier.padding(15.dp)) {
                Column(modifier = Modifier.padding(15.dp)) {
                    AnimatedVisibility(visible = showText) {
                        Text(
                           text = "Here is the show text sample",
                           modifier = Modifier.padding(5.dp),
                           style = MaterialTheme.typography.body1,
                           color= Color.Black
                        )
                    }

                    Button(onClick = { showText = !showText }) {
                        Text(text = text)
                    }
                }
            }


        }
    }

如果您浏览过代码，您可能会明白它应该做的事情。即它基本上是一个带有一个文本和一个按钮的对话框。当用户单击按钮时，按钮上方的文本将切换其可见性。

但是代码的问题是，当我单击按钮时，文本会出现，但按钮会变得不可见，换句话说，文本会占用空间并将按钮推到下方。但是，在这种情况下，卡片或列中的容器并未扩展其高度。

它应该像那样工作吗？或者这是一个错误？

我在Column 和Card 上尝试了animateContentSize()，但没有成功。并在 StackOverflow 上查看了类似的问题，但没有找到任何有用的信息。

【问题讨论】：

issuetracker.google.com/issues/194911971
@GabrieleMariotti 感谢您的链接......因为这是分配的......有没有其他方法可以克服这个问题？这方面的任何提示都会有所帮助
@GabrieleMariotti 我找到了解决此问题的方法，一旦其他建议也更好，请检查我的答案...

标签： android android-jetpack-compose

【解决方案1】：

幸运的是，我为这个问题找到了一个临时有效的答案，

我们需要使用的只是将DialogProperties(usePlatformDefaultWidth = false) 作为属性parameter 传递给对话框。这将使对话框像这样调整大小

    @Composable
    private fun ShowDialog() {
        var showText by remember { mutableStateOf(false) }

        val text = if (showText) {
            "Hide Text"
        } else {
            "Show Text"
        }

        Dialog(
            onDismissRequest = { },
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            Card(
                modifier = Modifier
                    .padding(15.dp)
                    .wrapContentWidth()
                    .animateContentSize()
            ) {
                Column(modifier = Modifier.padding(15.dp).fillMaxWidth(1f)) {

                    AnimatedVisibility(visible = showText) {
                        Text(
                            text = "Sample",
                            modifier = Modifier
                                .padding(5.dp)
                                .fillMaxWidth(1f),
                            style = MaterialTheme.typography.body1,
                            color = Color.Black
                        )
                    }
                    Button(onClick = { showText = !showText }) {
                        Text(text = text)
                    }


                }
            }


        }
    }

注意：它使用@ExperimentalComposeUiApi

此 API 是实验性的，未来可能会发生变化。

【讨论】：