Question

是否有动画小部件或在索引堆栈之间进行过渡的方法。我的纸叠覆盖了整个页面。或者，如果我做了几页，是否有一种更简便的方法从一页过渡到另一页。感谢新来的扑通。

Answer 1

我认为您正在寻找的是AnimatedSwitcher。

例如

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

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

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

让我知道这是否有帮助。

Answer 2

就我而言，我使用了AnimatedSwitcher，但动画无法正常工作。因此，我发现要制作动画，我们需要为每个孩子使用Keys。

就我而言

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

 int _currentIndex = 0;

现在使用动画切换台中的“使用”键，如下所示：

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

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

2 个答案: