flutter Go路由器未导航

fbcarpbf  于 2022-11-30  发布在  Flutter
关注(0)|答案(1)|浏览(176)

我尝试学习使用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')),
    );
  }
}

我希望它可以去扫描页面,如果扫描按钮得到点击。

mwngjboj

mwngjboj1#

首先,将路由器变量移出Stateless小部件的build方法。
接下来,将go方法替换为push,因为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),)
                ),
              )
            ],
          )
      ),
    );
  }
}

相关问题