web-dev-qa-db-ja.com

スイッチがアニメーション化しないAnimatedSwitcherを修正する方法

アプリにニュースセクションを作成しようとしています。ニュースを表示するこのページでは、ページの任意の場所をクリックして、リストの次のニュースを取得できます。これまでのところ問題ありませんが、ニースアニメーションにしたかったので、AnimatedSwitcherを実装してみましたが、アニメーションが表示されない理由がわかりません。

コードの階層を変更してみました。ジェスチャー検出器をアニメーション化されたスイッチャー内に配置します。メインコンテナを外側または内側にも配置します。私はそれが十分に明白ではないが何もない場合に備えてそれをスケーリングするアニメーションビルダーを試しました。期間も変更しようとしましたが、それだけではありませんでした。

class ShowNews extends StatefulWidget {
  @override
  _ShowNewsState createState() => _ShowNewsState();
}

class _ShowNewsState extends State<ShowNews> {
  List<News> _news = [
    News(title: 'OYÉ OYÉ', desc: 'bla bla bla bla bla'),
    News(title: 'another one', desc: 'plus de bout d\'histoire'),
    News(title: 'boum', desc: 'attention à l\'accident'),
    News(title: 'Lorem ipsum', desc: 'Lorem ipsum in doloris'),
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          if (_currentIndex < _news.length - 1) {
            _currentIndex++;
          } else {
            _currentIndex = 0;
          }
        });
      },
      child: Container(
        height: 160,
        padding: EdgeInsets.all(20.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ),
        ),
        child: AnimatedSwitcher(
          duration: Duration(seconds: 5),
          child: ColumnArticle(_news, _currentIndex),
        ),
      ),
    );
  }
}

アニメーション以外はすべて正常に機能しています。

編集：別のキーを追加してみましたが、まだアニメーションはありません。

class ColumnArticle extends StatelessWidget {
  final List<News> _news;
  final int _currentIndex;

  ColumnArticle(this._news, this._currentIndex);

  @override
  Widget build(BuildContext context) {
    return Column(
      key: ValueKey<int>(_currentIndex),
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Text(
          _news[_currentIndex].title,
          textAlign: TextAlign.left,
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
        SizedBox(
          height: 10.0,
        ),
        Text(
          _news[_currentIndex].desc,
          style: TextStyle(
            fontSize: 14.0,
          ),
        ),
      ],
    );
  }
}
flutterdartflutter-animation
6
Marylène Beaudin

あなたの問題は ここ で説明されているウィジェットのタイプかもしれません。

「新しい」子が「古い」子と同じウィジェットタイプおよびキーであるが、パラメータが異なる場合、フレームワークに関する限りなので、AnimatedSwitcherはそれらの間の遷移を行いません。心配です、それらは同じウィジェットであり、既存のウィジェットは新しいパラメーターで更新できます。遷移を強制的に発生させるには、一意と見なしたい各子ウィジェットにキーを設定します（通常、この子を他の子と区別するウィジェットデータのValueKey）。

Newsウィジェットに個別のキーを設定して、それらを一意にすることができます。この例のように：

Column(
  children: <Widget>[
     AnimatedSwitcher(
         duration: const Duration(milliseconds: 500),

         child: Text(
             '$_count',
             // This key causes the AnimatedSwitcher to interpret this as a "new"
             // child each time the count changes, so that it will begin its animation
             // when the count changes.
             key: ValueKey<int>(_count),
         ),
     ),
     RaisedButton(
          child: const Text('Increment'),
          onPressed: () {
            setState(() {
              _count += 1;
            });
          },
     ),
])
1
easeccy