Flutter滞后动画

Question

我的动画似乎有点滞后，我不知道为什么。。。

我有一个父窗口小部件-Stack，它也使用一个Provider来共享屏幕的状态。根据状态(基本上是枚举(，子窗口小部件(Child1、Child2、Child3(会更改其在堆栈中的位置(AnimatedPosited(。。。

重要的是要说，状态是从孩子们那里改变的(它没有使用setState，提供者正在处理这个问题(。每个孩子都有一个按钮，按下后会更改状态。像这样：

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

父窗口小部件：

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(),
],
),
),
);
}
}

子窗口小部件(它们遵循相同的结构(。请注意，子窗口小部件同时使用AnimatedPosited(以便它们根据状态移动(和AnimatedPOpacity(以便不透明度随状态变化(。

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(...),
);
}
}

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

Answer 1

我使用评测模式构建了该应用程序，动画更加流畅。我在一次优化演讲中看到，我们不应该基于调试模式评估动画，而应该使用评测。