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

Posted 2023-02-23

【中文标题】Flutter：一次多次使用相同的动画小部件

【英文标题】：Flutter: Using Same Animated Widget multiple Times at once

【发布时间】：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,
        )
      ],
    );
  

【问题讨论】：

***.com/questions/50554408/… 你需要一个构造函数你还要添加一个 Key 并调用 super

叫 super 是什么意思？

好的，我找到了。好像我的代码中有一个逻辑错误，但现在它可以工作了。具有讽刺意味的是，上面的代码适用于。 （在列周围添加填充，您会看到）

【参考方案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,
        )
      ],
    );