动画容器|根据孩子的身高进行动画处理

时间:2020-01-14 20:53:26

标签: flutter

我想根据Child的身高为容器高度设置动画,这可能吗?

请参见下面的示例...卡>列> [容器,动画容器]

如何在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 个答案:

答案 0 :(得分: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;
    });
  },
),