我是新手,我正在使用英雄小部件制作浮动按钮的动画。
我具有底部导航,并且必须使用标签导航器打开页面。但是英雄动画无法正常工作。
我使用了所有可能的解决方案,但英雄动画仍然无法用于页面路由。
这是我的代码段。
FloatingActionButton(
onPressed: () {
_selectTab(TabItem.Floating);
},
child: Icon(Icons.add),
heroTag: "tag",
),
这是单击以显示fab按钮以打开新页面
void _selectTab(TabItem tabItem) {
if (tabItem == currentTab) {
// pop to first route
_navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
} else {
setState(() => currentTab = tabItem);
}
}
在导航器中
@override
Widget build(BuildContext context) {
var routeBuilders = _routeBuilders(context);
return Navigator(
observers: [
HeroController(),
],
key: widget.navigatorKey,
initialRoute: TabNavigatorRoutes.root,
onGenerateRoute: (routeSettings) {
return PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) =>
routeBuilders[routeSettings.name](context));
});
}
路线
if (widget.tabItem == TabItem.Floating) {
return ActFloatingScreen(
title: 'Floating Tab',
onPush: (materialIndex) =>
_push(context, materialIndex: materialIndex),
);
}
推
void _push(BuildContext context, {int materialIndex: 500}) {
var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(seconds: 1),
pageBuilder: (_, __, ___) =>
routeBuilders[TabNavigatorRoutes.detail](context)));
}
最后是我想用英雄动画打开的我想要的课程
return Scaffold(
backgroundColor: Colors.white,
body: Hero(
tag: "tag",
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.green,
height: 200,
),
PositionedDirectional(
start: 0,
end: 0,
top: 150,
child: Center(
child: Icon(
Icons.add,
size: 100,
)),
),
],
),
),
);