Futter基础第8篇： 实现页面跳转、跳转传值（普通路由、普通路由传值）

效果图：

Home.dart

Search.dart

Category.dart

Form.dart

底部导航基本框架在：flutter实现底部导航

好的，做好准备工作，我们就开始进入正轨，开始实现页面跳转

Home.dart

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

class HomePage extends StatefulWidget {
  @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(
            child: Text('跳转到搜索页面'),
            onPressed: (){    //监听器
              //路由跳转
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context)=>SearchPage()
                )
              );
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary,
          ),
          SizedBox(height: 20,),
        ],
    );
  }
}

Category.dart

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 Column(
      crossAxisAlignment: CrossAxisAlignment.start, //次轴居左
      mainAxisAlignment: MainAxisAlignment.center,  //主轴居中
      children: <Widget>[
        RaisedButton(
          child: Text('跳转到表单页面'),
          onPressed: () {   //监听器
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>FormPage(title: '我是跳转传值',)
                /**
                 * 相当于：builder:(context){
                 *  return FormPage();
                 * }
                 */
              )
            );
          },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        )
      ],
    );
  }
}

在lib→pages目录下新建这两个文件：

Search.dart

import 'package:flutter/material.dart';


class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索页面'),
      ),
      body: Text('搜索页面内容区域'),
    );
  }
}

Form.dart

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('我是表单页面'),
          ),
        ],
      ),
    );
  }
}