Flutter：英雄过渡+小部件动画同时出现？
因此，关于特定的动画案例，Flutter有点问题。
基本上，我想做的是同时为路由更改运行英雄过渡和在相邻小部件上运行自定义动画。
细分而言，我在根目录下有一个自定义InheritedWidget，该继承自StatefulWidget父级的应用状态被馈入。嵌套在我的InheritedWidget中，我有一个WidgetsApp和一个用于自定义标签导航的相邻兄弟姐妹。这棵树看起来像这样：
Root Widget (Stateful) |
|__InheritedWidget
|
|__WidgetsApp (Handles routing)
|
|__Navigation Bar (Overlay)
当我在WidgetsApp上执行使用Hero过渡的路线更改时，就会出现我的问题。发生这种情况时，我还尝试根据用户所在的视图来对导航栏进行动画显示或隐藏。但是，由于我在应用状态上使用bool变量通过动画显示或隐藏导航栏，因此SetState调用“覆盖”了英雄过渡，因为树是在过程中重建的（这就是我思维）。
我最初的想法是InheritedWidget将捕获应用程序状态更改，仅通过updateShouldNotify重建导航栏，但是可惜这并不是我所期望的效果:(
所以-是否有人尝试过类似的方法，或者对如何妥善处理有任何想法？:)
回答：
我做过类似的事情，但是不幸的是我的代码还包含很多其他内容，而且要做起来相对繁琐，所以我不得不将它们分解成一个例子，这比我现在能做的要多。我将解释我所做的一般概念。也许还有更好的方法可以做到这一点。
您想编写一个StatefulWidget，其State也扩展了NavigatorObserver（您可以使用无状态的widget，但我认为不是）。我个人将其放置在树中导航器的上方（即，它在其“
build”功能中构建了导航器），但是您很可能也将其置于“导航器”的旁边。
覆盖NavigatorObserver中的didPush，didRemove，didPop等方法。在其中的每一个中，调用setState并保存动画和其他参数，如下所示：
class NavigationFaderState extends State<NavigationFader> with NavigatorObserver { Animation _animation;
// whatever else you need, maybe starting/finishing opacity or position etc.
@override
void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
setState(() {
_animation = route.animation;
}
route.animation.addStatusListener((status) {
if (status = AnimationStatus.completed) {
setState(() {
_animation = null;
});
}
});
}
....
}
在您的构建函数中，您需要根据_animation和animate以及是否可能要设置的其他参数（例如，是否要进行动画处理的标志以及前进或后退的标志）进行检查-
我相信“
pop”动画已从0开始并与推入动画一样升至1，但我可能错了）。然后，您可以将该动画连接到想要设置导航栏动画的位置，可以使用AnimatedBuilder或直接将动画连接起来，等等。如果有关于这一切工作方式的任何特定问题，请发表评论，我将添加一些评论，等等。
希望有帮助=）
编辑：完整的代码示例。作为记录，我不建议这段代码那么好，或者您应该这样做。但这是解决问题的一种方法。在实际应用中使用它之前，值得对其进行测试，并可能添加一些断言以检查状态等。
导入’package：flutter / material.dart’;
void main() => runApp(new MyApp());class MyApp extends StatelessWidget {
PushListener listener = new PushListener();
@override
Widget build(BuildContext context) {
return new WidgetsApp(
locale: new Locale("en"),
navigatorObservers: [listener],
builder: (context, child) {
// this is here rather than outside the WidgetsApp so that it
// gets access to directionality, text styles, etc
return new Scaffold(
body: child,
bottomNavigationBar:
new ColorChangingNavigationBar(key: listener.navBarKey),
);
},
onGenerateRoute: (settings) {
switch (settings.name) {
case '/':
return new MaterialPageRoute(
settings: settings,
builder: (context) => Column(
children: <Widget>[
new Text(
"I have a green nav bar when you open me and blue when you come back"),
new RaisedButton(
onPressed: () {
Navigator.pushNamed(context, "/red");
},
child: new Text("Next"),
),
],
),
);
case '/red':
return new MaterialPageRoute(
settings: settings,
builder: (context) => Column(
children: <Widget>[
new Text("I have a red nav bar"),
new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
)
],
),
);
}
},
color: Colors.blue,
);
}
}
class PushListener extends NavigatorObserver {
GlobalKey<ColorChangingNavigationBarState> navBarKey = new GlobalKey();
@override
void didPop(Route route, Route previousRoute) {
if (route is ModalRoute && navBarKey.currentState != null) {
var name = route.settings.name;
var color = name == "/" ? Colors.red.shade500 : Colors.blue.shade500;
var animation = new ReverseAnimation(route.animation);
print("Popping & changing color to: ${name == "/" ? "red" : "blue"}");
navBarKey.currentState.setAnimating(animation, color);
}
}
@override
void didPush(Route route, Route previousRoute) {
if (route is ModalRoute && navBarKey.currentState != null) {
var name = route.settings.name;
var color = name == "/" ? Colors.blue.shade500 : Colors.red.shade500;
print("Pushing & changing color to: ${name == "/" ? "red" : "blue"}");
var animation = route.animation;
navBarKey.currentState.setAnimating(animation, color);
}
}
@override
void didRemove(Route route, Route previousRoute) {
// probably don't need
}
@override
void didStartUserGesture() {
// might want to do if gestures are supported with whichever type of
// route you're using.
}
@override
void didStopUserGesture() {
// if you implement didStartUserGesture
}
}
class ColorChangingNavigationBar extends StatefulWidget {
final Color startColor;
ColorChangingNavigationBar(
{Key key, this.startColor = const Color.fromRGBO(0, 255, 0, 1.0)})
: super(key: key);
@override
State<StatefulWidget> createState() => new ColorChangingNavigationBarState();
}
class _ColorAnimationInfo {
final Animation animation;
final Tween<Color> colorTween;
final AnimationStatusListener statusListener;
_ColorAnimationInfo(this.animation, this.colorTween, this.statusListener);
}
class ColorChangingNavigationBarState
extends State<ColorChangingNavigationBar> {
@override
void initState() {
_toColor = widget.startColor;
super.initState();
}
Color _toColor;
_ColorAnimationInfo _colorAnimationInfo;
void setAnimating(Animation animation, Color to) {
var fromColor;
if (_colorAnimationInfo != null) {
fromColor = _colorAnimationInfo.colorTween
.lerp(_colorAnimationInfo.animation.value);
_colorAnimationInfo.animation
.removeStatusListener(_colorAnimationInfo.statusListener);
} else {
fromColor = _toColor;
}
var statusListener = (state) {
if (state == AnimationStatus.completed ||
state == AnimationStatus.dismissed) {
setState(() {
_colorAnimationInfo = null;
});
}
};
animation.addStatusListener(statusListener);
setState(() {
_toColor = to;
Tween<Color> colorTween = new ColorTween(begin: fromColor, end: to);
_colorAnimationInfo =
new _ColorAnimationInfo(animation, colorTween, statusListener);
});
}
@override
Widget build(BuildContext context) {
if (_colorAnimationInfo != null) {
return new AnimatedBuilder(
animation: _colorAnimationInfo.animation,
builder: (context, child) {
return new Container(
color: _colorAnimationInfo.colorTween
.lerp(_colorAnimationInfo.animation.value),
height: 30.0,
);
});
} else {
return new Container(
color: _toColor,
height: 30.0,
);
}
}
@override
void dispose() {
if (_colorAnimationInfo != null) {
_colorAnimationInfo.animation.removeStatusListener(_colorAnimationInfo.statusListener);
}
_colorAnimationInfo = null;
super.dispose();
}
}
以上是 Flutter：英雄过渡+小部件动画同时出现？ 的全部内容， 来源链接： utcz.com/qa/403735.html
