Flutter:使用onGenerateRoute传递参数

5,273 阅读1分钟
  • 在根组件的MaterialApp中设定onGenerateRoute参数 main.dart代码
  • onGenerateRoute会监听路由的变化
    import 'package:flutter/material.dart';
    import 'search.dart';
    import 'home.dart';
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      final routes = {
        '/search':(context,{arguments})=>SearchPage(arguments:arguments),
      };
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home:HomePage(),
          //传入当前路由对象
          onGenerateRoute: (settings) {
    		//把路由对象的name用变量保存
            final String name = settings.name;
    		//保存路由对象对于的方法
            final Function pageContentBuilder = this.routes[name];
            //如果方法不为空
            if(pageContentBuilder != null){
    			//如果有参数
              if(settings.arguments != null){
                final Route route = MaterialPageRoute(
                  builder: (context)=>pageContentBuilder(context,arguments:settings.arguments)
    
                );
                //放回路由组件对象
                return route;
              }else{
                final Route route = MaterialPageRoute(
                  builder: (context)=>pageContentBuilder(context)
    
                );
                return route;
              }
            }
          },
        );
      }
    }
    
  • home.dart代码
    import 'package:flutter/material.dart';
    
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("hello flutter"),
              centerTitle: true,
            ),
            body: Center(
              child: RaisedButton(
                      child: Text("点击跳转到search页面"),
                      onPressed: (){
                      //需要传递的参数放入arguments里面
                        Navigator.pushNamed(context,'/search',arguments: {
                          "id":123
                        });
    
                      },
                    ),
            ),
          );
      }
    }
    
  • search.dart代码
    import 'package:flutter/material.dart';
    
      class SearchPage extends StatelessWidget {
        final arguments;
        SearchPage({this.arguments});
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: Text("Search页面"),
              centerTitle: true,
            ),
            body: Center(
              child: Text("Search页面${arguments != null ? arguments['id']:'0'} ")
            ),
    
          );
        }
      }