英文:
Flutter: How to change page transition based on previous page
问题
我有一个Flutter Web应用，其中有一个自定义侧边导航栏，显示在每个页面上。为了保持URL导航的同时始终显示相同的侧边导航栏，我正在使用go_router包将所有页面放在一个ShellRoute中。
现在我想要实现向上滑动过渡到当前项目下面的导航项目，反之亦然。我该如何实现这一点？
以下是我代码的一个简化版本：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: GoRouter(
initialLocation: "/dash",
routes: [
ShellRoute(
builder: (context, state, child) => SideNavBarPage(subPage: child),
routes: [
GoRoute(
path: '/dash',
builder: (context, state) => DashPage(),
),
GoRoute(
path: '/other',
builder: (context, state) => OtherPage(),
),
GoRoute(
path: '/another',
builder: (context, state) => AnotherPage(),
),
],
),
],
),
);
}
}
class SideNavBarPage extends StatelessWidget {
final Widget subPage;
const SideNavBarPage({
required this.subPage,
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
CustomSideNavBar(
items: [
CustomSideNavBarItem(onTap: () => context.go("/dash")),
CustomSideNavBarItem(onTap: () => context.go("/other")),
CustomSideNavBarItem(onTap: () => context.go("/another")),
],
),
Expanded(child: subPage),
],
),
);
}
}
例如：如果我想从/another切换到/dash，我想要从顶部向下过渡，而从/dash到/other，我想要从底部向上滑动。
英文:
I have a Flutter web app with a custom side navigation bar which is displayed on every page. So that I can always show the same side navigation bar while still keeping URL navigation I am using the go_router package with all of the pages in a ShellRoute.
Now I want to slide transition up to a navigation item below the current one and visa-verse. How can I achieve this?
Here's an over simplified version of my code
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: GoRouter(
initialLocation: "/dash",
routes: [
ShellRoute(
builder: (context, state, child) => SideNavBarPage(subPage: child),
routes: [
GoRoute(
path: '/dash',
builder: (context, state) => DashPage(),
),
GoRoute(
path: '/other',
builder: (context, state) => OtherPage(),
),
GoRoute(
path: '/another',
builder: (context, state) => AnotherPage(),
),
],
),
],
),
);
}
}
class SideNavBarPage extends StatelessWidget {
final Widget subPage;
const SideNavBarPage({
required this.subPage,
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
CustomSideNavBar(
items: [
CustomSideNavBarItem(onTap: () => context.go("/dash")),
CustomSideNavBarItem(onTap: () => context.go("/other")),
CustomSideNavBarItem(onTap: () => context.go("/another")),
],
),
Expanded(child: subPage),
],
),
);
}
}
For example: if I wanted to switch from /another to /dash I would want to transition down from top to bottom, whereas from /dash to /other I would want to slide up from bottom to top.
答案1
得分: 2
使用 go_router 的 StatefulShellRoute（在此处查看示例）。
英文:
Use go_router's StatefulShellRoute (see an example here).
答案2
得分: 0
Use auto_route: ^7.1.0 用于在Flutter中进行导航，它具有transitionBuilder，因此您可以轻松启用页面之间的过渡动画。
例如：
class DashboardPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AutoTabsRouter(
// 列出您的选项卡路由
// 此处使用的路由必须声明为子路由
// /dashboard的子路由
routes: const [
UsersRoute(),
PostsRoute(),
SettingsRoute(),
],
transitionBuilder: (context, child, animation) => FadeTransition(
opacity: animation,
// 传递的child在技术上是我们的动画选定的标签页
child: child,
),
builder: (context, child) {
// 使用上下文获取作用域的TabsRouter控制器
final tabsRouter = AutoTabsRouter.of(context);
// 在AutoTabsRouter内部构建Scaffold，以访问此上下文中提供的tabsRouter控制器
return Scaffold(
body: child,
bottomNavigationBar: BottomNavigationBar(
currentIndex: tabsRouter.activeIndex,
onTap: (index) {
// 在这里切换选项卡
tabsRouter.setActiveIndex(index);
},
items: [
BottomNavigationBarItem(label: 'Users', ...),
BottomNavigationBarItem(label: 'Posts', ...),
BottomNavigationBarItem(label: 'Settings', ...),
],
),
);
},
);
}
}
英文:
Use auto_route: ^7.1.0 for navigation in flutter, it have transitionBuilder so that you can simply enable transition animation between pages.
Eg:
class DashboardPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AutoTabsRouter(
// list of your tab routes
// routes used here must be declared as children
// routes of /dashboard
routes: const [
UsersRoute(),
PostsRoute(),
SettingsRoute(),
],
transitionBuilder: (context,child,animation)=> FadeTransition(
opacity: animation,
// the passed child is technically our animated selected-tab page
child: child,
),
builder: (context, child) {
// obtain the scoped TabsRouter controller using context
final tabsRouter = AutoTabsRouter.of(context);
// Here we're building our Scaffold inside of AutoTabsRouter
// to access the tabsRouter controller provided in this context
//
//alterntivly you could use a global key
return Scaffold(
body: child,
bottomNavigationBar: BottomNavigationBar(
currentIndex: tabsRouter.activeIndex,
onTap: (index) {
// here we switch between tabs
tabsRouter.setActiveIndex(index);
},
items: [
BottomNavigationBarItem(label: 'Users',...),
BottomNavigationBarItem(label: 'Posts',...),
BottomNavigationBarItem(label: 'Settings',...),
],
));
},
);}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论