有没有办法在颤振中创建索引堆栈之间的过渡

Question

是否有动画小部件或一种在索引堆栈之间进行转换的方法。我让堆栈覆盖整个页面。或者，如果我制作了几页，是否有更简单的方法从一页过渡到另一页。感谢新来的颤振。

Answer 1

就我而言，我已经使用了AnimatedSwitcher，但动画不起作用。Key所以我发现要制作动画，我们需要为每个孩子使用 a 。

就我而言

 List<ValueKey<int>> _keys = [ValueKey<int>(0),ValueKey<int>(1),ValueKey<int>(2)];

 int _currentIndex = 0;

现在使用 Key inAnimatedSwitcher如下：

AnimatedSwitcher(
  transitionBuilder: AnimatedSwitcher.defaultTransitionBuilder,
  duration: const Duration(milliseconds: 500),
  child: IndexedStack(
    index: _currentIndex,
    key: ValueKey<int>(_currentIndex),
    children: [
      Page1(key: _keys[0],),
      Page2(key:_keys[1]),
      Page3(key:_keys[2])
    ],
  ),
);

更改当前索引：

setState(() {
  _currentIndex = indexOfTabOrBottomNavItem;
});

注意：使用这种方式，您无法保留每个小部件的状态。

更新： 我在我的项目中使用动画包。您可以使用PageTransitionSwitcher动画包。https://pub.dev/packages/animations

PageTransitionSwitcher(
  duration: Duration(milliseconds: 250),
  transitionBuilder: (widget, anim1, anim2) {
    return FadeScaleTransition(
      animation: anim1,
      child: widget,
    );
  },
  child: IndexedStack(
    index: _currentIndex,
    key: ValueKey<int>(_currentIndex),
    children: [
      Page1(),
      Page2(),
      Page3()
    ],
  ),  
);

Answer 2

我认为你正在寻找的是AnimatedSwitcher.

例如

AnimatedSwitcher(
  duration: Duration(milliseconds: 300),
  child: _indexedArray[_index],
);

默认情况下AnimatedSwitcher运行淡入过渡。您可以探索transitionBuilder属性以运行自定义动画。

AnimatedCrossFade如果您只需要在 2 个小部件之间切换，您可能还想看看。

如果这有帮助，请告诉我。