前端入门Flutter--14 路由 基本路由 基本路由跳转传值

　 人生醉酒不相逢，趋吉避凶，做好分内之事即可：

　 作为前端开发，终于学到了一个与前端有一样名称的东西了，那就是路由，话不多说，直接上代码：（路由涉及较多页面，耐心看完容易一步成神喔）

　　目录如下：

　　

　　main.dart:

　　

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';

/*
Flutter中的普通路由、普通路由传值、命名路由、命名路由传值
Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航。
并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop
Flutter 中给我们提供了两种配置路由跳转的方式；1.基本路由。2.命名路由
*/
void main (){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Tabs(),
    );
  }
}

　　Tabs.dart

import 'package:flutter/material.dart';

import 'tabs/Home.dart';

import 'tabs/Category.dart';
import 'tabs/Setting.dart';

class Tabs extends StatefulWidget{
  Tabs({Key key}) : super(key: key);
  _TabsState createState()=>_TabsState();
}
class _TabsState extends State<Tabs>{
  int _currentIndex = 0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage()
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Demo"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap:(int index){
        //    print(index);
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.red,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
          BottomNavigationBarItem(icon: Icon(Icons.category),title: Text('分类')),
          BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('设置'))
        ],
      ),
      body: this._pageList[this._currentIndex],
    );
  }
}

　　先看一下具体效果吧：

　　

　　Home.dart:

　　

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

class HomePage extends StatelessWidget{
  const HomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text('跳转到搜索页面'),
            onPressed:() {
            //  页面跳转
              Navigator.of(context).push(
               MaterialPageRoute(
                 builder: (context)=>SearchPage()
               )
              );
            },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary
        ),
        RaisedButton(
          child: Text('跳转到表单页面并传值'),
    onPressed: (){

    },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        )
      ],
    );
  }
}

　　Category.dart:

　

import 'package:flutter/material.dart';
import '../Form.dart';
class  CategoryPage extends StatelessWidget{
  const CategoryPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("跳转到表单页面并传值"),
           onPressed:(){
              Navigator.of(context).push(
                MaterialPageRoute (
                  builder:(context)=>FormPage(title:'我是跳转值')
                )
              );
           },
          color: Theme.of(context).accentColor,
          textTheme: ButtonTextTheme.primary,
        ),
      ],
    );
  }
}

　　Setting.dart:

import 'package:flutter/material.dart';

class SettingPage extends StatelessWidget{
  const SettingPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Text('设置'),
    );
  }
}

以上其实已近完成了切换，如下图：

          

接下来是路由跳转传值：

Form.dart:

import 'package:flutter/material.dart';
class FormPage extends StatelessWidget{

  String title;
  //FormPage(this.title);表示必填
  FormPage({this.title="表单"});//表示选填

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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('我是表单页面'),
          ),
        ],
      ),
    );
  }
}

Search.dart

import 'package:flutter/material.dart';

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

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('我是搜索页面'),
      ),
      body:Text('我是搜索页面内容区域'),
    );
  }
}

最终部分效果图：

             

 到此完结：其中使用到了一些小组件可以到官网或百度一下，其实很简单的！