Flutter使用push pop方法及路由進(jìn)行導(dǎo)航詳解
正文
在 Web/Mobile 應(yīng)用程序中，導(dǎo)航是一個(gè)很重要的特性，因?yàn)樗试S你從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面。
在 flutter 應(yīng)用程序中，我們可以使用 push(), pop() 方法實(shí)現(xiàn)導(dǎo)航，或者編寫我們自己的路由。
準(zhǔn)備工作
我們假設(shè) FirstScreen 和 SecondScreen 是兩個(gè)不同的類，分別在各自的 FirstScreen.dart 和 SecondScreen.dart 文件內(nèi)。
FirstScreen.dart 文件如下：
import 'package:flutter/material.dart';
import 'package:navigation/SecondScreen.dart';
class FirstScreen extends StatefulWidget {
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Hello to First Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"First Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
),
);
}
}
SecondScreen.dart 文件如下：
import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Welcome on Second Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"Second Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
),
);
}
}
main.dart 的內(nèi)容如下：
import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
void main() {
runApp(MaterialApp(
home: FirstScreen()));
}
第一種導(dǎo)航方式
我們可以使用 Navigator.push() 方法和 Navigator.pop() 方法進(jìn)行頁面/屏幕導(dǎo)航。
為了觸發(fā) RaisedButton 事件后從 FirstScreen 導(dǎo)航到 SecondScreen。我們需要在 FirstScreen 的 build() 方法里面的 RaisedButton 中 onPressed(){} 添加如下的事件：
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
},
Navigator.push() 方法將給定的路由推送到路由棧中，這個(gè)路由是由 Navigator 類來維護(hù)。
現(xiàn)在，我們可以使用 MaterialPageRoute路由 或者我們可以創(chuàng)建自己的路由。
將一個(gè)新的路由添加到棧中，我們可以通過一個(gè) builder 函數(shù)創(chuàng)建一個(gè) MaterialPageRoute 的實(shí)例。builder 函數(shù)可以創(chuàng)建我們想在頁面中展示的掛件。
(context) => SecondScreen() 指向 SecondSreen 上下文。
為了通過 RaisedButton 點(diǎn)擊事件，從 SecondScreen 返回到 FirstScreen 頁面：我們需要在 SecondScreen 頁面中添加如下的內(nèi)容：
onPressed: () {
Navigator.pop(context);
}
這里的 pop() 方法是將導(dǎo)航棧中最新的路由彈出。
第二種導(dǎo)航方式
通過 MaterialApp 構(gòu)造函數(shù)額外提供的屬性：initialRoute 和 routes。
import 'package:flutter/material.dart'
import 'package:navigation/FirstScreen.dart'
import 'package:navigation/SecondScreen.dart'
void main() {
runApp(MaterialApp(
initialRoute: '/firstScreen',
routes: {
'/firstScreen': (context) => FirstScreen(),
'/secondScreen': (context) => SecondScreen(),
},
home: FirstScreen(),
));
}
initialRoute 屬性定義應(yīng)用應(yīng)該從哪個(gè)路由開始。routes 屬性定義有哪些路由是可以獲取的，且路由導(dǎo)航到哪些掛件。
這里，當(dāng)路由導(dǎo)航到 /firstScreen 時(shí)，FirstScreen 掛件將構(gòu)建。
現(xiàn)在，我們將 FirstScreen 的 onPressed(){} 的方法更改如下：
onPressed: () {
Navigator.pushNamed(context, '/secondScreen');
}
這里使用命名路由 Navigator.pushNamed() 導(dǎo)航到第一個(gè)頁面。
在 SecondScreen 的 onPressed(){} 事件中，還是保留使用 Navigator.pop() 方法：
onPressed: () {
Navigator.pop(context);
}
以上就是Flutter使用push pop方法及路由進(jìn)行導(dǎo)航詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutter push pop方法路由導(dǎo)航的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Android中g(shù)etActivity()為null的解決辦法
在Android開發(fā)的時(shí)候可能遇過出現(xiàn)getActivity()出現(xiàn)null的時(shí)候?qū)е鲁绦驁?bào)出空指針異常，那么遇到這種情況改如何解決，下面跟著小編一起去看看。2016-08-08
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)3D卡片式輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了iOS App之間的通信 －local socket示例的相關(guān)資料,需要的朋友可以參考下2016-09-09
iOS11 WKWebView 無法加載內(nèi)容的解決方法
這篇文章主要介紹了iOS11 WKWebView 無法加載內(nèi)容,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了iOS下拉選擇菜單封裝代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要給大家介紹了關(guān)于iOS常見宏理解及使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要給大家介紹了關(guān)于WKWebView、WebView和JS的交互方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
IOS點(diǎn)擊按鈕隱藏狀態(tài)欄詳解及實(shí)例代碼
這篇文章主要介紹了IOS點(diǎn)擊按鈕隱藏狀態(tài)欄詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
iOS項(xiàng)目的開發(fā)命名規(guī)范教程
為了團(tuán)隊(duì)各成員之間代碼的互通、可讀、易維護(hù)性，特制訂此開發(fā)規(guī)范。下面這篇文章主要給大家介紹了關(guān)于iOS項(xiàng)目的開發(fā)命名規(guī)范的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要介紹了淺談SwiftUI 里面$0是什么意思如何用,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01