Flutter开发（十七）—— 路由

Flutter中多页面开发，主要涉及：Route 和 Navigator。路由（Route）是应用程序的“屏幕”或“页面”的抽象，导航器（Navigator）是管理路由的控件。导航器（Navigator）可以推送（push）和弹出（pop）路由来帮助用户从当前屏幕移动到另一个屏幕。

演示代码：
跳转其他页面(方案一)：

              onPressed: () {
                //跳转FristPage() 页面
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) => FristPage(
                        title: 'Frist',
                      ),
                ));
              },

跳转其他页面(方案二)：
1、先在routes中定义路由名称，对应跳转的页面：

routes: {
        '/': (context) => NavigatorTest(), // '/'路由  对应页面NavigatorTest
        //  '/frist'路由  对应页面 FristPage
        '/frist': (context) => FristPage(
              title: 'routes'.toUpperCase(),
            )
      },

2、处理点击事件，使用Navigator.pushNamed 进行跳转：

   onPressed: () {
     Navigator.pushNamed(context, '/frist');
   },

下面是完整的调转代码，其中补充了FloatingActionButton的一些属性的介绍：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // home: NavigatorTest(), //App启动显示的第一个页面（根路由）
      initialRoute: '/', //使用带名称的路由，指定跟路由
      routes: {
        '/': (context) => NavigatorTest(), // '/'路由  对应页面NavigatorTest

        //  '/frist'路由  对应页面 FristPage
        '/frist': (context) => FristPage(
              title: 'routes'.toUpperCase(),
            )
      },

      theme: ThemeData(primaryColor: Colors.deepPurple),
    );
  }
}

//定义页面 NavigatorTest
class NavigatorTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'RedKeyset',
          style: TextStyle(fontSize: 25, color: Colors.deepOrange),
        ),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Frist'),
              onPressed: () {
                // Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)=>FristPage(title: 'Frist',),));

                // 使用带名称路由  跳转指定路由，对应 routes中 '/frist': (context) => FristPage()
                Navigator.pushNamed(context, '/frist');
              },
            ),
            SizedBox(
              width: 10.0,
            ),
            FlatButton(
              child: Text('Second'),
              onPressed: null,
            )
          ],
        ),
      ),
    );
  }
}

//点击Frist打开FristPage页面
class FristPage extends StatelessWidget {
  final String title;

  //构造方法
  FristPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0.0,
      ),
      body: Center(
        child: Text(title + "详情页"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.home), //设置内容
        foregroundColor: Colors.white, //Icon的颜色
        backgroundColor: Colors.deepPurple, //FloatingActionButton背景颜色
        //onPressed 设置点击事件
        onPressed: () {
          Navigator.pop(context); //返回上一个路由（页面）
        },
      ),
    );
  }
}

演示效果：
代码中TitleBar返回按钮的返回功能是系统默认的，FloatingActionButton的返回功能是自定义。