Flutter路由总结1

命名路由（基于routes）

Flutter路由的管理，依我个人理解，其实有两种方法。一种是通过MaterialApp组件的routes属性来管理。另一种是通过MaterialApp组件的onGenerateRoute属性来管理。
实质上，onGenerateRoute是对routes的一种补充。onGenerateRoute属性需要接受一个路由回调函数。当通过 Navigator.pushNamed跳转路由时，在routes 查找不到时，就会触发该回调函数。

以下我们主要讲解了路由管理的第一种方法，即基于routes属性来实现，而不借助onGenerateRoute属性。

1. 不传值的命名路由

1. 构建出需要跳转到的目标页面FormPage()

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表单页面"),
      ),
      body: Container(
      	child: Text("表单内容"),
	  ),
    );
  }
}

2. 需要在MaterialApp组件的routes属性中指定路由的名称与走向：
通过名称为“/form”的路由，跳转至FormPage()页面。

MaterialApp(
  routes: {
    "/form":(context) => FormPage(),
  },
);

3. 从源页面中，触发路由，以跳转至目标页面：比如在源页面中添加一个按钮，按下按钮后跳转至FormPage()页面。

RaisedButton(
  onPressed: () {
    Navigator.pushNamed(context, "/form");//跳转的关键代码
  },
),

4. 如果需要从目标页面返回至源页面，可以在目标页面中添加一个按钮，按下按钮后跳转至源页面。如下面代码中的floatingActionButton

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表单页面"),
      ),
      body: Container(
      	child: Text("表单内容"),
	  ),
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: () {
          Navigator.of(context).pop();//返回的关键代码
        },
      ),
    );
  }
}

2. 传值的命名路由

在不借助onGenerateRoute属性的情况下，对于源页面传来的参数，需要通过ModalRoute.of(context).settings.arguments来接收。

2.1 通过Navigator.pushNamed传值

1. 通过Navigator.pushNamed来传递参数：

import 'package:flutter/material.dart';

class SourcePage extends StatefulWidget {
  @override
  _SourcePage State createState() => _SourcePageState();
}

class _SourcePage State extends State<SourcePage > {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("商品页面"),
      ),
      body: 
       RaisedButton(
         child: Text("跳转到商品详情"),
         onPressed: () {
           Navigator.pushNamed(//传参
             context,
             "/productinfo",
             arguments: {"pid": 456},
           );
         },
       ),
    );
  }
}

2. 通过ModalRoute.of(context).settings.arguments来接收参数：

class DestinationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context).settings.arguments;//接收参数
    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

2.2 通过构造方法传值

1. 构建一个接收指定参数的构造函数，路由请求的时候，调用该构造函数来生成页面，顺便可以接收参数:

class FormPage extends StatelessWidget {
  final String argu;
  FormPage({this.argu:"表单"});//执行构造函数的时候，顺便可以接收argu参数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.argu),//接收到argu参数后，即可在页面中使用
      ),
      body: RaisedButton(
        color: Colors.blue,
        child: Text(this.argu),//接收到argu参数后，即可在页面中使用
        onPressed: () {},
      ),
    );
  }
}

2. 通过Navigator.push/pushNamed传值:

import 'package:flutter/material.dart';
import '../Form.dart';

class CategoryPage extends StatefulWidget {
  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("跳转到搜索页面"),
      onPressed: () {
        Navigator.of(context).push(
          MaterialPageRoute(
          //路由请求FormPage的时候，执行FormPage构造函数，顺便传入参数
            builder: (context) => FormPage(argu: "我是跳转传值",),)
        );
      },
    ),
  }
}