Flutter auto_route v6导航问题

vom3gejh  于 2023-04-07  发布在  Flutter
关注(0)|答案(1)|浏览(127)

我正在创建一个基本的应用程序,以了解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"),
      ],
    ),
  ];
}

这是我主.dart文件

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

lp0sw83n1#

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

相关问题