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

基本路由

语法：
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"),
            )
          ],
        )),
      ),
    );
  }
}