Go路由器无法导航

Question

我尝试使用Go Router在Flutter上学习导航。如果我点击扫描按钮，它会跳转到扫描屏幕。然后，如果我返回，它会返回到主屏幕。问题是当我再次点击扫描按钮时，屏幕没有移动到扫描屏幕。 视频 (https://drive.google.com/file/d/1PuyxdDOeAxs8tvf0kvReJ1DSVOPyrp5N/view?usp=share_link)

这是我的代码：

main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:go_router/go_router.dart';
import 'package:lestari/Pages/scanpage.dart';

import 'Pages/homepage.dart';
import 'Pages/loginpage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    GoRouter router = GoRouter(
      routes: [
        GoRoute(
          path: "/",
          name: "home",
          builder: (context, state) => const HomePage(),
          routes: [
            GoRoute(
              path: "scan",
              name: "scan",
              builder: (context, state) => const ScanPage(),
            )
          ]
        ),
        GoRoute(
          path: "/login",
          name: "login",
          builder: (context, state) => const LoginPage(),
        )
      ],initialLocation: "/", routerNeglect: true, debugLogDiagnostics: true
    );
    return MaterialApp.router(
      theme: ThemeData(
        fontFamily: GoogleFonts.poppins().fontFamily
      ),
      routeInformationParser: router.routeInformationParser,
      routeInformationProvider: router.routeInformationProvider,
      routerDelegate: router.routerDelegate,
      debugShowCheckedModeBanner: false,
    );
  }
}

homepage.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Text("Ini Homepage", style: TextStyle(fontSize: 25)),
            Container(
              height: 50,
              width: double.infinity,
              child: ElevatedButton(
                onPressed: (){
                  return context.go("/scan");
                }, 
                child: const Text("Scan", style: TextStyle(fontSize: 25),)
              ),
            )
          ],
        )
      ),
    );
  }
}

scanpage.dart

import 'package:flutter/material.dart';

class ScanPage extends StatelessWidget {
  const ScanPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text('ScanPage'),),
      body: SafeArea(child: Text('ScanPage')),
    );
  }
}

如果扫描按钮被点击，我希望它能够进入扫描页面。

更新

这是在go_router版本5.2.0上的问题 (https://github.com/flutter/flutter/issues/115832)

- Arik setyawan

Answer 1

首先，将你的路由变量移出 Stateless widget 的 build 方法。

接下来，将 go 方法替换为 push，因为 go 会构建整个导航堆栈到路由，而 push 只是向当前导航堆栈添加额外的导航。

这里是更新后的 HomePage。

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              const Text("Ini Homepage", style: TextStyle(fontSize: 25)),
              Container(
                height: 50,
                width: double.infinity,
                child: ElevatedButton(
                    onPressed: (){
                      return context.push("/scan");
                    },
                    child: const Text("Scan", style: TextStyle(fontSize: 25),)
                ),
              )
            ],
          )
      ),
    );
  }
}

- powerman23rus