Question

我想在启动应用程序后动画化容器的高度（在渲染小部件树并显示在屏幕上之后）。例如，将高度从86设置为210。

我尝试过的事情：

class MyAppState extends State<HomePage> with TickerProviderStateMixin {

  double appBarHeight = 86.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => animate());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          AnimatedContainer(
            curve: Curves.fastOutSlowIn,
            child: Container(
              color: Colors.red,
            ),
            height: appBarHeight,
            duration: Duration(milliseconds: 400),
          ),
          Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: EdgeInsets.only(right: 16.0, bottom: 16.0),
                child: FloatingActionButton(
                  child: Icon(Icons.brush),
                  onPressed: () {
                    animate();
                  },
                ),
              ))
        ],
      ),
    );
  }

  void animate(){
    setState(() {
      if (appBarHeight == 210.0) appBarHeight = 86.0;
      else appBarHeight = 210.0;
    });
  }
}

但是它不起作用，因为小部件在出现在屏幕上之前已经过动画处理。应用启动时，我看到白屏，然后我的小部件以最终高度显示在屏幕上。

为此，在Android中，我们可以使用addOnLayoutChangeListener()。

在奉承中有addOnLayoutChangeListener()的类似物吗？

Answer 1

正如您所提到的，这似乎是Android上的一个问题，我在iOS上进行了测试，动画从头开始运行。

您可以尝试以下解决方法：

  _startAnimation(_) async {
      await Future.delayed(Duration(milliseconds: 200));
      animate();
    }

    @override
    void initState() {
      super.initState();
      WidgetsBinding.instance.addPostFrameCallback(_startAnimation);
    }

应用启动后如何为小部件制作动画

1 个答案: