Flutter中设置路由器，以使导航调用更清晰、更简洁
2024-11-24 10:06:17
本教程将介绍如何在Flutter中设置路由器，以使导航调用更清晰、更简洁。
Flutter中的导航可以通过以下两种方式之一完成。命名路由，或通过实例化PageRoute并将其传递给Navigator来显式推送路由。推送路由可以变得非常明确，并且它们之间的共享逻辑变得困难。类似于检查用户是否已针对特定视图进行身份验证的逻辑。在这篇文章中，我们将为Flutter设置一个路由器，并允许您使用带参数的命名路由。
设置我们将创建两个视图来使用，您可以将它们全部添加到main.dart文件中。
classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:Scaffold(body:Home()));}}classHomeextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Text('Home')),);}}classFeedextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Text('Feed')),);}}路由器/路由设置MaterialApp为您提供了一个名为的属性onGenerateRoute，您可以在其中传入一个返回aRoute<dynamic>并接受的函数RouteSettings。这就是我们将要使用的。为了保持整洁，我们将创建一个Router类。在其中，我们将创建一个具有上述签名的静态函数。创建一个router.dart文件。
classRouter{Route<dynamic>generateRoute(RouteSettingssettings){}}设置包含请求路线的路线信息。它为我们提供了两个关键的东西。名称和参数。我们将使用名称来确定要返回的视图。将generate函数更新为如下所示。
staticRoute<dynamic>generateRoute(RouteSettingssettings){switch(settings.name){case'/':returnMaterialPageRoute(builder:(_)=>Home());case'/feed':returnMaterialPageRoute(builder:(_)=>Feed());default:returnMaterialPageRoute(builder:(_)=>Scaffold(body:Center(child:Text('Noroutedefinedfor${settings.name}')),));}}这意味着当名称等于“/”时，我们将显示家。当它是“/feed”时，我们将显示提要视图。为了避免在我们的代码中出现任何错误，我们将采用这些硬编码值（魔术值）并将它们放入一个可以在任何地方使用的constants.dart文件。
///ThisfilecontainsalltheroutingconstantsusedwithintheappconstStringhomeRoute='/';constStringfeedRoute='feed';更新switchcase语句以使用新变量
...switch(settings.name){casehomeRoute:returnMaterialPageRoute(builder:(_)=>Home());casefeedRoute:returnMaterialPageRoute(builder:(_)=>Feed());...现在在您的应用程序中，您将在其中定义MaterialApp，将generateRoute函数传递给onGenerateRoute。要将主视图定义为起始视图，我们将使用initialRoute代替将home属性设置为小部件。
classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(onGenerateRoute:Router.generateRoute,initialRoute:homeRoute,);}}导航现在，当您想要导航时，您只需使用
Navigator.pushNamed(context,feedRoute);这将导航到FeedView。如果我们想将参数传递给Feed视图，那只是一个小小的改动。让我们的Feed视图接受一个字符串作为参数。
classFeedextendsStatelessWidget{finalStringdata;Feed(this.data);@overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Center(child:Text('Feed:$data')),);}}将浮动操作按钮添加到您的homeView和onPressed，我们将推送提要视图并传入一些字符串数据作为参数。
classHomeextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnScaffold(floatingActionButton:FloatingActionButton(onPressed:(){Navigator.pushNamed(context,feedRoute,arguments:'Datafromhome');},),body:Center(child:Text('Home')),);}}现在在我们的路由器中，我们必须从设置中的参数属性中获取这些数据并将其传递给我们的Feed。
casefeedRoute:vardata=settings.argumentsasString;returnMaterialPageRoute(builder:(_)=>Feed(data));如果您点击HomeView上的浮动操作按钮，您将导航到Feed并看到数据在那里。您可以在参数中传递任何值。只需确保您转换为您想要的类型并将其传递给您的视图。复杂的对象，甚至其他小部件?
热门标签
