Go路由器无法导航

Question

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

这是我的代码：

主程序.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,
    );
  }
}

主页.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),)
              ),
            )
          ],
        )
      ),
    );
  }
}

扫描页面.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）

Answer 1

首先，将路由器变量移到小部件build的方法之外Stateless。

接下来，将go方法替换为pushbecause go，旨在为路线构建整个导航堆栈，但push只是向当前导航堆栈添加额外的导航

这是您更新后的主页

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),)
                ),
              )
            ],
          )
      ),
    );
  }
}