Flutter命名路由及命名路由傳值

上一篇博客我們學習了普通路由和普通路由傳值，今天我們學習命名路由和命名路由傳值，它更加的適用於中大型項目。能夠達到統一管理路由的效果。

我們實現的效果是從首頁跳轉到商品頁面，再跳轉到商品詳情頁面，然後返回上一級頁面。

以下是涉及到的所有頁面的代碼，複製即可運行，涉及到的文件路徑參考自己的路徑修改i：
main.dart

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

void main() => runApp(MyApp());//入口函數

class MyApp extends StatelessWidget {

  final routes = {
    '/form': (context) => Formpage(),
    '/search': (context) => Searchpage()
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: Tabs(),
      initialRoute:'/',//初始化加載的路由
      onGenerateRoute: onGenerateRoute//把routes裏面的代碼給到這裏執行
    );
  }
}

Routes.dart路由配置文件。
這是一個很重要的配置文件，記住就好。

import 'package:flutter/material.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Tabs.dart';
import '../pages/Product.dart';
import '../pages/Productinfo.dart';


//配置路由，以後所有的跳轉的頁面都可以再這裏完成
final routes = {
  '/':(context)=>Tabs(),//配置根目錄
  '/form': (context) => Formpage(),
  'search': (context,{arguments}) => Searchpage(arguments:arguments),
  '/productinfo':(context,{arguments})=>Productinfopage(arguments:arguments),
  'product':(context)=>Productpage()
};

//固定寫法，理解不了就記住。
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;
    }
  }
};

Tabs.dart頁面的代碼跟上一篇普通路由的代碼一樣。
管理首頁導航的頁面

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.pushNamed(context, 'product');
            })
      ],
    );
  }
}

Product.dart商品頁面

import 'package:flutter/material.dart';

class Productpage extends StatefulWidget {
  @override
  _ProductpageState createState() => _ProductpageState();
}

class _ProductpageState extends State<Productpage> {
  @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.pushNamed(context, '/productinfo', arguments: {"pid":"master最帥"});
                })
          ],
        )
      );
  }
}

Productinfo.dart商品詳情頁面

import 'package:flutter/material.dart';

class Productinfopage extends StatefulWidget {
  var arguments;
  Productinfopage({Key key, this.arguments}) : super(key: key);

  @override
  _ProductinfopageState createState() =>
      _ProductinfopageState(arguments: this.arguments);
}

class _ProductinfopageState extends State<Productinfopage> {
  Map arguments;
  _ProductinfopageState({this.arguments}); //構造函數

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("詳情頁面"),),
      body: Container(
        child: Text("pid=${arguments["pid"]}"),
      ),
    );
  }
}

實現難點是把各個組件的代碼抽離出來，以及路由配置。慢慢理解。

附上效果圖：



現在我們實現的是一級一級返回上一頁，給大家一個問題，怎麼返回到根目錄？？
歡迎留言，交流學習~