Flutter 滞后动画

Question

我的动画似乎有点滞后，我不确定为什么...

我有一个 parent 小部件 - Stack，它还使用 Provider 来共享屏幕状态。根据状态（基本上是一个枚举），child 小部件（Child1、Child2、Child3）改变它们在堆栈中的位置（AnimatedPositioned）...

重要的是要说状态是从 children 更改的（它没有使用 setState，提供商正在处理）。每个 child 都有一个按钮，按下该按钮会更改状态。像这样：

  void onPressChangeState(State state) {
    state.state = AnotherState;
  }

Parent 小部件：

class Parent extends StatefulWidget {
  @override
  _ParentState createState() => _ParentState();
}

class _ParentState extends State<Parent> {
  State state = State();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: ChangeNotifierProvider(
        create: (_) => state,
        child: Stack(
          // Each of the children takes care of its animation.
          children: [
            Child1(),
            Child2(),
            Child3(),
          ],
        ),
      ),
    );
  }
}

Child(s) 小部件（它们遵循相同的结构）。请注意，children 小部件同时使用 AnimatedPositioned（以便它们根据状态移动）和 AnimatedOpacity（以便不透明度随状态变化）。

class SignUpSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var media = MediaQuery.of(context);
    var width = media.size.width;
    var height = media.size.height * Sheet.heightRatio - media.padding.top;

    double yOffset;
    double xOffset;
    double opacity;

    var state = Provider.of<State>(context);
    switch (state.state) {
      case State1:
        yOffset = height;
        xOffset = 0;
        opacity = 1;
        break;
      case State2:
        yOffset = 0 - media.viewInsets.bottom;
        xOffset = 0;
        opacity = 1;
        break;
      case State3:
        height += 25;
        yOffset = 0 - media.viewInsets.bottom;
        xOffset = 10;
        opacity = 0.4;
        break;
    }

    return AnimatedPositioned(
      width: width,
      height: height,
      duration: Duration(milliseconds: 1000),
      curve: Curves.fastLinearToSlowEaseIn,
      bottom: -offset,
      child: AnimatedOpacity(
         opacity: opacity,
         duration: Duration(milliseconds: 1000),
         curve: Curves.fastLinearToSlowEaseIn,
         child: Column(...),
    );
  }
}

我认为我的问题与 children 小部件是无状态的并且重建太多有关。滞后不是那么多，但很明显。

Answer 1

我使用分析模式构建应用程序，动画更加流畅。我在优化谈话中看到我们不应该基于调试模式评估动画，而是使用分析。

Flutter 滞后动画

Flutter laggy animation

flutter

flutter-animation

flutter-provider