如何在不同的小部件上使用相同的animation.value?

时间:2020-03-09 00:46:39

标签: flutter flutter-animation flutter-web

我是扑朔迷离的新手,请问谁能告诉我如何使用animation的多个实例在不同的小部件中使用单独的animation.value,例如,我在这里以width: animation.value的形式使用 欢迎任何帮助

.....
    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    animation = Tween<double>(begin: 0, end: 200).animate(controller)
      ..addListener(() {
        setState(() {});
      });
    .......
    Widget build(BuildContext context) {
    return Scaffold(
  body: Row(
    children: <Widget>[MouseRegion(
                            onEnter: (hovered) {
                              controller.forward();
                            },
                            onExit: (hovered) {
                              controller.reverse();
                            },
                            child: Container(
                              color: Colors.black,
                              child: Stack(
                                children: <Widget>[
                                  AnimatedContainer(
                                    padding: EdgeInsets.all(5),
                                    color: Colors.red.shade300,
                                    duration: Duration(milliseconds: 300),
                                    curve: Curves.decelerate,
                                    height: 5,
                                    width: animation.value,
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text(
                                      "About",
                                      softWrap: false,
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 18),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          MouseRegion(
                            onEnter: (hovered) {
                              controller.forward();
                            },
                            onExit: (hovered) {
                              controller.reverse();
                            },
                            child: Container(
                              color: Colors.black,
                              child: Stack(
                                children: <Widget>[
                                  AnimatedContainer(
                                    padding: EdgeInsets.all(5),
                                    color: Colors.red.shade300,
                                    duration: Duration(milliseconds: 300),
                                    curve: Curves.decelerate,
                                    height: 5,
                                    width: animation.value,
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text(
                                      "About",
                                      softWrap: false,
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 18),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),],);}

0 个答案:

没有答案