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

【问题标题】：Is there a way to create a transition between indexed stacks in flutter有没有办法在颤动中创建索引堆栈之间的过渡
【发布时间】：2019-06-15 06:38:22
【问题描述】：

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

【问题讨论】：

标签： flutter

【解决方案1】：

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

就我而言

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

 int _currentIndex = 0;

现在使用 AnimatedSwitcher 中的 Key 如下：

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

【讨论】：

您好，如何使用 key 属性来保持标签状态？如果没有 PageTransitionSwitcher 和 IndexedStack，我的状态是持久的。如果我使用 PageTransitionSwitcher 我的状态不是持久的。您可以在定义和设置键的位置发布代码吗？谢谢。
请在这里帮助我：stackoverflow.com/questions/65050756/…

【解决方案2】：

我想你要找的是AnimatedSwitcher。

例如

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

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

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

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

【讨论】：