Flutter普通路由跳转页面及传值

最近由于公司业务要求在学Flutter&Dart开发APP，开始想学webview开发Android但是还需要开发ios版本的于是找到了这项新技术，正好这两天学到路由器这部分，感觉需要记录一下，其他的以后陆续更（包括环境搭建，项目创建等）

首先看一下目录结构这里我只截了需要的几个页面部分

首先是main.dart，这个是项目的入口文件，相当于初始化文件

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';   //因为需要Tab.dart中的HomeContent方法，所以要引入对应文件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //HomeContent方法定义在下面，实现页面底部的tab切换栏
      home: HomeContent(),
    );
  }
}

//这里面是Tab.dart
import 'package:flutter/material.dart';

//此处不多说了，都是引入相关文件
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
import 'tabs/MySelf.dart';

class HomeContent extends StatefulWidget {
  HomeContent({Key key}) : super(key : key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomeContent> {
  int _currentIndex = 0;
  //定义一个数组，切换页面用
  List _pageList = [
    HomePage(),
    SettingPage(),
    CategoryPage(),
    MyselfPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (int index){
          setState(() {
            this._currentIndex = index;   //此处实现页面跳转，根据pageList的索引值跳转到对应页面
          });
        },
        iconSize: 45.0,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              title: Text("我")
          )
        ],
      ),
    );
  }
}

下面就是路由部分了，先来实现在首页点击按钮跳转到搜索页面，这里需要Home.dart和Search.dart两个文件，下面上代码

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

import '../Search.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("首页"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("跳转到搜索页面"),
              onPressed: () {
                //普通路由跳转
                Navigator.of(context).push(
                    MaterialPageRoute(
                        builder: (context) => SearchPage()   //此处监听按钮跳转，未传值
                    )
                );
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          ),
          SizedBox(height: 20),
        ],
      )
    );
  }
}

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

class SearchPage extends StatelessWidget {
  const SearchPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("搜索页面"),
      ) ,
      body: Text("搜索页面内容区域"),
    );
  }
}

接下来实现跳转页面并且传值，这次换个页面跳转，省得在一个页面上改代码初学者会懵，要实现在设置页面点击按钮跳转令一个页面，并且改变新跳转页面的标题，下面上代码（这里需要Setting.dart和Settings.dart两个文件）

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

import '../Settings.dart';

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);
  _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("设置"),
      ) ,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              child: Text("跳转到设置页面"),
              onPressed: () {
                //普通路由跳转并传值
                Navigator.of(context).push(
                    MaterialPageRoute(
                        builder: (context) => SettingsPage(title : "呵呵")   //此处意思是把呵呵传递给下一个页面，下一个页面title就是呵呵
                    )
                );
              },
              color: Theme.of(context).accentColor,
              textTheme: ButtonTextTheme.primary
          ),
          SizedBox(height: 20),
        ],
      )
    );
  }
}

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

class SettingsPage extends StatelessWidget {

  //和java一样，前面页面传值，该页面就得有相应变量来接他
  String title;
  //默认标题名是哈哈，如果我们在前一个页面不传值（像Home直接跳转）的话，该页面的标题是哈哈
  SettingsPage({this.title="哈哈"});

  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        //用this来调用title变量
        title: Text(this.title),
      ) ,
      body: Text("这里设置相关内容"),
    );
  }
}

下一篇实现用命名路由的方式跳转页面和传值~初学flutter，有不对的地方请指出~