无法使用页面路由在颤振应用程序上加载另一个屏幕

Question

我正在尝试创建一个 flutter 应用程序，并且正在尝试测试路由方法以将我的主页链接到不同的屏幕。

我的初始屏幕上有一个按钮应该打开另一个页面，但由于某种原因该页面似乎没有打开。

我遇到的错误是这样的：

════════手势捕获异常════════════════════════════════════════════════ ═════

在 _WidgetsAppState 中找不到路由 RouteSettings("/about", null) 的生成器。 ══════════════════════════════════════════════════ ══════════════════════════════

这是我的 route.dart 文件：

import 'package:quizapp/about/about.dart';
import 'package:quizapp/home/home.dart';
import 'package:quizapp/login/login.dart';
import 'package:quizapp/topic/topic.dart';
import 'package:quizapp/profile/profile.dart';

var appRoutes = {
  '/': (context) => const HomeScreen(),
  'about': (context) => const AboutScreen(),
  'login': (context) => const LoginScreen(),
  'topic': (context) => const TopicScreen(),
  'profile': (context) => const ProfileScreen()
};

这是我的 main.dart 文件：

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';
import 'package:quizapp/routes.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {

  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return const Text('error');
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          print('Success');
          return MaterialApp(
            routes: appRoutes,
          );
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return const Text('Error');
      },
    );
  }
}

这是 home.dart 文件：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: ElevatedButton(
        onPressed: () => Navigator.pushNamed(context, '/about'),
        child: const Text('About Page'),
      ),
    );
  }
}

And the about.dart file:
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About Screen'),
      ),
      body: const Center(
          child: SizedBox(
        child: Text('About Content'),
      )),
    );
  }
}

小部件树布局供参考。

任何输入/帮助将不胜感激，谢谢。

Answer 1

你给了错误的“关于”路线名称

onPressed: () => Navigator.pushNamed(context, '/about'),

var appRoutes = {
'/': (context) => const HomeScreen(),
'about': (context) => const AboutScreen(),-------> change to '/about'
'login': (context) => const LoginScreen(),
'topic': (context) => const TopicScreen(),
'profile': (context) => const ProfileScreen()
};

Answer 2

您传递给Navigator.pushNamed的路由名称与定义的路由不匹配，因为它有一个额外的斜杠，因此您必须更改

onPressed: () => Navigator.pushNamed(context, '/about'),

到

onPressed: () => Navigator.pushNamed(context, 'about'),

把根名作为变量就好了，因为你会在很多地方用到，这种错误经常发生。 因此，创建一个新文件并将所有路由名称放在那里。 例如，

const String routeToHome = '/';
const String routeToAbout = 'about';
const String routeToProfile = 'profile';
const String routeToLogin = 'login';
const String routeToTopic = 'topic';

然后，将您的appRoutes更改为

var appRoutes = {
  routeToHome: (context) => const HomeScreen(),
  routeToAbout: (context) => const AboutScreen(),
  routeToLogin: (context) => const LoginScreen(),
  routeToTopic: (context) => const TopicScreen(),
  routeToProfile: (context) => const ProfileScreen()
};

和onPressed功能

onPressed: () => Navigator.pushNamed(context, routeToAbout),