Flutter：一次多次使用相同的动画小部件答案

【问题标题】：Flutter: Using Same Animated Widget multiple Times at onceFlutter：一次多次使用相同的动画小部件
【发布时间】：2020-07-16 20:21:17
【问题描述】：

由于我在其他地方没有找到我的问题的任何答案，我会在这里尝试。我想显示多个小部件，它们具有相同的类型并且都有一个动画。没有显示错误，但只会显示一个带有动画的小部件。我怎样才能防止它发生？

 void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    final title = 'Animated Container on Build';

    return new MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Row(
          children: <Widget>[
            AniContainer(),
            AniContainer()
          ],
        )
      ),
    );
  }
}

class AniContainer extends StatefulWidget {
  @override
  _AniContainerState createState() => _AniContainerState();
}

class _AniContainerState extends State<AniContainer> with TickerProviderStateMixin{

  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController= AnimationController(vsync: this, duration: Duration(milliseconds: 1000),value: 1)..reverse();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizeTransition(
          axis: Axis.vertical,
          sizeFactor: _animationController,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.grey,
        )
      ],
    );
  }
}

【问题讨论】：

stackoverflow.com/questions/50554408/… 你需要一个构造函数你还要添加一个 Key 并调用 super
叫 super 是什么意思？
好的，我找到了。好像我的代码中有一个逻辑错误，但现在它可以工作了。具有讽刺意味的是，上面的代码适用于。（在列周围添加填充，您会看到）

标签： flutter flutter-animation flutter-test

【解决方案1】：

很抱歉您的代码没有问题或缺少密钥

这是一个很好的例子

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    final title = 'Animated Container on Build';

    return new MaterialApp(
      title: title,
      home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Row(
            children: <Widget>[
              AniContainer(),
              new Container(width: 10.0,),
              AniContainer()
            ],
          ),
        floatingActionButton: new FloatingActionButton(
          onPressed: () => setState(() {}),
        ),
      ),
    );
  }

}

class AniContainer extends StatefulWidget {

  @override
  _AniContainerState createState() => _AniContainerState();
}

class _AniContainerState extends State<AniContainer> with TickerProviderStateMixin{

  AnimationController _animationController2;

  @override
  void initState() {
    super.initState();
    _animationController= AnimationController(vsync: this, duration: Duration(milliseconds: 3000),value: 1)..reverse();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    // here are the animationController to can see the animation every tab on FloatingActionButton
    _animationController= AnimationController(vsync: this, duration: Duration(milliseconds: 3000),value: 1)..reverse();

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizeTransition(
          axis: Axis.vertical,
          sizeFactor: _animationController,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.grey,
        )
      ],
    );
  }
}

【讨论】：