我想移动另一个底部导航栏项目的按钮是不是在底部导航栏项目在go_router
在这张图片中,当我按下“移动到B详细页”按钮时,底部导航栏位于**“Section A”,它会移动B详细页,底部导航栏位于“Section A”。但是,当我在底部导航栏位于“Section A”时按下“Move to B Detail Page”按钮时,我想将底部导航栏项目状态更改为“Section B”**。
在我的代码里
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(MaterialApp.router(
routerConfig: router,
));
}
final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> _homeNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'a');
final GlobalKey<NavigatorState> _settingsNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'b');
final GoRouter router = GoRouter(
navigatorKey: _rootNavigatorKey,
initialLocation: '/a',
routes: <RouteBase> [
StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell){
return ScaffoldWithNavBar(navigationShell: navigationShell,);
},
branches: <StatefulShellBranch>[
StatefulShellBranch(
navigatorKey: _homeNavigatorKey,
routes: <RouteBase>[
GoRoute(
path: '/a',
builder: (context, state) => const HomePage(pageTitle: "A",),
routes: [
GoRoute(
path: 'detail',
builder: (context, state) => const DetailPage(pageTitle: "A",),
),
],
),
],
),
StatefulShellBranch(
navigatorKey: _settingsNavigatorKey,
routes: [
GoRoute(
path: '/b',
builder: (context, state) => const HomePage(pageTitle: "B",),
routes: [
GoRoute(
path: 'detail',
builder: (context, state) => const DetailPage(pageTitle: "B",),
),
],
),
],
),
],
),
]
);
class ScaffoldWithNavBar extends StatelessWidget {
const ScaffoldWithNavBar({
required this.navigationShell,
Key? key,
}) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));
final StatefulNavigationShell navigationShell;
@override
Widget build(BuildContext context) {
return Scaffold(
body: navigationShell,
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
],
currentIndex: navigationShell.currentIndex,
onTap: (int index) => navigationShell.goBranch(index),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({
super.key,
required this.pageTitle,
});
final String pageTitle;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("$pageTitle Home Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () => context.push("/a/detail"),
child: const Text("Move to A Detail Page"),
),
ElevatedButton(
onPressed: () => context.push("/b/detail"),
child: const Text("Move to B Detail Page"),
),
]
),
),
);
}
}
class DetailPage extends StatelessWidget {
const DetailPage({
super.key,
required this.pageTitle,
});
final String pageTitle;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("$pageTitle Detail Page"),
),
);
}
}
如果你能解决这个问题,我希望你能合作。
我试过RiverPod的状态管理,但我不能很好地工作。
1条答案
按热度按时间ogq8wdun1#
您无法理解
context.go()
和context.push()
根据Go_router,
go()替换了整个路由栈,而push()在不触及任何现有页面的情况下将新页面推到顶部
您的问题可以通过更改为
context.go()
轻松解决