Flutter 中设置路由器，以使导航调用更清晰、更简洁

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 本文同时参与 「掘力星计划」   ，赢取创作大礼包，挑战创作激励金

本文主要介绍 Flutter 中设置路由器，以使导航调用更清晰、更简洁

本教程将介绍如何在 Flutter 中设置路由器，以使导航调用更清晰、更简洁

Flutter 中的导航可以通过以下两种方式之一完成。命名路由，或通过实例化 PageRoute 并将其传递给 Navigator 来显式推送路由。推送路由可以变得非常明确，并且它们之间的共享逻辑变得困难。类似于检查用户是否已针对特定视图进行身份验证的逻辑。在这篇文章中，我们将为 Flutter 设置一个路由器，并允许您使用带参数的命名路由。

设置

我们将创建两个视图来使用，您可以将它们全部添加到 main.dart 文件中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Home()));
  }
}
​
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Home')),
    );
  }
}
​
class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Feed')),
    );
  }
}

路由器/路由设置

MaterialApp 为您提供了一个名为的属性onGenerateRoute，您可以在其中传入一个返回 aRoute<dynamic>并接受的函数RouteSettings。这就是我们将要使用的。为了保持整洁，我们将创建一个 Router 类。在其中，我们将创建一个具有上述签名的静态函数。创建一个 router.dart 文件。

class Router {
  Route<dynamic> generateRoute(RouteSettings settings) {
    
  }
}

设置包含请求路线的路线信息。它为我们提供了两个关键的东西。名称和参数。我们将使用名称来确定要返回的视图。将 generate 函数更新为如下所示。

 static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => Home());
      case '/feed':
        return MaterialPageRoute(builder: (_) => Feed());
      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                      child: Text('No route defined for ${settings.name}')),
                ));
    }
  }

这意味着当名称等于“/”时，我们将显示家。当它是“/feed”时，我们将显示提要视图。为了避免在我们的代码中出现任何错误，我们将采用这些硬编码值（魔术值）并将它们放入一个可以在任何地方使用的 constants.dart 文件。

/// This file contains all the routing constants used within the app
​
const String homeRoute = '/';
const String feedRoute = 'feed';

更新 switch case 语句以使用新变量

...
    switch (settings.name) {
      case homeRoute:
        return MaterialPageRoute(builder: (_) => Home());
      case feedRoute:
        return MaterialPageRoute(builder: (_) => Feed());
...

现在在您的应用程序中，您将在其中定义 MaterialApp，将 generateRoute 函数传递给 onGenerateRoute。要将主视图定义为起始视图，我们将使用 initialRoute 代替将 home 属性设置为小部件。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: Router.generateRoute,
      initialRoute: homeRoute,
    );
  }
}

导航

现在，当您想要导航时，您只需使用

Navigator.pushNamed(context, feedRoute);

这将导航到 FeedView。如果我们想将参数传递给 Feed 视图，那只是一个小小的改动。让我们的 Feed 视图接受一个字符串作为参数。

class Feed extends StatelessWidget {
​
  final String data;
​
  Feed(this.data);
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Feed: $data')),
    );
  }
}

将浮动操作按钮添加到您的 homeView 和 onPressed，我们将推送提要视图并传入一些字符串数据作为参数。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(onPressed: (){
        Navigator.pushNamed(context, feedRoute, arguments: 'Data from home');
      },),
      body: Center(child: Text('Home')),
    );
  }
}

现在在我们的路由器中，我们必须从设置中的参数属性中获取这些数据并将其传递给我们的 Feed。

 case feedRoute:
    var data = settings.arguments as String;
    return MaterialPageRoute(builder: (_) => Feed(data));

如果您点击 HomeView 上的浮动操作按钮，您将导航到 Feed 并看到数据在那里。您可以在参数中传递任何值。只需确保您转换为您想要的类型并将其传递给您的视图。复杂的对象，甚至其他小部件 😉