flutter - 列表更改时动画容器没有动画

Question

import "package:flutter/material.dart";
import "dart:async";

class JoinScreen extends StatefulWidget {
   @override
  _JoinScreenState createState() {   
   return _JoinScreenState();
          }
   }

class _JoinScreenState extends State<JoinScreen> {
  List<Widget> widgetList = [];

  @override
  void initState() {
    new Timer(const Duration(milliseconds: 100), () {
     print('timeout');
    setState(() {        
       widgetList.add(secondHalf());
     });
    });

new Timer(const Duration(milliseconds: 1000), () {
  print('timeout');
  setState(() {        
    widgetList.add(firstHalf());
  });
});

super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return AnimatedContainer(
     duration: Duration(seconds: 2),
      child: Column(
       children: widgetList,
     ),
   );
 }

 Widget firstHalf() {
   return Expanded(
     child: Container(
       decoration: BoxDecoration(color: Colors.blueAccent),
     ),
   );
 }

 Widget secondHalf() {
   return Expanded(
     child: Container(
       decoration: BoxDecoration(color: Colors.pinkAccent),
     ),
     );
    }
}

如果我在定时器和设置状态的帮助下改变了容器的宽度和高度，它就会产生动画效果。但是当向构建函数添加两个新的小部件列表时，没有任何动画。

我想要一个展开的动画。因为我使用的是扩展，所以我无法给出具体的高度，这对扩展没有意义。

我该怎么做？

Answer 1

使用 AnimatedSize 而不是 AnimatedContainer。

要使 AnimatedSize 正常工作，我们需要在 _JoinScreenState 上使用名为 SingleTickerProviderStateMixin 的混合宏并将 vsync 属性设置为当前实例 (this) 之后 AnimatedSize 将在其子项上寻找变化并相应地设置动画，

更新:TickerProvider vsync 在 Flutter v2.2.0-10.1.pre 之后被弃用。它现在在小部件 (AnimatedSize) 本身中实现。引用检查source code .

这是你的代码

import "package:flutter/material.dart";
import "dart:async";

class JoinScreen extends StatefulWidget {
@override
 _JoinScreenState createState() {   
    return _JoinScreenState();
    }
 }

class _JoinScreenState extends State<JoinScreen> 
 with SingleTickerProviderStateMixin {
  List<Widget> widgetList = [];

  @override
  void initState() {
    new Timer(const Duration(milliseconds: 100), () {
    print('timeout');
    setState(() {        
    widgetList.add(secondHalf());
   });
  });

  new Timer(const Duration(milliseconds: 1000), () {
    print('timeout');
    setState(() {        
      widgetList.add(firstHalf());
    });
  });

  super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return AnimatedSize(
     vsync: this,
     duration: Duration(seconds: 2),
     child: Column(
       children: widgetList,
       ),
   );
 }

 Widget firstHalf() {
   return Expanded(
     child: Container(
       decoration: BoxDecoration(color: Colors.blueAccent),
     ),
   );
 }

 Widget secondHalf() {
   return Expanded(
     child: Container(
       decoration: BoxDecoration(color: Colors.pinkAccent),
     ),
    );
  }
}