flutter 嵌套页面的AppBar导航

qojgxg4l  于 2023-01-05  发布在  Flutter
关注(0)|答案(1)|浏览(287)

通常你会有一个在每个页面上都有自己的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'),
    );
  }
}
gmol1639

gmol16391#

编辑:* 本例中的SecondScreen不会更新应用栏并显示后退按钮 *:
因为您对所有子组件使用相同的appBar。ShellRoute的主要用途是具有相同的appBar。要使其具有backButton,就不能使其具有相同的appBar。应更改appBar。这违反了ShellRoute的用法
要使用backbutton,您应该从ShellRoute导航到GoRoute或从GoRoute导航到ShellRoute,在ShellRoute中,后退按钮是不可能的,因为它会在其子项周围创建一个 shell 。因此,在ShellRoute中使用后退按钮将使始终使用同一个appBar的目的落空。
有两处更正
1.将second更改为/second

GoRoute(
    path: '/second', 👈 Change to this
    pageBuilder: ((context, state) => const NoTransitionPage(
          child: SecondScreen(),
        )),
    ),

1.要使appBar具有后退按钮,请使用context.push('/second')而不是context.go('/second')
x一个一个一个一个x一个一个二个x

相关问题