flutter - AnimatedSwitcher 没有动画

Question

我正在尝试在我的应用程序中创建一个新闻版 block 。在这个要显示新闻的页面中，我希望能够单击页面上的任意位置并获取列表中的下一个新闻。到目前为止没问题，但我希望它有一个漂亮的动画，所以我尝试实现 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,
          ),
        ),
      ],
    );
  }
}

Answer 1

发生这种情况是因为 AnimatedSwitcher将添加一个动画随时，它是用不同的子引用重建的。但是，在您的小部件生命周期中，您始终使用 ColumnArticle作为一个 child ，因此，实际上并没有交换任何小部件类型，这就是 ValueKey发挥作用。

您可以使用索引作为键的引用，但确保它确实发生了变化，否则它不会起作用，您还需要将它传递给您的ColumnArticle。基本小部件 ( super )。

所以，你的 ColumnArticle应该是这样的:

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

  ColumnArticle(this._news, this._currentIndex) : super(key: ValueKey<int>(_currentIndex));

  ...
}