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()代表要返回的頁面