關于路由與導航梳凛，看了Flutter中文網(wǎng)： https://flutterchina.club/routing-and-navigation/，需要查看英文文檔伶跷，不方便。
這里推薦大家在這里學習查看： https://flutter.cn/docs/cookbook/navigation
我們通常會用“屏”來表示應用的不同頁面（界面）叭莫。比如，某個應用有一“屏”展示商品列表雇初，當用戶點擊某個商品的圖片，會跳到新的一“屏”展示商品的詳細信息靖诗。
術語: 在 Flutter 中，屏 (screen) 和 頁面 (page) 都叫做 路由 (route)刊橘，在下文中統(tǒng)稱為“路由 (route)”。
在 Android 開發(fā)中促绵，Activity 相當于“路由”，在 iOS 開發(fā)中败晴，ViewController 相當于“路由”。在 Flutter 中尖坤，“路由”也是一個 Widget稳懒。
怎么樣從一個“路由”跳轉到新的“路由“呢慢味？你需要使用 Navigator 類佛致。
然后發(fā)現(xiàn)flutter中文網(wǎng)提供的例子不太友好，可以看這里：[路由和導航]https://flutter.cn/docs/development/ui/navigation
導航到一個新頁面和返回
怎么樣從一個“路由”跳轉到新的“路由“呢俺榆？你需要使用 Navigator 類。
步驟
下面來展示如何在兩個路由間跳轉罐脊，總共分三步：
創(chuàng)建兩個路由
用 Navigator.push() 跳轉到第二個路由
用 Navigator.pop() 回退到第一個路由
- 創(chuàng)建兩個路由
首先，我們來創(chuàng)建兩個路由萍桌。這是個最簡單的例子，每個路由只包含一個按鈕上炎。點擊第一個路由上的按鈕會跳轉到第二個路由，點擊第二個路由上的按鈕藕施，會回退到第一個路由。
首先來編寫界面布局代碼：
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
}),
),
);
}
}
// SecondRoute 第二個頁面不用MaterialApp裳食， 直接Scaffold，可以箭頭返回
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
child: Text('Go back!'),
onPressed: () {
Navigator.pop(context);
}),
),
);
}
}
- 用 Navigator.push() 跳轉到第二個路由
使用Navigator.push()方法跳轉到新的路由诲祸。push()方法會添加一個Route對象到導航器的堆棧上而昨。那么這個Route對象是從哪里來的呢救氯？你可以自己實現(xiàn)一個歌憨，或者直接使用MaterialPageRoute類着憨。使用MaterialPageRoute是非常方便的躺孝，框架已經(jīng)為我們實現(xiàn)了和平臺原生類似的切換動畫底桂。
在 FirstRoute widget 的 build() 方法中植袍，我們來修改 onPressed() 回調函數(shù)：
// 位于 FirstRoute widget (Within the `FirstRoute` widget)
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}
- 用 Navigator.pop() 回退到第一個路由
怎么關閉第二個路由回退到第一個呢? 使用Navigator.pop()方法籽懦，pop()方法會從導航器堆棧上移除Route對象。
我們來修改 SecondRoute widget 的 onPressed() 回調函數(shù)暮顺，實現(xiàn)返回第一個路由的功能：
// 位于 SecondRoute widget (Within the SecondRoute widget)
onPressed: () {
Navigator.pop(context);
}
完整樣例:
class NavigatorTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
}),
),
);
}
}
// SecondRoute 第二個頁面不用MaterialApp秀存， 直接Scaffold羽氮，可以箭頭返回
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
child: Text('Go back!'),
onPressed: () {
Navigator.pop(context);
}),
),
);
}
}
