Flutter 动画无法正常工作

Question

我正在尝试在 bottomSheet 中为 Container 制作高度动画。向上滑动后，容器必须更改其高度。 在我向上滑动面板后，我调用方法 dragPanelUp() 将容器的高度更改为 panelAnimation.value，但高度在没有动画的情况下发生变化

我将不胜感激！

这是一个代码：

    class BottomMenu extends StatefulWidget {
  @override
  _BottomMenuState createState() => _BottomMenuState();
}
class _BottomMenuState extends State<BottomMenu> with SingleTickerProviderStateMixin {
  List<BottomPannel> panel;
  bool isPannelAdded;
  bool isPannelAddedUpper;
  AnimationController controller;
  Animation curve;
  Animation<double> panelAnimation;
  Animation<double> panelAnimation2;
  double height;
  dragPanelUp(){
    if (isPannelAdded == false){
      setState(() {
        height = panelAnimation.value;
        isPannelAdded = true;
        panel.add(BottomPannel());
      });
    } else if (isPannelAdded == true && isPannelAddedUpper == false){
      setState(() {
        height = panelAnimation2.value;
        isPannelAddedUpper = true;
        panel.add(BottomPannel());
      });
    }
  }
@override
  void initState(){
    super.initState();
    controller =
        AnimationController(duration: Duration(seconds: 3), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
    panelAnimation = Tween<double>(begin: 40, end: 370).animate(curve)
      ..addListener(() {
        setState(() {// The state that has changed here is the animation object’s value.
        });
      });
    panelAnimation2 = Tween<double>(begin: 370, end: 660).animate(curve)
      ..addListener(() {
        setState(() {// The state that has changed here is the animation object’s value.
        });
      });
 
    controller.forward();
    panel = <BottomPannel>[];
    isPannelAdded = false;
    isPannelAddedUpper = false;
    height = 40;
  }
Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: Container(
        height: height,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: const BorderRadius.all(Radius.circular(25.0)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                //offset: Offset(0, 3),
              )
            ]
        ),
        padding: const EdgeInsets.only(bottom: 15.0, left: 15, right: 15),
        child: Container(
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Container(
              child: Column(
                children: [
                  SwipeDetector(
                    onSwipeUp: (){
                      dragPanelUp();
                    },
                    child: Container(
                      child: Container(
                        margin: EdgeInsets.only(top: 15),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700],),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700]),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                            Container(
                              child: Icon(Icons.brightness_1_rounded, size: 6, color: Colors.blueGrey[700]),
                              margin: const EdgeInsets.only(left: 2.0),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  Column(
                    children:
                    panel.map((BottomPannel panel) {
                      return panel;
                    }).toList(),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          height: 900,
          color: Colors.red,
        ),
      ),
    );
  }
}

如果我出错了，请告诉我！

Answer 1

用AnimatedBuilder 小部件包装您的底部工作表容器并将动画实例传递给它，而不是在侦听器中调用setState 方法。

请参阅此处获取文档： https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html