路由的簡單實用

• 基本的界面跳轉

class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("first Screen"), ), body: Center( child: RaisedButton( child: Text("this is first screen"), onPressed: () { //go to second screen Navigator.push(context, MaterialPageRoute(builder: (context)=>SecodeScreen())); }, )), ); } } 

Screenshot_1545962905.png

如上圖所示,第一個界面中包含了一個按鈕,在按鈕的點擊事件中

 Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen())); 

這句代碼的意思將頁面SecondScreen壓入路由棧,在Android開發中我們也是同樣的使用一個回退棧管理我們的界面,既然有入棧操作,那么一定有出棧了,沒錯,下面看第二個界面的代碼:

class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("second screen"), ), body: Center( child: RaisedButton( child: Text("go back"), onPressed: () { Navigator.pop(context); }, ), ), ); } } 

我們使用了

 Navigator.pop(context); 

將該本頁面彈出路由棧,從而返回到第一個頁面。
以上就是例子可以在官方文檔中找到，這只是最簡單的路由跳轉，但是平時我們開發經常需要在頁面之間傳值，所以下面我們來看看，flutter中路由如何傳遞參數。

• 傳遞參數到新頁面
  我們繼續使用官方的例子，首先定義一個實體類，

class Todo{ final String title; final String desc; Todo(this.title,this.desc); } 

然后我們創建一個todoList

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: TodoScreen( todos: List.generate(10, (i) => Todo("title$i", "Desc$i"))), ); } } //列表頁 class TodoScreen extends StatelessWidget { final List<Todo> todos; TodoScreen({Key key, @required this.todos}) : super(key: key);@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("todos"), ), body: ListView.builder( itemCount: todos.length, itemBuilder: (context, index) { return ListTile( title: Text(todos[index].title), onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(todo: todos[index]))); }, ); }, ), ); } }//詳情頁 class DetailScreen extends StatelessWidget { final Todo todo; DetailScreen({Key key, @required this.todo}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(todo.title), ), body: Center( child: Text(todo.desc), ), ); } } 

在代碼里我們通過

Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(todo: todos[index]))); }, ); 

將todo傳到了詳情頁,也就是通過構造函數傳值,在flutter中一切都是widget,我們在DetailScreen里通過構造函數接收即可。

• 攜帶參數返回
  在Android開發中，我們通常使用startActivityForResult啟動新頁面，這樣可以在當前中重寫onActivityForResult來接收新頁面返回的參數，那么在Flutter中該怎么坐呢，答案是使用Navigator.Pop（）,

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: HomeScreen(), ); } }class SelectionButton extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return RaisedButton( child: Text('pick an option,any option'), onPressed: () { _navigateAndDisplaySelection(context); }, ); } } _navigateAndDisplaySelection(BuildContext context) async{ final result= await Navigator.push(context,MaterialPageRoute(builder: (context)=>SelectionScreen()) ); Scaffold.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content:Text("$result"))); } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text('home screen'), ), body: Center(child: SelectionButton()), ); } } class SelectionScreen extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text("pick on option"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(8.0), child: RaisedButton( onPressed: (){ Navigator.pop(context,"yep"); }, child: Text("yep"), ), ), Padding( padding: const EdgeInsets.all(8.0), child: RaisedButton( onPressed: (){ Navigator.pop(context,"nope"); }, child: Text("nope"), ), ) ], ), ), ); }} 

Pop方法的第二個參數是一個

T result 

這樣我們在出棧的時候可以將參數帶回到上一個頁面,在上一個頁面中，我們這樣來接收

_navigateAndDisplaySelection(BuildContext context) async{ final result= await Navigator.push(context,MaterialPageRoute(builder: (context)=>SelectionScreen()) ); Scaffold.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content:Text("$result"))); } 

• 命名路由
  首先我們先定義一個路由映射關系

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue, ), home: FirstScreen(), routes: { '/second':(context)=>SecondScreen() }, ); } } 

routes是一個map，用來管理我們定義的命名路由，之后我們就可以使用

Navigator.pushNamed(context, "/second"); 

來進行路由的跳轉，但是命名路由的方式有一個缺點，就是不能直接攜帶參數，只能靜態的在注冊路由的時候這么寫：

 routes: { '/second':(context)=>SecondScreen('params') }, 

這樣在傳遞一些動態的改變的參數時候就顯得不方便。

• Hero控件
  這個很像Android里的共享元素，比如頁面A和頁面B都有一張相同的圖片，讓他們之間跳轉的時候，圖片無縫過渡，在Flutter使用Hero可以實現這一效果。下面來看看代碼中如何實現。

class HeroApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Transition Demo', home: MainScreen(), ); } }class MainScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Main Screen'), ), body: GestureDetector( child: Hero( tag: 'imageHero', child: Image.network( 'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg', ), ), onTap: () { Navigator.push(context, MaterialPageRoute(builder: (_) { return DetailScreen(); })); }, ), ); } }class DetailScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: GestureDetector( child: Center( child: Hero( tag: 'imageHero', child: Image.network( 'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg', ), ), ), onTap: () { Navigator.pop(context); }, ), ); } } 

在不同頁面通過給Hero設置相同的tag，使它們關聯起來。

總結

Flutter中路由的常用使用方式基本介紹完了，主要參考官方例子，如有不足，歡迎指正。

參考

Flutte Doc

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/17608.html