flutter最簡單輕量便捷的路由管理方案NavRouter

大家好，我是CrazyQ1，今天給大家推薦一個路由管理方案，用的非常不錯的，叫nav_router。

項目地址是：https://github.com/fluttercandies/nav_router

這篇文章主要是來介紹這個東西的使用。

nav_router是flutter最簡單/輕量/便捷的路由管理方案，支持各種路由動畫，跳轉/傳參起來非常方便，跳轉新頁面只需：routePush(NewPage());

開始使用

添加依賴

dependencies:
  nav_router: any #具體版本自定義（any表示最新）

然后使用 flutter packages upgrade 來更新flutter的插件包

在項目的example里面有示例項目，可以直接去運行並參考代碼。

下面來說一下相關配置和使用。

配置

1.在MaterialApp的頁面先導入我們的插件

import 'package:nav_router/nav_router.dart';

2.在MaterialApp的navigatorKey屬性寫上navGK值

Widget build(BuildContext context) {
    return new MaterialApp(
      title: '',
      navigatorKey: navGK,
    );
  }

3.然后，我們就可以開始使用啦，下面是一個跳轉頁面的例子

Widget buildItem(RouteModel item) {
  return new FlatButton(
    onPressed: () => routePush(new NewPage()),
    child: new Text('點擊跳轉'),
  );
} 

4.如果我們想用其他路由動畫跳轉可以在后面添加跳轉屬性,比如：漸變動畫

routePush(new NewPage(), RouterType.fade);

然后我們來看看這個怎么方便的傳遞參數和接收並使用。

傳遞參數

這里主要講兩個方式來傳輸，具體的大家可以自己去研究下。

方式1

正常push新頁面，但是在后面加上Then，后面的v就是我們跳轉之后的頁面帶回來的數據，然后我們給它打印出來

routePush(NewPage()).then((v) {
  print('I received::$v');
});

那么我們新頁面就要pop返回值了，直接在pop然后括號里加上我們的參數，可以是任何類型的參數值，之后上面寫的東西就能接收到我們這次返回並帶過去的參數了。

FlatButton(
  onPressed: () {
    pop('This is the parameter');
  },
  child: Text('Return with parameters'),
),

方式2

方式二可以用我們的NavData，先在我們要push到的頁面添加NavData類型的參數接收,

class NewPage extends StatlessWidget {
  final NavData navData;

  NewPage({this.navData});
}

然后下面就判斷這個navData是否為空，也就是上級是否有接收這個方法，如果有的話就帶參數返回。

FlatButton(
  onPressed: () {
    if(navData == null) return;
    widget.navData('NavData mode parameter transmission');
    pop();
  },
  child: Text('Return with parameters'),
),

那么我們push的那個地方就可以用navData來接收值並且打印出來了。

routePush(NewPage(navData: (v) {
    print('I received::$v');
  }),
);

示例效果圖

具體可以去項目里面查看。

這里我推薦個FLutter學習群，分別有微信群和QQ群

Flutter教程網：www.flutterj.com

Flutter交流QQ群：874592746

然后貼上我們的公眾號“Flutter前線”

關注公眾號“Flutter前線”，各種Flutter項目實戰經驗技巧，干活知識，Flutter面試題答案，等你來領取。