Flutter 动画无法正常工作

Posted 2023-02-23

【中文标题】Flutter 动画无法正常工作

【英文标题】：Flutter Animation Is Not Working Correctly

【发布时间】：2021-06-11 15:20:32

【问题描述】：

我正在尝试在 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,
        ),
      ),
    );
  

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

【参考方案1】：

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

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

【讨论】：

感谢您的回答！您能否解释或举例说明如何使用 AnimatedBuilder 更改高度？