flutter - Flutter：一次多次使用相同的动画小部件

Question

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

 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,
        )
      ],
    );
  }
}

标签： flutterflutter-animationflutter-test

Answer 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,
        )
      ],
    );
  }
}