Flutter中的基本路由使用

Flutter 中通过 Navigator 组件管理路由导航，并提供了管理堆栈的方法。

常用的方法如下：

1. Navigator.push 跳转到指定页面；

2. Navigator.pop 返回上一级页面；

跳转代码示例：

import "package:flutter/material.dart";
// 引入要跳转到的子页面
import '../Form.dart';

// 定义一个有状态组件
class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
        return Column(
            // 主轴对齐式式
            mainAxisAlignment:MainAxisAlignment.center,
            // 交叉轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.center,
            children:<Widget>[
                RaisedButton(
                    child: Text("跳转到表单页面并传值"),
                    // 点击事件
                    onPressed: () {
                        // 路由约定俗成的写法，返回要跳转到的组件即可；
                        Navigator.of(context).push(
                            // 在FormPage()里传入参数
                            MaterialPageRoute(builder: (context)=>FormPage(title:'我是跳转传值的页面'))
                        );
                    },
                    color: Theme.of(context).accentColor,
                    textTheme: ButtonTextTheme.primary
                )
            ]
        );
    }
}

效果图如下：

要跳转到的子页面FormPage，并接受参数。

import 'package:flutter/material.dart';

// 表单子页面
class FormPage extends StatelessWidget {
    String title;
    // 在构造函数里接受其他页面的传参
    FormPage({this.title="表单"});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            // 浮动按钮
            floatingActionButton: FloatingActionButton(
                child: Text('返回'),
                // 点击事件
                onPressed: (){
                    // 自定义返回上一级页面
                    Navigator.of(context).pop();
                },
            ),
            appBar: AppBar(
                title:Text(this.title)
            ),
            body: ListView(
                children: <Widget>[
                    ListTile(
                        title:Text('这是表单页面')
                    ),
                    ListTile(
                        title:Text('这是表单页面')
                    ),
                    ListTile(
                        title:Text('这是表单页面')
                    ),
                    ListTile(
                        title:Text('这是表单页面')
                    )
                ]
            ),
        );
    }
}

效果图如下：

页面跳转时，手机顶部导航条是有默认的返回按钮的，如果想自定义返回上一级页面，可以通过 Navigator.of(context).pop() 来返回上一级页面，详见上面子页面的代码。