我正在尝试制作一个具有初始页面和嵌套路由页面的应用程序。
为此,我使用了一个
go_router
库。
这是我的代码。
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(const MyApp());
final GlobalKey<NavigatorState> rootNavKey = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> shellNavKey = GlobalKey<NavigatorState>();
final GoRouter router = GoRouter(
navigatorKey: rootNavKey,
initialLocation: '/',
routes: [
GoRoute(
path: '/',
pageBuilder: (context, state) => const NoTransitionPage(child: Home()),
),
ShellRoute(
navigatorKey: shellNavKey,
routes: [
GoRoute(
path: '/somepage1',
pageBuilder: (context, state) => const NoTransitionPage(child: SomePage1()),
),
GoRoute(
path: '/somepage2',
pageBuilder: (context, state) => const NoTransitionPage(child: SomePage2()),
),
],
builder: (context, state, child) => Shell(state: state, child: child),
),
],
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: router,
);
}
}
class Shell extends StatelessWidget {
Shell({super.key, required this.state, required this.child}) {
print('Shell: ${state.location}');
}
final GoRouterState state;
final Widget child;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Container(
width: 300.0,
color: Colors.black,
padding: const EdgeInsets.all(16),
child: Column(
children: [
ListTile(
onTap: () => context.go('/somepage1'),
title: const Text('Go to SomePage 1', style: TextStyle(color: Colors.white)),
),
ListTile(
onTap: () => context.go('/somepage2'),
title: const Text('Go to SomePage 2', style: TextStyle(color: Colors.white)),
),
],
),
),
Expanded(child: child),
],
),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: InkWell(
onTap: () => context.replace('/somepage1'),
child: const Text('Click!'),
),
),
);
}
}
class SomePage1 extends StatelessWidget {
const SomePage1({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('Some Page 1'),
),
);
}
}
class SomePage2 extends StatelessWidget {
const SomePage2({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text('Some Page 2'),
),
);
}
}
当你点击初始页面中的文本时,你可以转到我想去的嵌套页面 - somepage1.
但是有一些奇怪的点和我的目的有差距
我的目的是这些。
但这两个目的都不满足
要解决这个问题,我应该怎么做...?