通常你会有一个在每个页面上都有自己的AppBar的Scaffold,但是为什么go_router需要它呢?为什么你不能有一个单独的带有AppBar的Scaffold,让它来处理导航。
在本例中,转到SecondScreen不会更新AppBar并显示后退按钮。
为什么这是不可能的?
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(const MyApp());
final GoRouter _router = GoRouter(
routes: <RouteBase>[
ShellRoute(
builder: (context, state, child) {
return Scaffold(
body: child,
appBar: AppBar(
title: const Text('Test'),
),
);
},
routes: [
GoRoute(
path: '/',
pageBuilder: ((context, state) => const NoTransitionPage(
child: HomeScreen(),
)),
routes: [
GoRoute(
path: 'second',
pageBuilder: ((context, state) => const NoTransitionPage(
child: SecondScreen(),
)),
),
],
),
],
),
],
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () => context.go('/second'),
child: const Text('Go to the Second screen'),
),
);
}
}
class SecondScreen extends StatelessWidget {
const SecondScreen({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('Second screen'),
);
}
}
1条答案
按热度按时间gmol16391#
编辑:* 本例中的SecondScreen不会更新应用栏并显示后退按钮 *:
因为您对所有子组件使用相同的appBar。ShellRoute的主要用途是具有相同的
appBar
。要使其具有backButton
,就不能使其具有相同的appBar
。应更改appBar。这违反了ShellRoute
的用法要使用
backbutton
,您应该从ShellRoute
导航到GoRoute
或从GoRoute
导航到ShellRoute
,在ShellRoute
中,后退按钮是不可能的,因为它会在其子项周围创建一个 shell 。因此,在ShellRoute中使用后退按钮将使始终使用同一个appBar的目的落空。有两处更正
1.将
second
更改为/second
1.要使appBar具有后退按钮,请使用
context.push('/second')
而不是context.go('/second')
x一个一个一个一个x一个一个二个x