Flutter auto_route v6导航问题

Question

我正在创建一个基本的应用程序来了解auto_route库的工作原理，但简单的导航不起作用。我不确定下面的设置是否有任何问题。这是我得到的错误

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: 
Looks like you're trying to navigate to a nested route without adding their parent to stack first
try navigating to Home -> Page1
#0      RoutingController._matchOrReportFailure (package:auto_route/src/router/controller/routing_controller.dart:205:9)
#1      StackRouter._push (package:auto_route/src/router/controller/routing_controller.dart:1031:17)
#2      StackRouter.push (package:auto_route/src/router/controller/routing_controller.dart:978:35)
#3      HomeScreen.build.<anonymous closure> (package:auto_route_practice/home.dart:19:32)
#4      _InkResponseState.handleTap (package:flutter/src/material/ink_well.dart:1096:21)
#5      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:253:24)
#6      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:627:11)
#7      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:306:5)
#8      BaseTapGestureRecognizer.handlePrimaryPointe<…>

这是app_router.dart 的代码

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_practice/empty_route_widget.dart';
import 'package:auto_route_practice/home.dart';
import 'package:auto_route_practice/page_1.dart';
import 'package:auto_route_practice/page_2.dart';
import 'package:flutter/material.dart';
part 'app_router.gr.dart';
AppRouter autoRouter = AppRouter();
@AutoRouterConfig(replaceInRouteName: "Route")
class AppRouter extends _$AppRouter {
@override
final List<AutoRoute> routes = [
AutoRoute(
page: Home.page,
path: "/",
children: [
// RedirectRoute(path: '', redirectTo: "page1"),
AutoRoute(page: Page1.page, path: "page1"),
],
),
];
}

这是我的主要艺术文件

import 'package:auto_route_practice/app_router.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
routerConfig: autoRouter.config(navigatorObservers: () {
return [AppObserver()];
}),
);
}
}

这是我的主页，我正试图从这里浏览

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_practice/app_router.dart';
import 'package:flutter/material.dart';
@RoutePage(name: 'home')
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("HomeScreen"),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
context.router.navigate(const Page1());
},
child: const Text("page 1")),
],
),
);
}
}

Answer 1

您正在routes.dart文件中使用children的属性。因此，您还必须设置一个EmptyRouter，以便可以定义路由的范围。

将此代码添加到routes.dart文件下面，如下所示：

@RoutePage(name: 'EmptyRouter')      
class EmptyRouterPage extends AutoRouter {} 

你可以尝试添加这样的路由器配置：

@AutoRouterConfig(replaceInRouteName: "Route")
class AppRouter extends _$AppRouter {
@override
final List<AutoRoute> routes = [
AutoRoute(
page: Home.page,
path: "/",
children: [
page: EmptyRouter.page,
path: '',
children: [
AutoRoute(page: Page1.page, path: "page1"),
],
],
),
];
}

现在，您可以尝试导航到如下页面：

@RoutePage(name: 'home')
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("HomeScreen"),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
context.router.navigate(const EmptyRouter());
},
child: const Text("page 1")),
],
),
);
}
}