首页 > 解决方案 > 如何在不同的小部件上使用相同的 animation.value?

问题描述

我是flutter的新手,谁能告诉我如何使用多个实例在不同的小部件中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),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),],);}

标签: flutterflutter-animationflutter-web

解决方案


推荐阅读