溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Flutter路由管理和二次封裝的方法是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Flutter路由管理和二次封裝的方法是什么文章都會有所收獲，下面我們一起來看看吧。
在原生開發中，安卓和IOS自有控制頁面（Activity、ViewControl)跳轉的功能，在flutter中，路由管理變得更加統一靈活高效。
在 MaterialApp 中內置的路由管理，有兩種操作方式：
兩種方式各有優劣，項目中酌情選擇，第一種方式更靈活，簡單除暴，但無法統一管理，比較松散，第二種可以統一管理，使用路由name進行對應操作，但是傳值、取值可能較麻煩。
前面說了，flutter中的頁面也是組件，所以我們首先用Scaffold腳手架創建兩個獨立的頁面：
HomePage 和
NextPage。用這兩個頁面來實現后續的所有需求：
無需聲明組件，直接使用api跳轉到回調中的組件頁面：
// HomePage 頁面
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
},
child: Text("跳轉到第二頁"),
),
),
);
}
}
// NextPage 頁面
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Next Page"),
),
body: Container(
child: Text("Next Page"),
),
);
}
}
直接使用api，就可以進行快速的頁面跳轉，其中關鍵跳轉代碼
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
...
因為是默認的跳轉方式，在安卓和蘋果端會有不同的動畫效果：安卓中是從下到上的漸隱，而ios中則是從右向左的滑入。
傳值的話，應該一看就非常清楚，在對應頁面設置數據屬性，實例化時，直接設置即可，關鍵代碼：
// HomePage
...
Navigator.push(context, MaterialPageRoute(builder: (ctx) {
return NextPage(
data: "Home Page Data",
);
}));
...
// NextPage
class NextPage extends StatelessWidget {
String data;
NextPage({this.data});
...
}
...
Navigator.pop(context);
...
上面說到的Navigator.pop方法的第二個參數可以傳遞一個任何類型的數據，該參數就是反向傳值的內容。
而首頁中的Navigator.push方法返回一個Future，就是出棧頁面的Navigator.pop函數的第二個參數，我們使用async和await可以快速的獲取其中的內容：
//
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: () async {
var returnData = await Navigator.push(context, MaterialPageRoute(builder: (ctx) => NextPage()));
print("Next Page 返回給 Home Page： ${returnData}");
},
child: Text("跳轉到第二頁"),
),
),
);
}
}
//
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Next Page"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context, {"data": "反向傳值內容"});
},
child: Text("返回上一頁"),
)
],
),
),
);
}
}
跳轉到NextPage后點擊返回上一頁，可以看到控制臺輸出內容：
I/flutter (11371): Next Page 返回給 Home Page： {data: 反向傳值內容}這是靠Navigator.pop函數進行的返回傳值操作，如果點擊頁面AppBar中的返回圖標返回值則為
null
MaterialApp 內置了路由管理功能，在 MaterialApp 類中的
routes 參數中聲明路由名稱和對應組件：
class FeDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (ctx) => HomePage(),
"NextPage": (ctx) => NextPage(),
},
);
}
}
在聲明了名稱和組件后，我們就可以直接使用name來進行路由操作：
...
// 'NextPage' 已聲明為 NextPage() 組件
Navigator.pushNamed(context, "NextPage");
...
返回上一頁的方式，在兩種管理方式中都是一樣的，使用
Navigator.pop
...
Navigator.pop(context, {"a": "反向傳值"});
...
正向傳值就有所不同，因為在未聲明路由的方式中，我們可以直接接觸到對應頁面的對象，但是在聲明路由的方式中，對應對象在聲明時就已經創建好了，在跳轉時無法直接獲取到了，所以傳值和獲取的方式有所不同。
傳值時，使用Navigator.pushNamed中的arguments參數：
...HomePage
// 'NextPage' 已聲明為 NextPage() 組件
Navigator.pushNamed(context, "NextPage", arguments: "傳值");
...
獲取時，使用下面的代碼：
... NextPage
// 獲取值
var data = ModalRoute.of(context).settings.arguments;
...
和未聲明的方式一致，Navigator.pushNamed同樣返回Future。
flutter的出現，隨之誕生了一批優秀的庫，fluro就是其中之一。
它更靈活、耦合更低、支持各種頁面切換動畫，進行簡單的二次封裝就可以實現輕松的路由管理、權限攔截。
fluro是需要提前對路由進行聲明的，而且所有的路由操作都需要適用全局的Router對象。
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
final router = Router();
void main() {
// 聲明路由
router.define(
"/NextPage",
handler: Handler(
handlerFunc: (ctx, params) {
return NextPage();
},
),
);
runApp(FeDemoApp());
}
class FeDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
//
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: RaisedButton(
onPressed: () async {
var returnData = await router.navigateTo(
context,
"/NextPage",
transition: TransitionType.nativeModal,
);
print("返回值： ${returnData}");
},
child: Text("跳轉到第二頁"),
),
),
);
}
}
//
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Next Page"),
),
body: Container(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("返回上一頁"),
)
],
),
),
);
}
}
我們可以通過修改跳轉動畫
TransitionType.cupertino 來實現在安卓端顯示ios的滑入滑出效果。
下面是對fluro的簡單封裝，統一了全局的路由對象，路由名稱使用了靜態參數，跳轉方式也進行了樣式統一，頁面攔截也很容易拓展：
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'main.dart' as Main;
class App {
static final router = Router();
static String HomePage = "/HomePage";
static String NextPage = "/NextPage";
// 初始化路由
static void initRouter() {
var routers = {
"${HomePage}": Handler(
handlerFunc: (ctx, params) => Main.HomePage(),
),
"${NextPage}": Handler(
handlerFunc: (ctx, params) => Main.NextPage(),
),
};
routers.forEach((key, value) {
router.define(key, handler: value);
});
}
static Future<dynamic> PageTo(BuildContext context, String path) {
return router.navigateTo(
context,
path,
transition: TransitionType.nativeModal,
);
}
static Future<dynamic> AuthTo(BuildContext context, String path) {
// TODO: 驗證權限，再決定向哪跳轉
var auth = true;
if (auth) {
return router.navigateTo(
context,
path,
transition: TransitionType.nativeModal,
);
} else {
// 驗證失敗，跳轉到了首頁
return router.navigateTo(
context,
HomePage,
transition: TransitionType.nativeModal,
);
}
}
}
關于“Flutter路由管理和二次封裝的方法是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Flutter路由管理和二次封裝的方法是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
