📄Flutter & Nuvigator：路由器和参数的介绍

什么是nuvigator？

Nuvigator 是一个基于 Flutter 构建的导航包。它是由 Nubank 创建的一个包，旨在添加新功能，如深度链接，还支持嵌套路由，并且可以帮助模块化应用。查看更多信息

示例

在这个示例中，我们将使用 Flutter CLI 创建一个名为 nuvigatorexample 的应用：

lua 复制代码

flutter create nuvigatorexample

安装包

当前版本的 nuvigator 是 0.7.2，它不支持 null safety，尝试运行应用时会抛出错误，因此需要更改 SDK 版本。

在 pubspec.yaml 中，更改 SDK 版本：

makefile 复制代码

environment:
  sdk: ">=2.11.0 <3.0.0"

添加 nuvigator 到依赖项中：

yaml 复制代码

dependencies:
  flutter:
    sdk: flutter
  nuvigator: ^0.7.2

安装包：

arduino 复制代码

flutter pub get

构建应用

让我们使用 nuvigator 构建一个导航的示例。

第一个页面，Home，将有一个按钮，用于导航到第二个页面，Details。

我们的 home_screen.dart：

dart 复制代码

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  final Function onPressed;

  const HomeScreen({Key key, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
          child: ElevatedButton(
        onPressed: onPressed,
        child: const Text('Navigate to details'),
      )),
    );
  }
}

details_screen.dart：

dart 复制代码

import 'package:flutter/material.dart';

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({Key key}) : super(key: key);

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

main.dart：

dart 复制代码

import 'package:flutter/material.dart';
import 'package:nuvigator/next.dart';
import 'package:nuvigatorexample/screens/details_screen.dart';
import 'package:nuvigatorexample/screens/home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator.routes(initialRoute: 'home', routes: [
        NuRouteBuilder(path: 'home', builder: (BuildContext contextNuvigator, __, ___) => HomeScreen(onPressed: (){
          Nuvigator.of(contextNuvigator).open('details');
        },), screenType: materialScreenType),
        NuRouteBuilder(
            path: 'details', builder: (_, __, ___) => const DetailsScreen(), screenType: materialScreenType)
      ]),
    );
  }
}

使用路由器

在我们的 home_screen 中，我们将添加一个新类，该类将扩展 NuRoute：

dart 复制代码

import 'package:nuvigator/next.dart';

class HomeRouter extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return HomeScreen(onPressed: (){
      nuvigator.pushNamed('details');
    },);
  }

  @override
  String get path => 'home';

  @override
  ScreenType get screenType => materialScreenType;
}

我们也将为 details_screen 做同样的事情：

dart 复制代码

import 'package:nuvigator/next.dart';

class DetailsRoute extends NuRoute {
  @override
  Widget build(BuildContext context, NuRouteSettings<Object> settings) {
    return DetailsScreen();
  }

  @override
  String get path => 'details';

  @override
  ScreenType get screenType => materialScreenType;
}

现在我们在 main.dart 中创建我们的路由器，创建一个扩展 NuRouter 的新类，并更改 MaterialApp 的 home：

dart 复制代码

class Router extends NuRouter {
  @override
  String get initialRoute => 'home';

  @override
  List<NuRoute<NuRouter, Object, Object>> get registerRoutes => [
    HomeRouter(),
    DetailsRoute()
  ];
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Nuvigator(router: Router()),
    );
  }
}

向详情屏幕传递参数

现在，让我们向详情屏幕发送一条文本。

首先，我们在 pushNamed 函数中定义文本作为参数：

dart 复制代码

nuvigator.pushNamed('details', arguments: {'message': 'Hello world'});

然后，我们在详情屏幕中使用 nuvigator 设置的原始参数获取此参数。

在 DetailsRoute 的 build 方法中，让我们获取消息：

dart 复制代码

final String message = settings.rawParameters['message'];

然后在我们的 DetailsScreen 中，我们将添加一个名为 message 的新属性并使用它来渲染：

dart 复制代码

class DetailsScreen extends StatelessWidget {
  final String message; // 路由中的文本
  const DetailsScreen({Key key, this.message}) : super(key: key);

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

结果：

原文：www.yuque.com/fengjutian/... 《📄Flutter & Nuvigator：路由器和参数的介绍》