flutter - 在事件上为父小部件设置动画以适应 child 的大小

Question

首先，考虑到我是 Flutter 的新手，解决方案可能很明显，但我已经搜索了很多小时都无济于事，所以继续讨论这个问题。 我正在尝试在 Flutter 中添加 Markdown 说明，点击人字形时应该可以展开该说明。

我试过了AnimatedContainer , AnimatedSize , Flex与 Expanded并尝试查看警告“它只应从绘画回调或交互事件处理程序(例如手势回调)中调用。” 如果我尝试在绘制之前获取子项的大小，Flutter 会提供给我。

我查看了几个地方，包括我将在此处链接的 StackOverflow 问题:

• Flutter Layout Row / Column - share width, expand height
• https://github.com/flutter/flutter/issues/16061
• How to get a height of a Widget?

下一段代码是我试图让展开/折叠的动画继续进行的地方。 变量 isExpanded 只是一个 bool 值，函数 _onPressed 只是切换该 bool 值的变化。 基于它，我应该得到 Markdown 正文的总高度，或者只显示它的一部分。

@override
Widget build(BuildContext context) {
  markdown = Markdown(body);
  var icon = (isExpanded) ? Icons.expand_less : Icons.expand_more;
  var iconButton = IconButton(icon: Icon(icon), onPressed: _onPressed);

  return Container(
    child: Column(children: <Widget>[
      AnimatedContainer(
        // constraints: BoxConstraints(), this is where I'd like to set the change from 30% to infinity
        child: SingleChildScrollView(child: markdown),
        curve: Curves.bounceIn,
        duration: Duration(milliseconds: 300),
      ),
      iconButton
    ]),
  );
}

我正在尝试做的是类似 Trello 的动画。在手机应用程序中，卡片的描述是可展开和可折叠的。展开时，它只占用所需的高度，甚至会溢出屏幕。这意味着可滚动部分是包含描述和任何其他小部件的小部件，而不是描述本身。

实际发生的是:

• 如果我尝试使用 MediaQuery 设置高度(在 BoxConstraints 中)然后扩展到 Size.infinity 动画无法实际处理是因为它从有界变为无界。
• 如果我尝试将 AnimatedContainer 中的参数 height 设置为屏幕的 30%，然后设置为无穷大，当它达到无穷大时，内容就会消失。

Answer 1

也许使用SizeTransition或 ScaleTransition .这是一个 answer使用以下小部件来折叠和展开小部件。