Флаттер: использование одного и того же анимированного виджета несколько раз одновременно - PullRequest
Новая
       12

Флаттер: использование одного и того же анимированного виджета несколько раз одновременно

0 голосов
/ 04 апреля 2020

Так как я не нашел ответов на свой вопрос, где еще, я попробую здесь. Я хочу отобразить несколько виджетов, которые имеют один и тот же тип и имеют анимацию. Ошибки не отображаются, но отображается только один виджет с анимацией. Как я могу предотвратить это? 

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

1 Ответ

0 голосов
/ 05 апреля 2020

Прошу прощения, что с вашим кодом или недостающим ключом ничего не случилось

Вот пример, который отлично работает 

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