动画容器 |基于儿童身高的动画

Posted 2023-02-23

【中文标题】动画容器 |基于儿童身高的动画

【英文标题】：Animatedcontainer | Animated Based on Child's Height

【发布时间】：2020-05-01 15:26:12

【问题描述】：

我想根据孩子的身高为容器高度设置动画，这可能吗？

请看下面的例子...卡片 > 列 > [Container , Animatedcontainer]

如何在 AnimatedContainer 上设置 XYZ 值以匹配孩子的身高或重置父窗口小部件。

Widget example()
return Card(
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 3),
elevation: 5,
shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(15.0),
),
child: Column(
  children: <Widget>[
    Container(
      height: 400,
      child: Text('Something with height 400'),
    ),
    AnimatedContainer(
    duration: Duration(seconds: 2),
    width: selected ? xyz : 100.0,
    height: selected ? xyz : 100.0,
    color: selected ? Colors.red : Colors.blue,
    alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
    curve: Curves.fastOutSlowIn,
    child: FlutterLogo(size: 75),
  ),
  ]
 )

【参考方案1】：

您似乎缺少的是使用 setState 使 Flutter 重新渲染并启动动画：

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: selected ? xyz : 100.0,
  height: selected ? xyz : 100.0,
  color: selected ? Colors.red : Colors.blue,
  alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
  curve: Curves.fastOutSlowIn,
  child: FlutterLogo(size: 75),
),
RaisedButton(
  child: Text('Change dimensions'),
  onPressed: ()
    setState(() 
      selected = !selected;
    );
  ,
),

【讨论】：

是的，我正在尝试找到一种方法来使用基于子内容高度的“动画”来调整容器的大小。

我已经更改了答案以澄清您需要做什么。

@L.kifa 如果我的回答解决了您的问题，请记住将其标记为正确。这将帮助未来的用户解决同样的问题。

不，它实际上并没有回答这个问题。该问题与设置状态无关，它与根据子内容高度调整父容器大小有关。

我理解 setState "selected" 来触发动画，但我的问题是关于宽度和高度的 XYZ 值，以及如何根据孩子的高度填充该值。我希望这可以解释我的问题。

【参考方案2】：

我曾尝试使用 AnimatedContainer 来做同样的事情，但事实证明没有办法轻松做到这一点。相反，您可以使用 AnimatedSize 获得所需的结果。因此，一旦 YourChild() 高度或宽度发生变化，就会按照 curve 和 duration 参数中的指定执行动画过渡。

动画尺寸（ 曲线：Curves.easeIn， 持续时间：常量持续时间（毫秒：100）， 孩子：你的孩子（）， )