Flutter早知道 - Named Router能夠傳參了！

本文中涉及部分非Flutter的stable版本(2019年2月25日 爲止)，您可查閱Flutter相關文檔查看新功能是否同步的stable分支或者切換其餘分支(如master)中體驗

引言

在咱們使用Flutter開發App時，路由是必須用到的。

Flutter提供了兩種方式進行路由，分別是 Navigator.push() (例) 以及 Navigator.pushNamed() (例)。

對於這兩種方式各有各的優勢與缺點：

1. Navigator.push()

• 優勢：動態、自由度大，能夠以不一樣的動畫方式跳轉到新頁面，且能夠傳遞參數到新的頁面。
• 缺點：會形成代碼冗餘，並且不便於代碼維護。(固然你能夠將其進行封裝 這裏不討論這一點)

2. Navigator.pushNamed()

• 優勢：一句話就能實現頁面的跳轉與目前大多數框架的方式類似。
• 缺點：不能傳遞參數！不能傳遞參數！不能傳遞參數！

選擇

在實際開發運用中，咱們也是更加傾向於Named路由方式。

可是惟一不足之處就是它不支持傳遞參數，這一點實在是使人抓狂。

其實在Flutter的Issues中16年就有人提出這個問題，可是這個Issue一直到今年纔有PR被提交(目前爲止這個功能僅僅被合併進master分支並無同步到bate或者stable)

上手體驗

1. 首先咱們要切到master分支下

執行 flutter channel master 而後再運行命令flutter upgrade保證你處於最新的版本。便可切換到master分支下

2. 建立一個Flutter項目
3. 這裏咱們在main.dart中略做修改

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: (){
            // TODO
          },
          child: Text("go next page with params"),
        ),
      ),
    );
  }
}


複製代碼

4. 添加第二個頁面page.dart

import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page"),
      ),
    );
  }
}
複製代碼

5. 添加路由並跳轉同時傳遞參數 main.dart

import 'package:flutter/material.dart';
// 引入新頁面
import 'page.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 處理Named頁面跳轉 傳遞參數
      onGenerateRoute: (RouteSettings setting) {
        if(setting.name == '/page') {
          return MaterialPageRoute(builder: (context) => Page(id: setting.arguments['id']));
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: (){
            // 進行Named頁面跳轉 傳遞參數
            Navigator.pushNamed(context, '/page', arguments: { "id": 1} );
          },
          child: Text("go next page with params"),
        ),
      ),
    );
  }
}


複製代碼

6. 頁面接受參數 page.dart

import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  Page({this.id});
  final int id;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page, id is $id"),
      ),
    );
  }
}
複製代碼

效果

優化

這裏咱們仍是要在onGenerateRoute處理咱們的Named跳轉，咱們在對他進行優化一下。

(目前沒辦法在MaterialApp的routes進行處理，緣由可見源碼(一)(二))

源碼一處：調用widget.pageRouteBuilder並傳入settings(arguments在settings中)

源碼二處：pageRouteBuilder被寫死爲構建一個MaterialPageRoute，而MaterialPageRoute中並無對settings進行傳遞

因此咱們只能本身在onGenerateRoute中進行處理。(但願官網也能繼續優化，emmmm拭目以待)

/** * main.dart */
import 'package:flutter/material.dart';
// 引入新頁面
import 'page.dart';

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

class MyApp extends StatelessWidget {
  // 定義路由信息
  final Map<String, Function> routes = {
    '/page': (context, {arguments}) => Page(arguments: arguments)
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // 處理Named頁面跳轉 傳遞參數
      onGenerateRoute: (RouteSettings settings) {
        // 統一處理
        final String name = settings.name;
        final Function pageContentBuilder = this.routes[name];
        if (pageContentBuilder != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // 進行Named頁面跳轉 傳遞參數
            Navigator.pushNamed(context, '/page', arguments: {'id': 123});
          },
          child: Text("go next page with params"),
        ),
      ),
    );
  }
}


/** * page.dart */

import 'package:flutter/material.dart';

class Page extends StatelessWidget{
  Page({this.arguments});
  final Map arguments;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text("hi this is next page, id is ${arguments != null ? arguments['id'] : '0'}"),
      ),
    );
  }
}

複製代碼

相關代碼

flutter_new_feature