Flutter 重新触发淡入过渡

我正在尝试使用FadeTransition在按下按钮后淡入图片和一些文本。到目前为止，这是工作良好，但在随后按下按钮，我希望一个新的图片和文字淡入。现在，第一张图片和文字会淡入，但随后的图片和文字不会淡入

以下是我目前的代码：

import 'package:flutter/material.dart';

class SurpriseReveal extends StatefulWidget {
  final Widget child;
  final int surpriseNumber;
  final List<Map<String, String>> surprises;
  final Function randomSurprise;

  SurpriseReveal(
      {@required this.surpriseNumber,
      @required this.surprises,
      @required this.randomSurprise,
      @required this.child});

  @override
  _SurpriseRevealState createState() => _SurpriseRevealState();
}

class _SurpriseRevealState extends State<SurpriseReveal> with SingleTickerProviderStateMixin{
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(_controller);
  }

  @override
  dispose(){
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return Container(
      child: Stack(
        children: <Widget>[
          Scaffold(
            floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
            floatingActionButton: FloatingActionButton(
              child: const Icon(Icons.share),
              splashColor: Colors.pink[900],
              backgroundColor: Colors.pink[300],
              onPressed: () {},
            ),
          ),
          Positioned(
            bottom: 300,
            top: 40,
            right: 40,
            left: 40,
            child: FadeTransition(
              opacity: _animation,
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.pink[300],
                    width: 4,
                  ),
                  borderRadius: BorderRadius.circular(300),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(40.0),
                  child: Text(
                    widget.surprises[widget.surpriseNumber]['Surprises'],
                    style: TextStyle(fontSize: 20, color: Colors.pink[700]),
                  ),
                ),
                alignment: Alignment.topCenter,
              ),
            ),
          ),
          Positioned(
            bottom: 380,
            top: 120,
            right: 70,
            left: 70,
              child: FadeTransition(
                opacity: _animation,
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: new AssetImage(
                          widget.surprises[widget.surpriseNumber]['Image'] ),
                      fit: BoxFit.fill,
                    ),
                    border: Border.all(
                      color: Colors.pink[300],
                      width: 2,
                    ),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  //child: Image.asset(surprises[surpriseNumber]['Image']),
                ),
              ),
          ),

            Positioned(
              bottom: -60,
              top: 400,
              right: 120,
              left: 120,
                child: FloatingActionButton(
                  onPressed: widget.randomSurprise,
                  splashColor: Colors.pink[900],
                  backgroundColor: Colors.pink[300],
                  child: Container(
                    // decoration property gives it a color and makes it round like a floating action button
                    // add your desired padding here
                    // add the child element
                    child: Center(
                      child: Text(
                        'Surprise me again!',
                        // style of the text
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 22.0,
                          color: Colors.pink[900],
                        ),
                      ),
                    ),
                  ),
                ),
            ),
        ],
        overflow: Overflow.visible,
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类惊奇揭示扩展StatefulWidget{
最后一个孩子；
最终整数；
最后的惊喜清单；
最终功能随机性；
惊奇揭示(
{@需要这个号码，
@需要这个，惊喜，
@需要这一点，
@需要这个。child}）；
@凌驾
_SurpriseRevealState createState（）=>\u SurpriseRevealState（）；
}
类_SurpriseRevealState使用SingleTickerProviderStateMixin扩展状态{
动画控制器_控制器；
动画(动画),；
@凌驾
void initState（）{
_控制器=动画控制器(
vsync:这个,，
持续时间：持续时间（秒数：2），
);
_动画=吐温(
开始：0.0，
完:1.0,，
).设置动画（_控制器）；
}
@凌驾
处置{
_controller.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
_controller.forward（）；
返回容器(
子：堆栈(
儿童：[
脚手架(
floatingActionButtonLocation:floatingActionButtonLocation.endFloat，
浮动操作按钮：浮动操作按钮(
子：常量图标（Icons.share），
splashColor:颜色。粉红色[900]，
背景颜色：颜色。粉红色[300]，
按下：（）{}，
),
),
定位(
底数：300，
前40名，
右:40,，
左:40,，
孩子：FadeTransition(
不透明度：_动画，
子：容器(
装饰：盒子装饰(
边界：边界(
颜色：颜色。粉红色[300]，
宽度：4，
),
边界半径：边界半径。圆形（300），
),
孩子：填充(
填充：常数边集全部（40.0），
子：文本(
widget.shoppings[widget.shoppingnumber]['shoppings']，
样式：TextStyle（字体大小：20，颜色：Colors.pink[700]），
),
),
对齐：alignment.topCenter，
),
),
),
定位(
底部：380，
排名：120，
右：70，
左：70，
孩子：FadeTransition(
不透明度：_动画，
子：容器(
装饰：盒子装饰(
图像：装饰图像(
图片：新资产时代(
widget.shoppings[widget.shoppingnumber]['Image']），
fit:BoxFit.fill，
),
边界：边界(
颜色：颜色。粉红色[300]，
宽度：2，
),
边界半径：边界半径。圆形（12），
),
//子项：Image.asset（惊喜[惊喜编号]['Image']），
),
),
),
定位(
底部：-60，
前400名，
右:120,，
左：120，
子：浮动操作按钮(
onPressed:widget.random，
splashColor:颜色。粉红色[900]，
背景颜色：颜色。粉红色[300]，
子：容器(
//装饰属性赋予它一种颜色，使其像浮动动作按钮一样圆形
//在此处添加所需的填充
//添加子元素
儿童：中心(
子：文本(
“再给我一次惊喜！”，
//文体
textAlign:textAlign.center，
样式：TextStyle(
字体大小：22.0，
颜色：颜色。粉红色[900]，
),
),
),
),
),
),
],
溢出：溢出。可见，
),
);
}
}

我想我需要一个能触发新图片和文本的晶圆厂来再次触发动画，但我不确定怎么做？

试试这个：

FloatingActionButton(
                  onPressed: {widget.randomSurprise; _controller.reset();},
......

如果希望动画控制器再次播放动画，则需要将其重置。

您好，首先，行“_controller.forward（）；”不应位于build方法中，而应位于initState方法中。然后创建一个按钮，再次调用“_controller.forward（）；”