Flutter 组件之基本路由、命名路由定义传参应用

拼搏现实的明天。 2023-07-17 06:08 28阅读 0赞

##### 基本路由 #####

> 语法：  
> `Navigator.of(context).push(`
> 
> > `MaterialPageRoute(builder: (context)=>路由页面类`
> 
> `);`

import 'package:flutter/material.dart';
    import 'Search.dart';//引入需要跳转的页面
    
    class HomePage extends StatefulWidget { 
      HomePage({ Key key}) : super(key: key);
    
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> { 
      @override
      Widget build(BuildContext context) { 
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(onPressed: (){ //点击按钮跳转
                 Navigator.of(context).push(//路由方法
                   MaterialPageRoute(builder: (context)=>SearchPage())//这里填写路由页面就可以了
                 );
            },child: Text("基本路由跳转到Search页面"),),
          ],
        );
      }
    }

##### 命名路由 #####

> 下面以模块化定义不同的功能. 。项目中也是这样使用, 命名路由在官方的基础上进行改进封装

一、入口文件 `main.dart`

import 'package:flutter/material.dart';
    
    import 'routes/Routes.dart';//路由模块导入
    
    void main() { 
      runApp(LearnFulWidget());
    }
    
    class LearnFulWidget extends StatelessWidget { 
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: MaterialApp(
    // home: HomePageSet(),
            initialRoute: "/",//初始路由属性 在路由配置文件定义为斜杠
            //命名路由传参
            // ignore: missing_return
            onGenerateRoute:onGenerateRoute,//命名路由属性
          ),
        );
      }
    }

二、路由模块 `Routes.dart`

import 'package:flutter/material.dart';
    //导入所有的路由页面
    import '../pages/Search.dart';
    import '../pages/Form.dart';
    import '../pages/MyNewPage.dart';
    import '../pages/Tabs.dart';
    
    //配置路由
    final routes = { 
    	//初始化路由页面不一定是斜杠 取决于在入口文件怎么定的的
      "/": (context,) => HomePageSet(),
      //可选参数定义 一 二 三
      "/Search": (context, { arguments}) => SearchPage(arguments: arguments),
      //不需要传参的默认定义方式
      '/Form': (context,) => FormPage(),
      "/NewPage": (context, { arguments}) => NewPage(arguments: arguments),
    };
    
    //可以把下面当做固定写法,官方命名路由的改进
    // ignore: missing_return, top_level_function_literal_block
    var onGenerateRoute = (RouteSettings settings) { 
      final String name = settings.name;
      final Function pageContentBuilder = 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;
        }
      }
    };

三、页面传参 `HomePage.dart`

> 语法：  
> `Navigator.pushNamed(`
> 
> > `context, "页面/NewPage",arguments: {"param":"参数值"}`
> 
> `);`

import 'package:flutter/material.dart';
    import 'Search.dart';//页面导入
    import 'MyNewPage.dart';//页面导入
    
    
    class HomePage extends StatefulWidget { 
      HomePage({ Key key}) : super(key: key);
    
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> { 
      @override
      Widget build(BuildContext context) { 
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(onPressed: (){ 
                // 命名路由传参 传参格式
                Navigator.pushNamed(context, "/NewPage",arguments: { "param":"我是NewPage无状态组件参数"});
            },child: Text("带参数跳转到NewPage页面无状态组件中"),),
            RaisedButton(onPressed: (){ 
              Navigator.pushNamed(context, "/Search",arguments: { "ids":"我是有状态组件参数"});
            },child: Text("带参数跳转到Search有状态组件中"),),
            SizedBox(height: 20,),
            RaisedButton(onPressed: (){ 
            },child: Text("跳转到表单"),)
          ],
        );
      }
    }

四、接收参数

`Search.dart` 有状态组件

import 'package:flutter/material.dart';
    
    class SearchPage extends StatefulWidget { 
      final Map arguments;//定义参数映射对象 final 常量
    									//可选参数定义
      SearchPage({ Key key, String list, this.arguments}) : super(key: key);
    
      @override
      //这里多一步要通过数据状态方法传递给组件
      _SearchPageState createState() => _SearchPageState(arguments:this.arguments);
    }
    
    class _SearchPageState extends State<SearchPage> { 
      Map arguments; //组件内定义接收值
      _SearchPageState({ this.arguments});//构造函数接收可选参数
    
      @override
      Widget build(BuildContext context) { 
        print(arguments);
        return Container(
          child: Scaffold(
            floatingActionButton: FloatingActionButton(
              child: Text("返回"),
              onPressed: () { 
                Navigator.of(context).pop();
              },
            ),
            appBar: AppBar(
              title: Text("我是内容search标题"),
            ),
            body: Container(
                child: Column(
              children: <Widget>[
                Center(
                    child: Text(//直接调用打印
                        "我是argumentsid:${arguments != null ? arguments['id'] :"没有id"},我是ids:${arguments != null ? arguments['ids'] : "arguments为空"}")),
                RaisedButton(
                  onPressed: () { 
                    Navigator.pushNamed(context, "/Form");
                  },
                  child: Text("跳转到Form"),
                )
              ],
            )),
          ),
        );
      }
    }

`MyNewPage.dart` 无状态组件  
这个相对简单一些

import 'package:flutter/material.dart';
    
    // ignore: must_be_immutable
    class NewPage extends StatelessWidget { 
      final arguments;//定义常量
    
      NewPage({ this.arguments});//构造函数接收可选参数
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Scaffold(
            floatingActionButton: FloatingActionButton(
              child: Text("返回"),
              onPressed: () { 
                Navigator.of(context).pop();
              },
            ),
            appBar: AppBar(
              title: Text("我是内容search标题"),
            ),
            body: Container(
                child: Column(
              children: <Widget>[
                Center(
                    child: Text(//调用参数
                        "我是arguments：：：${arguments != null ? arguments['param'] : 11111}")),
                RaisedButton(
                  onPressed: () { 
                    Navigator.pushNamed(context, "/Form");
                  },
                  child: Text("跳转到Form"),
                )
              ],
            )),
          ),
        );
      }
    }