Flutter中的普通路由&普通路由传值和命名路由&命名路由传值、返回根目录

在Flutter中 我们通过Navigator组件来管理路由导航

Navigator.push和Navigator.pop

Flutter给我们提供了两种配置路由的跳转方式：基本路由、命名路由。

一、普通路由

以上篇文章的Home组件为例，

在onPressed监听事件中设置跳转的方法。

Home.dart

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

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("点我去搜索"),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => SearchPage("这是搜索的传值")));
          },
        )
      ],
    );
  }
}

Search.dart

在这个组件中接收了来自Home组件中的传值并显示了出来，并设置了一个浮动按钮来返回Home组件

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  final String tile;
  SearchPage(this.tile,{Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text("搜索"),
      ),
      body: Column(
        children: <Widget>[
          Text("$tile"),
        ],
      ),
    );
  }
}

二、命名路由

命名路由的需要在MaterialApp中设置routes，接受一个map{'路由别名':()=>路由组件的方法()} 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Tabs.dart';
import 'package:flutter_app/pages/Tabs/Category.dart';
import 'package:flutter_app/pages/Tabs/Home.dart';
import 'package:flutter_app/pages/Tabs/Search.dart';
import 'package:flutter_app/pages/Tabs/Setting.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
      routes: {
        '/setting':(context)=>SettingPage(),
        '/search':(context)=>SearchPage(),
        '/home':(context)=>HomePage(),
        '/category':(context)=>CategoryPage(),
      },
    );
  }
}

调用方法如下：

Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("点我去搜索"),
          onPressed: () {
            Navigator.pushNamed(context,'/search');
          },
        )
      ],
    );
  }
}

那么有参数的命名路由怎么传值呢：

首先我们先把我们在main.dart中的路由抽离出来

Routes.dart

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

final routes = {
  '/': (context) => Tabs(),
  '/search': (context, {arguments}) => SearchPage(arguments: arguments),
};

var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route = MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }else{
    return null;
  }
};

main.dart

import 'package:flutter/material.dart';
import 'routes/Routes.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: onGenerateRoute,
    );
  }
}

Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("点我去搜索"),
          onPressed: () {
            Navigator.pushNamed(context,'/search',arguments: {'id':'123456'});
          },
        )
      ],
    );
  }
}

 

返回根目录

Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(builder: (context)=>new TabsPage()),(route)=>(route)==null);

//new TabsPage()代表要返回的页面