时间戳

首页 > 解决方案 > Flutter中如何设置WidgetsApp的属性pageRouteBuilder

flutter - Flutter中如何设置WidgetsApp的属性pageRouteBuilder

问题描述

我试图了解 Flutter 中的导航如何在基本级别上工作，超越 Material design 便利小部件，以实现非标准导航方案。

我一直在使用此处答案中的代码，并将该代码中的构建方法编辑为如下，将routesandpageRouteBuilder属性设置为非空。

@override
 Widget build(BuildContext context) {
   return new WidgetsApp(
       onGenerateRoute: generate,
       pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) {
         return MaterialPageRoute(builder: (context) => Container(color: Colors.blue,));
         },
       onUnknownRoute: unKnownRoute,
       textStyle: const TextStyle(),
       initialRoute: "/",
       routes: <String, WidgetBuilder> {
         '/test': (BuildContext context) => Container(
           child: Text('test'), 
           color: Colors.green,
         ),
       },
       color: Colors.red);
 }

这会引发错误

错误：无法将参数类型“MaterialPageRoute Function(RouteSettings, Widget Function(BuildContext))”分配给参数类型“PageRoute Function(RouteSettings, Widget Function(BuildContext))”

（我最初用PageRoute小部件代替了MaterialPageRoute小部件，但后来也收到无法实例化抽象类的错误，所以为了方便而切换到MaterialPageRoute*，想象它是PageRoute的一个实现。

*而不是为这个玩具示例编写新的 PageRoute 实现。）

我不知道如何解决这个问题，据我所知，参数和参数类型是等效的，我找不到任何关于如何pageRouteBuilder在线设置属性的示例。非常感谢您解释为什么会发生此错误或修复此玩具示例。

标签： flutterdartflutter-navigation

解决方案

在四处material/app.dart寻找如何pageRouteBuilder设置之后（如果使用Android Studio，在任何地方写MaterialApp（），一旦出现下划线，悬停并按Ctrl +单击，然后在打开的文件中搜索'pageRouteBuilder'），我发现这可以被固定

 @override
  Widget build(BuildContext context) {
    final MaterialPageRoute test = MaterialPageRoute<int>(builder: (context) {
      return Container();
    });

    return new WidgetsApp(
        onGenerateRoute: generate,
        pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) {
          return MaterialPageRoute(builder: builder, settings: settings);
        },
        onUnknownRoute: unKnownRoute,
        textStyle: const TextStyle(),
        initialRoute: "/",
        routes: <String, WidgetBuilder>{
          '/test': (BuildContext context) => Container(
                child: Text('test'),
                color: Colors.green,
              ),
        },
        color: Colors.red);
  }

如果将来我知道为什么<T>在这种情况下有意义，我将在此处对其进行编辑并进行尽可能多的解释。

推荐阅读