animation - 使卡片足够大以适合子文字

Question

我正在创建一个包含详细说明的简单卡片。
我想将卡片的正常高度设置为50px，当用户单击它时，我要扩展卡片以使其适合所有内容。
到目前为止，为了满足我的需求，我编写了以下代码:

String aLotOfText = "When Gradle resolves the compile classpath, it first resolves the runtime classpath and uses the result to determine what versions of dependencies should be added to the compile classpath. In other words, the runtime classpath determines the required version numbers for identical dependencies on downstream classpaths. Your app's runtime classpath also determines the version numbers that Gradle requires for matching dependencies in the runtime classpath for the app's test APK. The hierarchy of classpaths is described in figure 1.";

bool cardExpanded = false;

InkWell(
      onTap: () {
        expandCard();
      },
        child: AnimatedContainer(
          height: cardExpanded ? null : 50,
          duration: Duration(milliseconds: 200),
          child: Card(
            child: Text(aLotOfText),
          ),
        )
)

expandCard() {
    setState(() {
      cardExpanded = !cardExpanded;
    });
  }

正如您在 height: cardExpanded ? null : 50,为 cardExpanded时在 true行上看到的那样，我没有指定高度，因此通过这种方式，我可以将卡扩展到正确的高度以包含文本。
但是有了这个小技巧，我已经完全失去了动画效果，只要这张卡与20张或更多其他卡一起进入列表 View ，打开和关闭该列表即可上下跳动。
我确定有一种方法可以将卡扩展到正确的高度，同时保持动画。

我还想指定上面的只是一个例子，在我的卡片中，还将有图像和按钮。
另外，用按钮打开卡时，我可以添加一些文本，因此卡在打开时也必须扩展。
这就是为什么我不能指定高度。

编辑
有了 height: cardExpanded ? null : 50，我就能得到想要的东西，因此，卡片的大小足以容纳内容，但是您可以看到那里没有动画


相反，如果我提供类似 height: cardExpanded ? 100 : 50的值，则会获得动画，但是很明显，卡片会一直增长到100像素，并且不会显示所有内容。

我想要获得的结果是第一个示例中的内容以及动画。
谢谢

Answer 1

您可以设置两个变量:

height = MediaQuery.of(context).size.height * 0.8; //the percentage you want the card to grow
width = MediaQuery.of(context).size.width * 0.8;

因此，当expanded为true时，容器会增长。

height: cardExpanded ? height : 50,
width: cardExpanded  ? width : 50,

另外，要指定动画的执行方式，您可以使用一个属性，使动画看起来更平滑。

 curve: Curves.bounceInOut,

或者您可以尝试使用像Expanded这样的小部件进行调整。